/* ==========================================================================
   A-PROPOS.CSS
   GRENIKA PUBLIC WEBSITE

   Page : À propos de GRENIKA
   Version : 2.0
   Architecture : Mobile First

   ========================================================================== */
/* =========================================================
   PAGE À PROPOS — SHELL CANONIQUE
   Autorité unique de largeur
   ========================================================= */

.about-page{

    width:100%;
    margin:0;
    padding:0;

}


.about-page-shell{

    width:min(94vw, 1600px);

    margin-inline:auto;
    padding:0;

}


/* =========================================================
   SECTIONS — LARGEUR HÉRITÉE DU SHELL
   ========================================================= */

.about-page-shell > section{

    width:100%;
    max-width:none;

    padding-block:0;

    margin-inline:0;

}

/* =========================================================
   ABOUT PAGE — SECTION SEPARATION
   ========================================================= */

.about-page-shell > .section + .section{

    margin-top:
        var(--space-3);

}

/* Tous les grands conteneurs de section occupent aussi 100% */

.about-manifesto-stage,
.about-reason-container,
.about-reason-stage{

    width:100%;
    max-width:none;

    margin-inline:0;
}
/* =========================================================
   01 — ENVELOPPE
   ========================================================= */
.about-manifesto-hero{

    width:100%;
    margin:0;

    padding:
        32px
        0
        0;

    background:
        var(--surface-page);

}


/* =========================================================
   02 — STAGE

   L'image et toute l'interface appartiennent
   désormais au même cadre de composition.
   ========================================================= */


.about-manifesto-stage{

    width:100%;
    max-width:none;

    margin-inline:0;

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1fr);

    align-items:center;

    min-height:760px;

    padding:
        var(--space-8)
        var(--space-5)
        120px;

    overflow:hidden;

    background-image:
        url("/assets/images/grenier-africain.webp");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:
        62% center;

}


/* =========================================================
   03 — CONTENU
   ========================================================= */

.about-manifesto-content{

    position:relative;

    z-index:4;

    width:100%;

    max-width:580px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.about-manifesto-eyebrow{

    margin:0;

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        var(--letter-spacing-wider);

    text-transform:
        uppercase;

    color:
        var(--color-brand-tertiary);

}


/* =========================================================
   ACCENT
   ========================================================= */

.about-manifesto-accent{

    display:block;

    width:50px;

    height:2px;

    margin-top:
        var(--space-4);

    background:
        var(--color-brand-secondary);

}


/* =========================================================
   TITRE
   ========================================================= */

.about-manifesto-title{

    max-width:580px;

    margin:
        var(--space-6)
        0
        0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            10vw,
            4.4rem
        );

    font-weight:
        var(--font-weight-extrabold);

    line-height:
        1;

    letter-spacing:
        -.04em;

    color:
        var(--color-text-primary);

}


.about-manifesto-title-highlight{

    display:block;

    color:
        var(--color-brand-tertiary);

}


/* =========================================================
   DIVIDER
   ========================================================= */

.about-manifesto-divider{

    display:block;

    width:50px;

    height:3px;

    margin-top:
        var(--space-6);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-brand-secondary);

}


/* =========================================================
   PROMESSE
   ========================================================= */

.about-manifesto-promise{

    margin-top:
        var(--space-6);

}


.about-manifesto-promise p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


.about-manifesto-promise p + p{

    margin-top:
        var(--space-2);

}


.about-manifesto-promise strong{

    color:
        var(--color-brand-tertiary);

}


/* =========================================================
   TEXTE
   ========================================================= */

.about-manifesto-text{

    max-width:430px;

    margin:
        var(--space-6)
        0
        0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}
/* =========================================================
   TEXTE — HALO DE LISIBILITÉ
   ========================================================= */

.about-manifesto-text{

    position:relative;
    z-index:1;

}

.about-manifesto-text::before{

    content:"";

    position:absolute;

    z-index:-1;

    inset:
        -30px
        -50px
        -48px
        -50px;

    background:
        rgba(255, 255, 255, 0.42);

    filter:
        blur(38px);

    border-radius:
        48px;

    pointer-events:none;

}


/* =========================================================
   ORIGINE
   ========================================================= */

.about-manifesto-origin{

    position:relative;
    z-index:1;

    display:flex;

    align-items:center;

    gap:
        var(--space-3);

    max-width:430px;

    margin:
        var(--space-7)
        0
        0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-sm);

    line-height:
        var(--line-height-normal);

    color:
        var(--color-text-primary);

}


/* Halo clair de lisibilité */


.about-manifesto-origin::before{

    content:"";

    position:absolute;

    z-index:-1;

    inset:
    -22px
    -38px
    -14px
    -38px;

    background:
        rgba(255, 255, 255, 0.38);

    filter:
        blur(34px);

    border-radius:
        999px;

    pointer-events:none;

}


.about-manifesto-origin-icon{

    width:20px;

    flex-shrink:0;

    color:
        var(--color-brand-secondary);

}


.about-manifesto-origin strong{

    color:
        var(--color-brand-tertiary);

}
/* =========================================================
   04 — SCEAU
   ========================================================= */
/* =========================================================
   GRENKA — GRENier Vert Seal
   Positionnement canonique Desktop
   ========================================================= */

.grenier-vert-seal{
  position:absolute;

  /* Centrage horizontal dans sa zone */
  left:50%;

  /* Le sceau vient pratiquement toucher le bas du HERO */
  bottom:80px;

  transform:translateX(-50%);

  /* Dimension responsive du système orbital complet */
  width:clamp(360px, 27vw, 470px);
  aspect-ratio:1;

  z-index:5;
  isolation:isolate;
}

/* =========================================================
   02 — COURONNES ORBITALES

   Trois traits différents :
   ivoire / or / ivoire atténué.
   ========================================================= */

.grenier-vert-ring{

    position:absolute;

    top:50%;
    left:50%;

    aspect-ratio:1;

    border-radius:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

}


.grenier-vert-ring-outer{

    width:100%;

    border:
        1px solid
        rgba(255,248,224,.82);

}


.grenier-vert-ring-middle{

    width:91%;

    border:
        1px solid
        rgba(205,159,55,.92);

}


.grenier-vert-ring-inner{

    width:83%;

    border:
        1px solid
        rgba(255,248,224,.52);

}


/* =========================================================
   CŒUR DU SCEAU — CERCLE PARFAIT
   ========================================================= */

.grenier-vert-seal-core{

    position:absolute;

    z-index:2;

    top:50%;
    left:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:66%;
    height:66%;

    padding:0;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(239,218,157,.72);

    border-radius:50%;

    box-sizing:border-box;

    text-align:center;

    color:#F3DFA5;

    background:
        rgba(17,73,57,.94);

    box-shadow:
        0 18px 45px
        rgba(15,45,35,.14);

}




/* =========================================================
   05 — LABEL
   ========================================================= */

.grenier-vert-seal-label{

    margin:0 0 16px;

    font-size:
        clamp(
            .68rem,
            .72vw,
            .78rem
        );

    font-weight:700;

    line-height:1.2;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:
        rgba(255,248,224,.82);

}


/* =========================================================
   06 — TITRE CENTRAL
   ========================================================= */

.grenier-vert-seal-title{

    margin:0;

    font-size:
        clamp(
            2.15rem,
            2.7vw,
            3rem
        );

    font-weight:800;

    line-height:.91;

    letter-spacing:-.025em;

    color:#FFF8E0;

}



/* =========================================================
   07 — TRAIT D'OR
   ========================================================= */

.grenier-vert-seal-divider{

    display:block;

    width:42px;

    height:2px;

    margin-top:20px;

    border-radius:999px;

    background:#D3A436;

}


/* =========================================================
   09 — SATELLITES
   ========================================================= */

.grenier-vert-satellite{

    position:absolute;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:#E8D18D;

}


/* =========================================================
   10 — MÉDAILLONS

   Plus grands que dans la V2.0,
   mais visuellement beaucoup plus fins.
   ========================================================= */

.grenier-vert-medallion{

    display:grid;

    place-items:center;

    width:
        clamp(
            72px,
            5vw,
            84px
        );

    aspect-ratio:1;

    border:
        1.25px solid
        rgba(244,225,170,.95);

    border-radius:50%;

    color:#F0D993;

    background:
        rgba(20,68,54,.94);

    box-shadow:
        0 8px 24px
        rgba(20,45,35,.10);

}


/* pictogrammes */

.grenier-vert-medallion svg{

    width:52%;

    height:52%;

    overflow:visible;

    color:inherit;

}


/* =========================================================
   11 — LABELS SATELLITES
   ========================================================= */

.grenier-vert-satellite-label{

    font-size:
        clamp(
            .66rem,
            .72vw,
            .76rem
        );

    font-weight:700;

    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#D8C27F;

}


/* =========================================================
   12 — PRODUIRE

   Le label est au-dessus du médaillon.
   ========================================================= */

.satellite-produce{

    top:-13%;

    left:50%;

    transform:
        translateX(-50%);

}


/* =========================================================
   13 — NOURRIR
   ========================================================= */

.satellite-nourish{

    left:-14%;

    bottom:2%;

}


/* =========================================================
   14 — DURER
   ========================================================= */

.satellite-sustain{

    right:-14%;

    bottom:2%;

}


/* =========================================================
   15 — FINITION OPTIQUE

   Les satellites latéraux descendent légèrement.
   Cela crée le triangle doctrinal de la cible.
   ========================================================= */

.satellite-nourish,
.satellite-sustain{

    transform:
        translateY(4%);

}


/* =========================================================
   06 — COURBE INFÉRIEURE SVG
   ========================================================= */

.about-manifesto-bottom-mask{

    position:absolute;

    z-index:10;

    left:0;

    bottom:-1px;

    width:100%;

    height:
        clamp(
            56px,
            5vw,
            90px
        );

    pointer-events:none;

}


.about-manifesto-bottom-mask path{

    fill:
        var(--color-surface-primary);

}

/* =========================================================
   HERO MANIFESTE — MOBILE FIRST
   < 768 px
   ========================================================= */

@media (max-width:767px){

    .about-manifesto-stage{

        /*
         * Sur mobile :
         * le contenu éditorial occupe d'abord sa hauteur naturelle,
         * puis une vraie zone visuelle est réservée au sceau.
         */

        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        grid-template-rows:
            auto
            420px;

        min-height:0;

        padding:0;

        overflow:hidden;

        background-position:
            66% bottom;

    }


    .about-manifesto-content{

        position:relative;

        z-index:20;

        width:100%;

        max-width:none;

        padding:
            var(--space-8)
            var(--space-5)
            var(--space-7);

    }


    .about-manifesto-title{

        max-width:100%;

        font-size:
            clamp(
                2.75rem,
                12.5vw,
                3.7rem
            );

        line-height:.95;

    }


    /* =====================================================
       SCEAU MOBILE
       ===================================================== */

    .grenier-vert-seal{

        position:absolute;

        z-index:5;

        display:block;

        left:50%;

        /*
         * Le sceau descend dans la partie photographique
         * au lieu de recouvrir le titre.
         */

        bottom:
            64px;

        width:
            min(
                88vw,
                320px
            );

        aspect-ratio:1;

        transform:
            translateX(-50%);

        isolation:isolate;

    }


    /* =====================================================
       CŒUR
       ===================================================== */

    .grenier-vert-seal-core{

        width:66%;
        height:66%;

    }


    .grenier-vert-seal-label{

        margin-bottom:10px;

        font-size:.56rem;

    }


    .grenier-vert-seal-title{

        font-size:
            clamp(
                1.65rem,
                7.5vw,
                2rem
            );

    }


    .grenier-vert-seal-divider{

        width:34px;

        margin-top:14px;

    }


    /* =====================================================
       SATELLITES
       ===================================================== */

    .grenier-vert-medallion{

        width:
            clamp(
                56px,
                14vw,
                66px
            );

    }


    .grenier-vert-satellite{

        gap:6px;

    }


    .grenier-vert-satellite-label{

        font-size:.52rem;

        letter-spacing:.06em;

    }


    /*
     * On resserre légèrement les trois satellites
     * à l'intérieur de la largeur mobile.
     */

    .satellite-produce{

        top:-10%;

        left:50%;

        transform:
            translateX(-50%);

    }

    /* Satellites latéraux ramenés dans le système orbital */

    .satellite-nourish{

        left:-1%;

        bottom:4%;

    }


    .satellite-sustain{

        right:-1%;

        bottom:4%;

    }


    .satellite-nourish,
    .satellite-sustain{

        transform:
            translateY(4%);

    }


    /* =====================================================
       COURBE BASSE
       ===================================================== */

    .about-manifesto-bottom-mask{

        height:
            clamp(
                42px,
                12vw,
                56px
            );

    }

}
/* =========================================================
   02 — TABLETTE / INTERMÉDIAIRE
   768 → 979 px

   On conserve la logique verticale du mobile.
   Le passage aux deux colonnes reste réservé à ≥ 980 px.
   ========================================================= */

@media (min-width:768px) and (max-width:979px){

    .about-manifesto-stage{

        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        grid-template-rows:
            auto
            460px;

        min-height:0;

        padding:
            0;

        overflow:hidden;

        background-position:
            64% bottom;

    }


    .about-manifesto-content{

        position:relative;

        z-index:20;

        width:100%;

        max-width:
            620px;

        padding:
            var(--space-9)
            var(--space-7)
            var(--space-8);

    }


    .about-manifesto-title{

        max-width:
            600px;

        font-size:
            clamp(
                3rem,
                6.4vw,
                4rem
            );

    }


    .grenier-vert-seal{

        position:absolute;

        display:block;

        left:50%;

        bottom:
            70px;

        width:
            min(
                56vw,
                390px
            );

        aspect-ratio:1;

        transform:
            translateX(-50%);

        z-index:5;

        isolation:isolate;

    }


    .grenier-vert-medallion{

        width:
            clamp(
                58px,
                8vw,
                70px
            );

    }


    .satellite-nourish{

        left:-2%;

        bottom:3%;

    }


    .satellite-sustain{

        right:-2%;

        bottom:3%;

    }

}
/* =========================================================
   ≥ 980 px — DESKTOP CANONIQUE
   ========================================================= */

@media (min-width:980px){

    .about-manifesto-stage{

        grid-template-columns:
            minmax(0,40%)
            minmax(0,60%);

        min-height:
            clamp(
                760px,
                78vh,
                900px
            );

        padding:
            clamp(64px,6vh,88px)
            clamp(56px,5vw,86px)
            120px;

        background-position:
            center center;

    }

    .about-manifesto-content{

        max-width:570px;

        align-self:start;

        padding-top:20px;

    }


    .about-manifesto-title{

        max-width:
            570px;

        font-size:
            clamp(
                3.5rem,
                4.1vw,
                4.7rem
            );

    }


    .grenier-vert-seal{

        display:block;

        transform:
            translateX(8%);

    }

}

/* =========================================================
   ≥ 1200 px — DESKTOP LARGE
   ========================================================= */

@media (min-width:1200px){


    .about-manifesto-stage{

        width:100%;
        max-width:none;

    }

    .grenier-vert-seal{

        width:
            clamp(
                360px,
                23vw,
                420px
            );

    }

}

/* ==========================================================================
   GRENIKA — À PROPOS
   NOTRE RAISON D'ÊTRE
   ========================================================================== */


/* =========================================================
   ABOUT REASON — RACCORD AU HERO
   ========================================================= */

.about-reason{

    position:relative;

    width:100%;

    margin:
        -1px
        0
        0;

    padding:
        0
        0
        clamp(72px,8vw,120px);

}

/* =========================================================
   ABOUT REASON — CONTAINER
   ========================================================= */

.about-reason-container{

    position:relative;

    width:100%;
    max-width:none;

    margin:0;

    /*
     * Aucun padding sur le conteneur qui porte l'image.
     * L'image doit pouvoir atteindre les 2 bords du shell.
     */
    padding:0;

    background-image:
        url("/assets/images/tour-hydroponique-grenika.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;

    border:
        var(--border-light);

    border-radius:0;

    box-shadow:
        var(--shadow);

}
/* =========================================================
   ABOUT — REASON
   INTÉGRATION AU SHELL
   ========================================================= */

.about-reason > .container{

    width:100%;
    max-width:none;

    margin:0;

    padding-inline:0;

}

/* =========================================================
   ABOUT REASON — CONTENT
   ========================================================= */

.about-reason-content{

    position:relative;

    z-index:2;

    width:100%;

    padding:
        clamp(40px,5vw,76px);

}



.about-reason-stage{

    width:100%;
    max-width:none;

    margin:0;

    overflow:hidden;

    border-radius:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

/* =========================================================
   VOILE ÉDITORIAL
   ========================================================= */

.about-reason-stage::before{

    content:"";

    position:absolute;

    z-index:1;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,

            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.94) 24%,
            rgba(255,255,255,.88) 38%,
            rgba(255,255,255,.62) 49%,
            rgba(255,255,255,.22) 58%,
            rgba(255,255,255,0) 68%
        );

}


.about-reason-stage > *{

    position:relative;

    z-index:2;

}

/* =========================================================
   HEADER
   ========================================================= */

.about-reason-header{

    position:relative;

    z-index:3;

    width:
        min(760px,90%);

    margin-inline:auto;

    text-align:center;

    text-shadow:
        0 1px 12px
        rgba(255,255,255,.85);

}


.about-reason-title{

    margin:0;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.2rem,
            3.6vw,
            4rem
        );

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-tight);

    color:
        var(--color-brand-primary);

}


.about-reason-title span{

    color:
        var(--color-brand-primary);

}


.about-reason-divider{

    display:block;

    width:72px;

    height:3px;

    margin:
        var(--space-5)
        auto
        0;

    border-radius:999px;

    background:
        var(--color-brand-secondary);

}


/* =========================================================
   LAYOUT
   ========================================================= */


.about-reason-layout{

    display:block;

    margin-top:
        clamp(48px,5vw,72px);

}

.about-reason-message{

    width:
        min(48%,580px);

}

/* =========================================================
   OBSERVATIONS
   ========================================================= */

.about-reason-observations{

    display:grid;

    gap:
        clamp(24px, 2.5vw, 34px);

}


.about-reason-observation{

    display:grid;

    grid-template-columns:
        58px
        minmax(0,1fr);

    align-items:center;

    gap:
        var(--space-5);

}


.about-reason-observation-icon{

    display:grid;

    place-items:center;

    width:58px;

    aspect-ratio:1;

    border:
        1px solid
        rgba(150,170,130,.25);

    border-radius:50%;

    color:
        var(--color-brand-primary);

    background:
        rgba(245,247,239,.82);

}


.about-reason-observation-icon svg{

    width:30px;
    height:30px;

}


.about-reason-observation p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        clamp(
            1rem,
            1.1vw,
            1.12rem
        );

    line-height:1.65;

    color:
        var(--color-text-primary);

}

.about-reason-observation strong{

    color:
        var(--color-brand-tertiary);

}


/* =========================================================
   RESPONSE
   ========================================================= */

.about-reason-response{

    position:relative;

    width:100%;

    padding:
        clamp(32px, 3vw, 44px);

    background:
        linear-gradient(
            135deg,
            rgba(248,248,240,.98),
            rgba(240,242,231,.94)
        );

    border:
        1px solid
        rgba(185,190,165,.35);

    border-left:
        4px solid
        var(--color-brand-secondary);

    border-radius:
        22px;

    box-shadow:
        0 18px 44px
        rgba(20,50,38,.08);

}



.about-reason-response-icon{

    position:absolute;

    top:-34px;
    left:50%;

    display:grid;

    place-items:center;

    width:68px;

    aspect-ratio:1;

    transform:
        translateX(-50%);

    border-radius:50%;

    color:
        var(--color-brand-secondary);

    background:
        var(--color-surface-primary);

    border:
        var(--border-light);

}


.about-reason-response-icon svg{

    width:36px;
    height:36px;

}


.about-reason-response-label{

    margin:
        var(--space-5)
        0
        var(--space-5);

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    letter-spacing:.12em;

    text-transform:uppercase;

    color:
        var(--color-brand-primary);

}

.about-reason-response-text{

    max-width:560px;

    margin:0;

    font-family:
        var(--font-heading);

    font-size:
        clamp(1.4rem, 1.8vw, 1.85rem);

    font-weight:
        var(--font-weight-semibold);

    line-height:1.38;

    color:
        var(--color-text-primary);

}


.about-reason-response-text strong{

    display:inline;

    color:
        var(--color-brand-primary);

}


.about-reason-response-divider{

    display:block;

    width:62px;

    height:3px;

    margin:
        var(--space-6)
        0;

    border-radius:999px;

    background:
        var(--color-brand-secondary);

}


.about-reason-response-signature{

    display:flex;

    align-items:center;

    gap:
        var(--space-4);

}


.about-reason-response-signature-icon{

    display:grid;

    place-items:center;

    width:56px;

    aspect-ratio:1;

    flex-shrink:0;

    border-radius:50%;

    color:
        var(--color-brand-secondary);

    background:
        var(--color-brand-tertiary);

}


.about-reason-response-signature-icon svg{

    width:30px;
    height:30px;

}


.about-reason-response-signature strong{

    font-family:
        var(--font-reading);

    line-height:1.4;

    color:
        var(--color-text-primary);

}


/* =========================================================
   VISUEL
   ========================================================= */

.about-reason-visual{

    position:relative;

    min-height:
        clamp(560px, 48vw, 720px);

    margin:0;

    overflow:hidden;

    border-radius:
        32px;

    background:
        var(--color-surface-secondary);

    box-shadow:
        0 24px 60px
        rgba(20,48,39,.12);

}

.about-reason-visual::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(15,55,43,.18) 100%
        );

}


.about-reason-visual img{

    display:block;

    width:100%;
    height:100%;

    min-height:
        clamp(560px, 48vw, 720px);

    object-fit:cover;

    object-position:center;

}

/* =========================================================
   DÉFINITION
   ========================================================= */

.about-reason-definition{

    display:grid;

    grid-template-columns:
        70px
        minmax(0,1fr);

    align-items:center;

    gap:
        var(--space-5);

    margin-top:
        clamp(42px,5vw,72px);

    padding:
        clamp(26px,3vw,38px)
        0;

    border-top:
        var(--border-light);

}


.about-reason-definition-icon{

    display:grid;

    place-items:center;

    width:64px;

    aspect-ratio:1;

    color:
        var(--color-brand-secondary);

}


.about-reason-definition-icon svg{

    width:48px;
    height:48px;

}


.about-reason-definition p{

    max-width:
        980px;

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.2rem
        );

    line-height:1.65;

    color:
        var(--color-text-primary);

}


.about-reason-definition strong{

    color:
        var(--color-brand-tertiary);

}


/* =========================================================
   BENEFICES
   ========================================================= */

.about-reason-benefits{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        var(--space-5);

    margin:
        var(--space-6)
        0
        0;

    padding:0;

    list-style:none;

}


.about-reason-benefits li{

    display:grid;

    justify-items:center;

    gap:8px;

    padding:
        var(--space-5);

    text-align:center;

    border-left:
        var(--border-light);

}


.about-reason-benefits li:first-child{

    border-left:0;

}


.about-reason-benefit-icon{

    display:grid;

    place-items:center;

    width:48px;
    height:48px;

    margin-bottom:4px;

    color:
        var(--color-brand-primary);

}


.about-reason-benefit-icon i{

    font-size:
        var(--font-size-xl);

}


.about-reason-benefits strong{

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-sm);

    text-transform:uppercase;

    letter-spacing:.06em;

    color:
        var(--color-brand-primary);

}


.about-reason-benefits li > span:last-child{

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-sm);

    line-height:1.45;

    color:
        var(--color-text-primary);

}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width:1100px){

    .about-reason-layout{

        grid-template-columns:
            minmax(0,1fr)
            minmax(320px,.9fr);

    }


    .about-reason-visual{

        grid-column:
            1 / -1;

        min-height:520px;

    }


    .about-reason-visual img{

        min-height:520px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .about-reason{

        padding:
            var(--space-8)
            0;

    }


    .about-reason-container{

        padding:
            var(--space-7)
            var(--space-5);

        border-radius:
            var(--radius-xl);

    }



    .about-reason-header{

        margin-bottom:
            var(--space-8);

    }


    .about-reason-title{

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );

    }


    .about-reason-layout{

        grid-template-columns:
            minmax(0,1fr);

        gap:
            var(--space-8);

    }


    .about-reason-observation{

        grid-template-columns:
            46px
            minmax(0,1fr);

    }


    .about-reason-observation-icon{

        width:46px;

    }


    .about-reason-observation-icon svg{

        width:24px;
        height:24px;

    }


    .about-reason-response{

        margin-top:
            var(--space-5);

        padding:
            var(--space-7)
            var(--space-5)
            var(--space-6);

    }


    .about-reason-visual{

        min-height:460px;

    }


    .about-reason-visual img{

        min-height:460px;

    }


    .about-reason-definition{

        grid-template-columns:
            minmax(0,1fr);

        text-align:center;

    }


    .about-reason-definition-icon{

        margin-inline:auto;

    }


    .about-reason-benefits{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .about-reason-benefits li{

        border-left:0;

        border-top:
            var(--border-light);

    }

}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width:390px){

    .about-reason-benefits{

        grid-template-columns:
            minmax(0,1fr);

    }


    .about-reason-visual,
    .about-reason-visual img{

        min-height:400px;

    }

}


/* ==========================================================================
   02 — EDITORIAL CONTENT
   ========================================================================== */

.about-editorial{

    display:grid;

    gap:
        var(--space-5);

    max-width:
        760px;

    margin-inline:
        auto;

}


.about-editorial p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


.about-editorial-highlight{

    padding:
        var(--space-5);

    border-left:
        var(--border-brand-secondary);

    background:
        var(--color-surface-secondary);

    border-radius:
        0
        var(--radius-lg)
        var(--radius-lg)
        0;

}

/* =========================================================
   ABOUT — CONCEPT
   Autorité de largeur : .about-page-shell
   ========================================================= */

.about-concept{

    width:100%;
    max-width:none;

    margin:0;

}


/* =========================================================
   CONTENEUR INTERNE

   Le .container conserve uniquement son rôle éditorial.
   Il ne doit pas recréer une largeur de page.
   ========================================================= */

.about-concept > .container{

    width:100%;
    max-width:none;

    margin-inline:0;

}


/* =========================================================
   PANEL
   ========================================================= */

.about-concept .section-panel{

    width:100%;
    max-width:none;

    margin-inline:0;

}

/* ==========================================================================
   03 — GRENIKA PRINCIPLES
   ========================================================================== */

.about-principles{

    display:grid;

    grid-template-columns:
        minmax(0,1fr);

    gap:
        var(--space-5);

}


/* --------------------------------------------------------------------------
   Principle
   -------------------------------------------------------------------------- */

.about-principle{

    display:grid;

    align-content:start;

    gap:
        var(--space-4);

    min-width:0;

    padding:
        var(--space-6);

    background:
        var(--color-surface-primary);

    border:
        var(--border-light);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow);

}


.about-principle-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:
        var(--space-12);

    height:
        var(--space-12);

    border-radius:
        var(--radius-round);

    background:
        var(--color-surface-secondary);

    color:
        var(--color-brand-primary);

}


.about-principle-icon i{

    font-size:
        var(--font-size-xl);

}


.about-principle h3{

    margin:0;

    font-family:
        var(--font-heading);

    font-size:
        var(--font-size-heading-tertiary);

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-tight);

    color:
        var(--color-brand-tertiary);

}


.about-principle p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


/* ==========================================================================
   04 — ABOUT STATEMENT
   ========================================================================== */

.about-statement{

    max-width:
        820px;

    margin:
        var(--space-8)
        auto
        0;

    padding:
        var(--space-6);

    text-align:center;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

    background:
        var(--color-surface-secondary);

    border-radius:
        var(--radius-xl);

}


.about-statement strong{

    display:block;

    margin-top:
        var(--space-2);

    font-family:
        var(--font-heading);

    font-weight:
        var(--font-weight-bold);

    color:
        var(--color-brand-tertiary);

}


/* ==========================================================================
   05 — ECOSYSTEM FLOW
   ========================================================================== */

.about-ecosystem-flow{

    display:grid;

    grid-template-columns:
        minmax(0,1fr);

    gap:
        var(--space-4);

    margin:0;

    padding:0;

    list-style:none;

    counter-reset:
        none;

}


/* --------------------------------------------------------------------------
   Ecosystem Step
   -------------------------------------------------------------------------- */

.about-ecosystem-step{

    position:relative;

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items:center;

    gap:
        var(--space-4);

    min-width:0;

    padding:
        var(--space-5);

    background:
        var(--color-surface-primary);

    border:
        var(--border-light);

    border-radius:
        var(--radius-lg);

}


/* --------------------------------------------------------------------------
   Step Number
   -------------------------------------------------------------------------- */

.about-ecosystem-number{

    display:flex;

    justify-content:center;

    align-items:center;

    width:
        var(--space-12);

    height:
        var(--space-12);

    flex-shrink:0;

    border-radius:
        var(--radius-round);

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-bold);

    color:
        var(--color-surface-primary);

    background:
        var(--color-brand-primary);

}


.about-ecosystem-step strong{

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-semibold);

    line-height:
        var(--line-height-tight);

    color:
        var(--color-brand-tertiary);

}


/* ==========================================================================
   06 — TECHNOLOGY
   ========================================================================== */

.about-technology-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1fr);

    gap:
        var(--space-6);

    align-items:center;

}


/* --------------------------------------------------------------------------
   Technology Content
   -------------------------------------------------------------------------- */

.about-technology-content{

    display:grid;

    gap:
        var(--space-5);

}


.about-technology-content p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


/* --------------------------------------------------------------------------
   Technology Symbol
   -------------------------------------------------------------------------- */

.about-technology-symbol{

    display:flex;

    justify-content:center;

    align-items:center;

    width:
        min(48vw,180px);

    aspect-ratio:
        1;

    margin-inline:
        auto;

    border-radius:
        var(--radius-round);

    color:
        var(--color-brand-secondary);

    background:
        var(--color-brand-tertiary);

    box-shadow:
        var(--shadow);

}


.about-technology-symbol i{

    font-size:
        clamp(
            var(--font-size-3xl),
            12vw,
            var(--font-size-5xl)
        );

}


/* ==========================================================================
   07 — PILOT PROGRAM
   ========================================================================== */

.about-pilot-content{

    display:grid;

    gap:
        var(--space-5);

    max-width:
        800px;

    margin-inline:
        auto;

}


.about-pilot-content p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


/*
   Les boutons restent gérés par le Design System.
   Ici nous organisons seulement leur disposition.
*/

.about-pilot .section-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:
        var(--space-4);

    margin-top:
        var(--space-8);

}


/* ==========================================================================
   08 — MANIFESTO / AMBITION
   ========================================================================== */

.about-manifesto{

    display:grid;

    gap:
        var(--space-6);

    max-width:
        820px;

    margin-inline:
        auto;

    text-align:center;

}


.about-manifesto > p{

    margin:0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--color-text-primary);

}


/* --------------------------------------------------------------------------
   Manifesto Rhythm
   -------------------------------------------------------------------------- */

.about-manifesto-rhythm{

    display:grid;

    gap:
        var(--space-3);

    padding-block:
        var(--space-6);

}


.about-manifesto-rhythm p{

    margin:0;

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            var(--font-size-xl),
            6vw,
            var(--font-size-3xl)
        );

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-tight);

    color:
        var(--color-brand-tertiary);

}


/* --------------------------------------------------------------------------
   Manifesto Final
   -------------------------------------------------------------------------- */

.about-manifesto .about-manifesto-final{

    padding:
        var(--space-6);

    font-family:
        var(--font-heading);

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-normal);

    color:
        var(--color-surface-primary);

    background:
        var(--color-brand-tertiary);

    border-radius:
        var(--radius-xl);

}


/* ==========================================================================
   09 — FINAL CTA
   ========================================================================== */

.about-final-cta .final-cta-card{

    text-align:center;

}


/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.about-final-cta .section-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:
        var(--space-4);

    margin-top:
        var(--space-8);

}


/* --------------------------------------------------------------------------
   Final Note
   -------------------------------------------------------------------------- */

.about-final-cta .final-cta-note{

    max-width:
        680px;

    margin:
        var(--space-8)
        auto
        0;

    font-family:
        var(--font-reading);

    font-size:
        var(--font-size-body-large);

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    text-align:center;

    color:
        var(--color-text-primary);

}


.about-final-cta .final-cta-note strong{

    display:block;

    margin-top:
        var(--space-2);

    font-family:
        var(--font-heading);

    font-size:
        var(--font-size-xl);

    font-weight:
        var(--font-weight-bold);

    color:
        var(--color-brand-tertiary);

}


/* ==========================================================================
   MOBILE FIRST — 320 px
   ========================================================================== */

/*
   Les styles précédents constituent
   la version canonique 320 px.
*/


/* ==========================================================================
   ≥ 360 px
   ========================================================================== */

@media (min-width:360px){

    /* Aucun ajustement structurel */

}


/* ==========================================================================
   ≥ 390 px
   ========================================================================== */

@media (min-width:390px){

    .about-principle{

        padding:
            var(--space-7);

    }

}


/* ==========================================================================
   ≥ 480 px
   ========================================================================== */

@media (min-width:480px){

    .about-editorial-highlight,
    .about-statement,
    .about-manifesto .about-manifesto-final{

        padding:
            var(--space-7);

    }


    .about-ecosystem-step{

        padding:
            var(--space-6);

    }

}


/* ==========================================================================
   ≥ 768 px
   ========================================================================== */

@media (min-width:768px){


    /* ----------------------------------------------------------------------
       Principles
       ---------------------------------------------------------------------- */

    .about-principles{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            var(--space-6);

    }


    /* ----------------------------------------------------------------------
       Ecosystem
       ---------------------------------------------------------------------- */

    .about-ecosystem-flow{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            var(--space-5);

    }


    /* ----------------------------------------------------------------------
       Technology
       ---------------------------------------------------------------------- */

    .about-technology-grid{

        grid-template-columns:
            minmax(0,1.4fr)
            minmax(180px,.6fr);

        gap:
            var(--space-8);

    }


    .about-technology-symbol{

        width:
            min(22vw,200px);

    }


    /* ----------------------------------------------------------------------
       Actions
       ---------------------------------------------------------------------- */

    .about-pilot .section-actions,
    .about-final-cta .section-actions{

        flex-direction:row;

        justify-content:center;

        flex-wrap:wrap;

    }

}


/* ==========================================================================
   ≥ 980 px
   ========================================================================== */

@media (min-width:980px){


    /* ----------------------------------------------------------------------
       Principles
       ---------------------------------------------------------------------- */

    .about-principles{

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

    }


    /* ----------------------------------------------------------------------
       Ecosystem
       ---------------------------------------------------------------------- */

    .about-ecosystem-flow{

        grid-template-columns:
            repeat(
                7,
                minmax(0,1fr)
            );

        gap:
            var(--space-3);

    }


    .about-ecosystem-step{

        grid-template-columns:
            minmax(0,1fr);

        justify-items:center;

        align-content:start;

        gap:
            var(--space-4);

        padding:
            var(--space-5)
            var(--space-3);

        text-align:center;

    }


    .about-ecosystem-step strong{

        font-size:
            var(--font-size-body);

    }


    /* ----------------------------------------------------------------------
       Technology
       ---------------------------------------------------------------------- */

    .about-technology-grid{

        gap:
            var(--space-10);

    }


    /* ----------------------------------------------------------------------
       Manifesto
       ---------------------------------------------------------------------- */

    .about-manifesto-rhythm{

        padding-block:
            var(--space-8);

    }

}


/* ==========================================================================
   ≥ 1200 px
   ========================================================================== */

@media (min-width:1200px){

    .about-editorial{

        max-width:
            800px;

    }


    .about-statement{

        max-width:
            880px;

    }


    .about-pilot-content,
    .about-manifesto{

        max-width:
            860px;

    }


    .about-technology-grid{

        max-width:
            980px;

        margin-inline:
            auto;

    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

    /*
       Aucun mouvement spécifique à la page À propos.

       Les animations globales .reveal
       restent sous la responsabilité
       du système d'animation canonique.
    */

}