@font-face{
    font-family:Jost;
    src:url('/IN/fonts/Jost/regular.ttf') format('truetype');
    font-display:swap;
    font-weight:400
}

@font-face{
    font-family:Jost;
    src:url('/IN/fonts/Jost/700.ttf') format('truetype');
    font-display:swap;
    font-weight:700
}

:root{
    --ink:#073e50;
    --sea:#087f8c;
    --paper:#fbfaf5;
    --line:#b9d4d1;
    --muted:#58737b;
    --shadow:0 20px 60px rgba(4,53,68,.14)
}

*{
    box-sizing:border-box
}

html{
    min-height:100%;
    scroll-behavior:smooth
}

body{
    min-height:100%;
    margin:0;
    color:var(--ink);

    background:linear-gradient(
        to bottom,
        #f1efe5 0%,
        #e7efed 15%,
        #bdd6d5 31%,
        #72a8ad 47%,
        #317d8b 63%,
        #0c5970 79%,
        #043b53 100%
    ) fixed;

    background-size:cover;

    font-family:Jost,Arial,sans-serif;
    line-height:1.6
}

img{
    display:block;
    max-width:100%;
    height:auto
}

button,
input,
textarea{
    font-family:inherit
}


/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.about{
    width:min(94vw,1500px);
    margin:auto
}

.about h1,
.about h2{
    font-family:Georgia,serif;
    font-weight:500;
    line-height:1.06
}

.about h1{
    margin:.15em 0 .35em;
    font-size:clamp(2.7rem,5.5vw,5.6rem)
}

.about h2{
    margin:.12em 0 .55em;
    font-size:clamp(2rem,3.5vw,3.8rem)
}

.about p{
    font-size:clamp(1rem,1.15vw,1.2rem)
}

.eyebrow{
    display:block;
    color:var(--sea);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase
}

.lead{
    color:#527179;
    font-size:clamp(1.2rem,1.6vw,1.55rem)!important
}

.manifesto{
    color:var(--sea);
    font:italic clamp(1.2rem,1.65vw,1.55rem)/1.45 Georgia,serif!important
}


/* =========================================================
   HERO — MÊME CONSTRUCTION QUE QUI SOMMES-NOUS
   ========================================================= */

.about-hero{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:clamp(35px,7vw,100px);
    align-items:center;

    padding:clamp(45px,7vw,105px);

    border:1px solid rgba(255,255,255,.7);
    border-radius:30px;

    background:rgba(255,255,255,.86);
    box-shadow:var(--shadow)
}

.about-hero figure{
    margin:0;
    padding:22px;

    border-radius:24px;
    background:#fff
}

.about-hero img{
    display:block;
    width:100%;
    height:auto
}


/* =========================================================
   SECTIONS
   ========================================================= */

.about-section{
    padding:clamp(70px,9vw,130px) clamp(10px,3vw,45px)
}

.split{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(40px,7vw,110px);
    align-items:center
}

.panel{
    padding:clamp(45px,7vw,90px);

    border-radius:30px;

    background:rgba(251,250,245,.9);
    box-shadow:var(--shadow)
}

.section-heading{
    max-width:900px;
    margin-bottom:35px
}


/* =========================================================
   CHEMINEMENT
   ========================================================= */

.pathway{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;

    padding:32px;

    border-radius:25px;

    background:linear-gradient(135deg,#063e52,#087d89);
    color:#fff;

    box-shadow:var(--shadow)
}

.pathway b{
    padding:9px 13px;

    border:1px solid rgba(255,255,255,.4);
    border-radius:999px
}


/* =========================================================
   CARTES
   ========================================================= */

.experience-grid,
.cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:32px
}

.experience-grid article,
.cards article{
    padding:26px;

    border:1px solid var(--line);
    border-radius:20px;

    background:rgba(255,255,255,.78);

    box-shadow:0 10px 30px rgba(5,62,77,.08)
}

.experience-grid h3,
.cards h3{
    margin-top:0;
    color:var(--ink);
    font-size:1.2rem
}

.cards{
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.four-cards{
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.card-number{
    display:block;
    margin-bottom:8px;

    color:var(--sea);

    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em
}

.cards a{
    display:inline-flex;
    margin-top:10px;

    padding:11px 17px;

    border-radius:10px;

    background:var(--ink);
    color:#fff;

    font-weight:700;
    text-decoration:none
}


/* =========================================================
   NIVEAUX / CHIPS
   ========================================================= */

.levels{
    display:flex;
    gap:9px;
    flex-wrap:wrap;

    margin:24px 0
}

.levels span{
    padding:8px 14px;

    border:1px solid var(--line);
    border-radius:999px;

    background:rgba(255,255,255,.82);

    font-weight:700
}


/* =========================================================
   BOUTONS dis-MOI
   ========================================================= */

.dismoi-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    margin-top:12px;
    padding:11px 19px;

    border:0;
    border-radius:10px;

    background:var(--ink);
    color:#fff;

    font-size:1rem;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease
}

.dismoi-button:hover{
    background:var(--sea);
    transform:translateY(-2px)
}

.dismoi-button:focus-visible,
.question-cloud a:focus-visible,
.question-example:focus-visible,
.vertical-pathway a:focus-visible{
    outline:3px solid #f1a34a;
    outline-offset:3px
}


/* =========================================================
   QUESTIONS
   ========================================================= */

.question-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:12px
}

.question-cloud a,
.question-example{
    padding:13px 17px;

    border:1px solid var(--line);
    border-radius:999px;

    background:rgba(255,255,255,.82);
    color:var(--ink);

    font-size:1rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 8px 22px rgba(5,62,77,.06);

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease
}

.question-cloud a:hover,
.question-example:hover{
    background:var(--sea);
    color:#fff;
    transform:translateY(-2px)
}

.question-example{
    display:block;
    width:100%;

    margin:20px 0;

    border-radius:14px;

    text-align:left
}


/* =========================================================
   IMAGE BASE DE CONNAISSANCES
   ========================================================= */

.knowledge-visual{
    margin:0;
    padding:18px;

    border-radius:24px;

    background:#fff;

    box-shadow:var(--shadow)
}

.knowledge-visual img{
    width:100%;
    border-radius:12px
}

.dismoi-zoom-trigger{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:zoom-in
}

.dismoi-zoom-trigger:focus-visible{
    outline:3px solid var(--sea);
    outline-offset:5px;
    border-radius:12px
}

.dismoi-image-open{
    overflow:hidden
}

.dismoi-image-dialog{
    position:fixed;
    width:min(96vw,1536px);
    max-width:96vw;
    max-height:94vh;
    max-height:94dvh;
    padding:clamp(8px,1.5vw,20px);
    border:0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 20px 80px rgba(0,25,35,.35);
    overflow:auto
}

.dismoi-image-dialog::backdrop{
    background:rgba(2,31,42,.78)
}

.dismoi-image-dialog img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:calc(94vh - 40px);
    max-height:calc(94dvh - 40px);
    margin:auto;
    object-fit:contain
}

.dismoi-image-dialog__close{
    position:sticky;
    z-index:1;
    top:0;
    float:right;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin:0 0 -48px 0;
    border:1px solid #b9d4d1;
    border-radius:50%;
    background:#fff;
    color:var(--ink);
    font-size:2rem;
    line-height:1;
    cursor:pointer
}

.dismoi-image-dialog__close:focus-visible{
    outline:3px solid var(--sea);
    outline-offset:3px
}


/* =========================================================
   CHEMIN VERTICAL
   ========================================================= */

.vertical-pathway{
    flex-direction:column
}

.vertical-pathway button,
.vertical-pathway>a{
    max-width:440px;

    padding:13px 18px;

    border:1px solid rgba(255,255,255,.45);
    border-radius:14px;

    background:rgba(255,255,255,.12);
    color:#fff;

    font-size:1rem;
    font-weight:700;

    cursor:pointer
}

.vertical-pathway button:hover,
.vertical-pathway>a:hover{
    background:#fff;
    color:var(--ink)
}


/* =========================================================
   ÉCOSYSTÈME
   ========================================================= */

.ecosystem{
    text-align:center
}

.ecosystem > p{
    max-width:900px;
    margin-inline:auto
}

.ecosystem-pathway{
    margin-top:35px
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-cards article p{
    color:var(--muted)
}


/* =========================================================
   CTA FINAL — MÊME STYLE QUE QUI SOMMES-NOUS
   ========================================================= */

.about-cta{
    margin:0 0 70px;

    padding:clamp(45px,7vw,80px);

    border-radius:30px;

    background:rgba(255,255,255,.9);

    box-shadow:var(--shadow);

    text-align:center
}

.about-cta h2{
    max-width:900px;
    margin-inline:auto
}

.about-cta > p{
    max-width:750px;
    margin-left:auto;
    margin-right:auto
}

.about-cta .dismoi-button{
    margin-top:18px
}

.dismoi-final-icon{
    width:120px;
    height:120px;

    margin:0 auto 20px;

    object-fit:contain
}

.small-manifesto{
    font-size:1.08rem!important
}


/* =========================================================
   DESKTOP : HERO IDENTIQUE AU RÉÉQUILIBRAGE
   DE QUI SOMMES-NOUS
   ========================================================= */

@media(min-width:901px){

    .about-hero{
        grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);

        column-gap:clamp(45px,6vw,90px);
        row-gap:clamp(18px,2.2vw,32px);

        align-items:start
    }

    .about-hero__copy{
        display:contents
    }

    .about-hero .eyebrow{
        grid-column:1/-1
    }

    .about-hero h1{
        grid-column:1/-1;

        max-width:1250px;

        margin:.05em 0 .2em;

        font-size:clamp(3.4rem,5.25vw,5.5rem)
    }

    .about-hero figure{
        position:static;

        grid-column:1;
        grid-row:3/8;

        margin:4px 0 0;
        padding:18px;

        align-self:start;

        box-shadow:0 18px 45px rgba(4,53,68,.12)
    }

    .about-hero .lead,
    .about-hero__copy > p,
    .about-hero__copy > .dismoi-button{
        grid-column:2;

        margin-top:0
    }

    .about-hero .dismoi-button{
        justify-self:start
    }

}

/* Les illustrations contiennent des détails à lire : leur réserver une
   vraie place sur grand écran, sans réduire la colonne texte sur tablette. */
@media(min-width:1100px){
    .about-hero{
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
        column-gap:clamp(36px,4vw,65px);
        padding:clamp(44px,4vw,70px)
    }

    .knowledge.split{
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
        gap:clamp(40px,5vw,75px)
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

    .four-cards{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:900px){

    .about-hero,
    .split{
        grid-template-columns:1fr
    }

    .about-hero figure{
        max-width:580px;
        margin:auto
    }

    .experience-grid,
    .search-grid{
        grid-template-columns:1fr
    }

}

@media(max-width:620px){

    .about{
        width:min(92vw,1500px)
    }

    .about-hero,
    .panel,
    .about-cta{
        padding:30px 22px;
        border-radius:20px
    }

    .about-section{
        padding:65px 8px
    }

    .pathway{
        padding:24px 16px
    }

    .cards,
    .four-cards{
        grid-template-columns:1fr
    }

    .question-cloud{
        display:grid;
        grid-template-columns:1fr
    }

    .question-cloud a{
        width:100%;
        border-radius:14px;
        text-align:left
    }

    .dismoi-button{
        width:100%
    }

}

/* Questions et définitions visibles dans la page pour la lecture et le référencement. */
.question-cloud a,
.question-example,
.vertical-pathway > a{
    display:inline-block;
    text-decoration:none
}

.definition-link{
    color:inherit;
    font:inherit;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:.18em;
    cursor:pointer
}

.definition-link:hover,
.definition-link:focus-visible{
    color:var(--sea)
}

.sample-answers h2,
.vocabulary h2{
    max-width:18ch;
    font-size:clamp(2rem,3vw,3.25rem)
}

.sample-answers > p,
.vocabulary > p{
    max-width:72ch;
    color:var(--muted)
}

.sample-answers-grid,
.vocabulary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin:30px 0 0
}

.sample-answers-grid article,
.vocabulary-grid > div{
    min-width:0;
    padding:clamp(20px,2vw,30px);
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(5,62,77,.06);
    scroll-margin-top:24px
}

.sample-answers-grid h3{
    margin:0 0 14px;
    font:600 clamp(1.18rem,1.35vw,1.42rem)/1.3 Georgia,serif
}

.sample-answers-grid h3 a,
.vocabulary-grid dt a{
    color:#086879;
    text-decoration:underline;
    text-decoration-color:#8abfbd;
    text-underline-offset:.2em
}

.sample-answers-grid h3 a:hover,
.vocabulary-grid dt a:hover{
    color:var(--ink);
    text-decoration-color:currentColor
}

.about .sample-answers-grid article p,
.about .vocabulary-grid dd{
    margin:0;
    font-size:1rem;
    line-height:1.65
}

.vocabulary-grid dt{
    margin:0 0 10px;
    font-size:1.2rem;
    font-weight:700
}

@media(max-width:760px){
    .sample-answers-grid,
    .vocabulary-grid{
        grid-template-columns:1fr;
        gap:14px
    }
}