/* Object Radar — V2.1
   Recreated because the original CSS file was not supplied.

   style_index.css
    │
    ├── hero
    │
    ├── problem-section
    │
    ├── steps
    │   └── step-card
    │
    ├── device-screen
    │
    ├── identify-switcher    
    │
    ├── use-cases
    │   └── use-case-card
    │
    ├── features
    │   └── feature-card
    │
    ├── faq
    │
    ├── credits
    │
    ├── resource-links
    │
    ├── final-cta
    │
    └── responsive index

   SECTION : USE CASE
   .use-case-card
    ├── .use-case-icon          → numéro 01
    ├── .use-case-content       → titre + description
    ├── .use-case-device-icon   → objet représenté
    └── .arrow                  → indication de navigation
   
   SECTION : FEATURE
   .feature-card
    ├── .feature-icon           → illustration de la fonctionnalité
    ├── h3                      → titre
    └── p                       → description

   .use-case-card        → <a> → cliquable
   .feature-card         → <article> → non cliquable


   Nomenclature:
   - `.use-case-card-header` → top part of a card
   - `.use-case-content`     → title + explain text
   - `.use-case-number`      → number
   - `.use-case-device-icon` → illustative object
   - `.arrow`                → navigation indication



*/

/* ============================================================
   SECTION: HERO
   ============================================================ */
.hero {
    min-height: 92vh;
    padding: 150px 24px 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-icon {
    width: 140px;
    height: 140px;
    margin-bottom: 28px;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
}

.hero-subtitle {
    max-width: 650px; /* v2 : 620*/
    margin-bottom: 30px; /*v2 : 34*/
    color: var(--muted);
    font-size: clamp(1.05rem,2vw,1.35rem);
}

/* ============================================================
   SECTION: THE PROBLEM
   ============================================================ */
/* The blue identity break requested for "The problem". */
.problem-section {
    background:
        radial-gradient(circle at 50% 100%,
            rgba(79,140,255,.20) 0,
            rgba(79,140,255,.10) 20%,
            rgba(79,140,255,.035) 43%,
            transparent 68%),
        var(--blue-soft);
}

.problem-section .eyebrow { color: #3976dc; }


/* ============================================================
   SECTION: HOW IT WORKS

    2 cases:

       step-card
    └── step-card-header
    
    or

    step-card
    └── identify-switcher
        ├── input #identify-tags
        ├── input #identify-favorites
        ├── step-card-header
        │   ├── step-number-icon
        │   └── identify-tabs-control
        │       ├── label Tags
        │       └── label Favorites
        ├── device-screen Tags (previous : fake-screen without picutre)
        └── device-screen Favorites (previous : fake-screen without picutre)
   ============================================================ */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch; /*start;*/
}

.step-card {
    position: relative;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 18px 50px rgba(16,17,20,.055);
}

/* Prefer step-number-icon" or "feature-number" to look the same as "use-case-number" */
.step-number/*,
.feature-index*/ {
    display: block;
    margin-bottom: 22px;
    color: var(--blue);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .12em;
}

/* Header shared by the step number and optional controls */
.step-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

/* The step number no longer controls the vertical spacing itself */
.step-card-header .step-number-icon {
    margin-bottom: 0;
}

.step-number/*,
.feature-number*/ {
    /* v3 : same as use-case-number (maybe change the name of the class) */
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
    border-radius: 30%; /*12px;*/
    background: var(--blue-soft-background);
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 700;
}

/* **************************************** */
/* Manages device-screen with pictures or not */
/* **************************************** */
.device-screen {
    height: auto; /* TEST */
    min-height: 0;/* TEST */

    /*min-height: 270px;*/
    width: 100%;
    
    margin-bottom: 26px;
    border-radius: 18px;

    /* with no capture */
    /* background: linear-gradient(180deg,#fafbfc 0%,#f1f3f6 100%); */

    /* with capture */
    /* Border to give an appearance of a phone without being an iPhone or other model / brand */
    aspect-ratio: 9/16;

    border: 5px solid #dfe2e7;
    /* other style : */ 
    /* border: 2px solid #1c1c1e; */
    padding: 0px;
    overflow: hidden;
    background: dfe2e7;

    display: grid;
    place-items: center;
    color: #9aa0a9;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.device-screen.tracking {
    background:
        radial-gradient(circle,rgba(79,140,255,.20),transparent 42%),
        linear-gradient(180deg,#fafbfc 0%,#f1f3f6 100%);
}

/* To keep the ration of a picture */
.device-screen img {
    display: block;
    width: 100%; /* <-- test : repemettre a auto; */
    height: auto;
    /*max-width: 100%;*/
    /*max-height: 95%;*/
    object-fit: contain; /* can be deleted with height to auto */
    border-radius: 18px /* inherit */;
}

/* **************************************** */
/* Manages pictures switches (identify)     */
/* **************************************** */
/* Identify filter switcher */
/*.identify-switcher {*/
    /* margin-bottom: 26px; */ /* no margin because managed by other class */
/*}*/

/* Hide the radio controls */
.identify-switcher > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* iOS-style segmented control */
.identify-tabs-control {
    display: flex;
    width: fit-content;
    margin-left: auto;
    padding: 3px;
    gap: 2px;
    border-radius: 11px;
    background: #eef0f3;
}

/* Individual filter */
.identify-tabs-control label {
    min-width: 60px;
    padding: 7px 14px;
    border-radius: 8px;
    color: #6f737b;
    font-size: .76rem;
    font-weight: 650;
    text-align: center;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

/* Active filter - The activated switch is blue */
#identify-tags:checked ~ .step-card-header .identify-tabs-control label[for="identify-tags"],
#identify-favorites:checked ~ .step-card-header .identify-tabs-control label[for="identify-favorites"] {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 1px 4px rgba(16,17,20,.10);
}

/* Only one screenshot is visible */
.identify-screen--favorites {
    display: none;
}

#identify-favorites:checked ~ .identify-screen--tags {
    display: none;
}

#identify-favorites:checked ~ .identify-screen--favorites {
    display: grid;
}

/* ============================================================
   SECTION: USE CASES
   ============================================================ */
.use-cases {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

/* Beahavior of a selected card (this class and ":hover") */
.use-case-card {
    position: relative;
    min-height: 250px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* Following line not necessary when inserted a the begining of the file */
    box-sizing: border-box; /* Indicates that border, padding and size content are included in pixels */
    
    color: inherit;
    text-decoration: none;

    border: 1px solid #dedfe3;
    border-radius: var(--radius);
    background: rgba(255,255,255,.72);
    
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.use-case-card:hover {
    transform: translateY(-5px);
    border-color: #cbd0d8;
    box-shadow: 0 20px 50px rgba(16,17,20,.08);
}

/* Header of the use cases */
.use-case-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Common display number and background for "Use cases" and "Features" */
.use-case-number,
.feature-number {
    display: inline-flex;
    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 30%; /*12px;*/
    background: var(--blue-soft-background);

    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Margins are managed differently between "Use cases" and "Features" */
.nuse-case-number {
    margin-bottom: 35px;
}

.use-case-content {
    min-width: 0; /* Allow the content to reduce its size */
    width: 100%;
}

/* Icon insert inside a "Use cases" and "Features" */
.use-case-device-icon/*,
.feature-application-icon*/ {
    position: absolute;
    
    flex: 0 0 auto;

    top: 30px;
    right: 30px;

    width: 64px;
    height: 64px;

    object-fit: contain;
}

/*
.use-case-card p {
    max-width: 340px;
    margin-bottom: 18px;
    color: var(--muted);
}
*/

.use-case-card h3,
.use-case-card p {
    position: relative;
    z-index: 1;
}

.use-case-card h3 {
    color: var(--text);
}

.use-case-card p {
    color: var(--muted);
}


/* ============================================================
   SECTION: FEATURES
   ============================================================ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.feature-grid article {
    /* Feature-grid article defined in two sections */
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);

    padding: 25px;
    min-height: 190px;
}

/* Hide the border to elements 3n (== 3, 6, 9, etc.) - DO NOT USE ANYMORE IN THE NEW DISPLAY */
/* .feature-grid article:nth-child(3n) { border-right: 0; } */

.feature-grid p { color: var(--muted); }

/* Header of the feature */
.feature-card-header {
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

/* .feature-number {} : see common declaration at "use-case-number" */

/* Specific margin */
.feature-number{
    margin-bottom: 22px;
}

/* Not used yet - see "feature-icon" */
/*.feature-application-icon {} : see common declaration at "use-case-device-icon" */

.feature-icon {
    /*position: absolute;
    top: 0;
    right: 0;

    width: 56px;
    height: 56px;

    object-fit: contain;*/
    
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ============================================================
   SECTION: LIMITATIONS
   ============================================================ */
/* quote-box (span / strong) replaced by highlight-box (common.css) */

/* ============================================================
   SECTION: FAQ AND CREDITS
   ============================================================ */
.faq, 
.credits { 
    border-top: 1px solid var(--line); 
}

.faq details,
.credits details { 
    border-bottom: 1px solid var(--line);
}

.faq summary,
.credits summary {
    padding: 25px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.08rem;
    /*font-weight: 600;*/
    color: var(--muted);
}

.faq summary::-webkit-details-marker,
.credits summary::-webkit-details-marker { 
    display: none; 
}

.faq summary::after,
.credits summary::after {
    content: "+";
    float: right;
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 400;
}

.faq details[open] summary::after,
.credits details[open] summary::after { 
    content: "−"; 
}

.hide-label {
    display: none;
}

.credits details[open] .show-label {
    display: none;
}

.credits details[open] .hide-label {
    display: inline;
}

.faq details p,
.credits details p  {
    max-width: 760px;
    padding: 0 40px 28px 0;
    margin-bottom: 0;
    color: var(--muted);
}

/* ============================================================
   SECTION: CREDITS AND LICENSES
   ============================================================ */
.credits-content {
    display: grid;
    gap: 16px;
    padding: 0 0 28px;
}

.credit-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.credit-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.credit-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
}

.credit-card-heading {
    flex: 1;
    min-width: 0;
}

.credit-link {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.credit-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.credit-author {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.credit-description {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: .9rem;
}

.credit-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.credit-link:hover {
    text-decoration: underline;
}

/* ============================================================
   SECTION: RESOURCES
   ============================================================ */
.resource-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* USAGE : prefer common primary-button (common CSS) */
.resource-links a {
    padding: 13px 20px;
    border-radius: 999px;
    color: #fff;
    background: #1671e8;
    transition: transform .2s ease, opacity .2s ease;
}

.resource-links a:hover { transform: translateY(-2px); opacity: .9; }


/* ============================================================
   SECTION: RESPONSIVE - CALL TO ACTION (CTA)
   ============================================================ */
.final-cta {
    position: relative;
    overflow: hidden;
    padding: 150px 24px 170px;
    text-align: center;
    background:
        /* Halo from bottom to top */
        radial-gradient(circle at 50% 100%,
            rgba(79,140,255,.32) 0,
            rgba(79,140,255,.17) 18%,
            rgba(79,140,255,.07) 38%,
            transparent 66%),
        var(--surface); /* v2 #fff; */
}

.final-cta .section-inner { position: relative; z-index: 1; }

.final-cta h2 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   OTHER MEDIA SUPPORT (MOBILE DEVICES)
   ============================================================ */
@media (max-width: 900px) {
    .steps,.use-cases {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin-inline: auto; /* keep a grid centered */
    }
    .step-card { min-height: auto; }
    .feature-grid { grid-template-columns: repeat(2,1fr); }

    /* Hide the border to elements 2n (== 2, 4, 6, etc.), 3n (== 3, 6, 9, etc.) - DO NOT USE ANYMORE IN THE NEW DISPLAY */
    /*
    .feature-grid article:nth-child(3n) { border-right: 1px solid var(--line); }
    .feature-grid article:nth-child(2n) { border-right: 0; }
    */
}

@media (max-width: 650px) {
    .steps,.use-cases,.feature-grid { grid-template-columns: 1fr; }

    /* Hide the border to elements 2n (== 2, 4, 6, etc.), 3n (== 3, 6, 9, etc.) - DO NOT USE ANYMORE IN THE NEW DISPLAY */
    /*
    .feature-grid article,
    .feature-grid article:nth-child(2n),
    .feature-grid article:nth-child(3n) { border-right: 0; }
    */

    .final-cta { padding: 110px 20px 130px; }
}