:root{
    --navy:#212C56; --navy-d:#161E3A; --navy-l:#2C3A6B;
    --clay:#9C5B45; --clay-lt:#C98E78;
    /* SOMBRE EN PERMANENCE, et c'est un choix. La photo du heros, la lueur
       du globe et la terre cuite sont calibrees sur du bleu nuit, et le logo
       employe est la version BLANCHE. Un site de marque se presente pareil a
       tout le monde : il ne suit pas le reglage du systeme du visiteur.
       Ces valeurs vivaient auparavant dans un bloc de theme sombre
       conditionnel ; les sections sans classe de fond apparaissaient donc EN
       BLANC sur un telephone regle en mode clair. */
    --sand:#1C1711; --paper:#0B0F17; --surface:#141A26;
    --ink:#ECEFF4; --muted:#9BA5B8; --line:#242D3D; --onnavy:#C3CBDD;
    --serif: Georgia,'Iowan Old Style','Palatino Linotype',serif;
    --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --ar: 'Segoe UI','Arabic Typesetting','Traditional Arabic','Geeza Pro',serif;
    --mono: ui-monospace,'Cascadia Code',Consolas,monospace;
    --rail: 4.5rem;
    /* gouttiere unique de la section About : le bloc photo/paragraphe ET
       la ligne de tuiles la partagent, sinon l'un des deux decroche. */
    --gut: 2.4rem;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);
       line-height:1.6;font-size:16px;margin:0;overflow-x:hidden;}
  img{max-width:100%;height:auto;display:block;}
  a:focus-visible{outline:2px solid var(--clay-lt);outline-offset:4px;}


  /* ═══════════ LE RAIL : fil conducteur de toute la page ═══════════ */
  .spine{position:fixed;left:2.1rem;top:0;bottom:0;width:1px;z-index:40;
         background:rgba(156,91,69,.22);pointer-events:none;}
  .spine .fill{position:absolute;left:0;top:0;width:1px;height:0;
               background:var(--clay);transition:height .12s linear;}
  .spine .cursor{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;
                 background:var(--clay);transform:translateY(-50%);
                 box-shadow:0 0 0 4px var(--paper);transition:top .12s linear;}
  @media(max-width:60rem){.spine{display:none;} :root{--rail:0rem;}}

  .in{max-width:68rem;width:100%;margin:0 auto;
      padding:0 1.5rem 0 calc(1.5rem + var(--rail));}
  @media(max-width:60rem){.in{padding:0 1.5rem;}}

  /* ═══════════ chaque section occupe l'ecran ═══════════ */
  .sc{min-height:100vh;display:flex;align-items:center;padding:6rem 0;position:relative;}
  .sc.short{min-height:auto;padding:7rem 0;}
  .dark{background:var(--navy);color:#F2F4F8;}
  .dark .eyebrow{color:var(--clay-lt);}
  /* en CSS et non en style en ligne : un style en ligne suit le bloc
     quand on deplace une section, et ment alors sur son fond. */
  .dark .tag{color:var(--clay-lt);}
  .dark h2{color:#F7F9FC;}
  .dark .lead{color:var(--onnavy);}
  .alt{background:var(--surface);}

  /* le numero de section, ancre sur le rail */
  .sc > .in{position:relative;width:100%;}
  .tag{position:absolute;left:0;top:-2.6rem;font-family:var(--mono);font-size:.7rem;
       letter-spacing:.2em;color:var(--clay);font-weight:700;}
  @media(max-width:60rem){.tag{position:static;display:block;margin-bottom:1rem;}}

  .eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
           color:var(--clay);font-weight:700;margin:0 0 .9rem;}
  h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4.6vw,2.7rem);
     line-height:1.12;margin:0 0 1.2rem;max-width:20ch;text-wrap:balance;
     letter-spacing:-.012em;}
  h2 em{font-style:normal;color:var(--clay);}
  .dark h2 em{color:var(--clay-lt);}
  .lead{font-size:1.06rem;color:var(--muted);max-width:44ch;margin:0;}

  /* ═══════════ revelations ═══════════ */
  .rv{opacity:0;transform:translateY(22px);
      transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
  .rv.in-view{opacity:1;transform:none;}
  .d1{transition-delay:.09s}.d2{transition-delay:.18s}
  .d3{transition-delay:.27s}.d4{transition-delay:.36s}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .rv{opacity:1;transform:none;transition:none;}
  }

  /* ═══════════ en-tete ═══════════ */
  /* Fige, et non plus absolu. La cause du defaut : le bandeau vivait DANS le
     heros, et un element absolu est cale sur son ancetre positionne — il ne
     pouvait donc pas depasser le heros. Il en est sorti. */
  .top{position:fixed;top:0;left:0;right:0;z-index:60;
       transition:background .3s ease, box-shadow .3s ease;}
  /* transparent en haut pour laisser voir la photo du heros ; des qu'on defile,
     un fond bleu nuit et un flou — sinon les libelles clairs passeraient sur les
     sections claires et deviendraient illisibles */
  .top.cale{background:rgba(18,25,50,.88);backdrop-filter:saturate(140%) blur(12px);
            -webkit-backdrop-filter:saturate(140%) blur(12px);
            box-shadow:0 1px 0 rgba(255,255,255,.10);}
  .logolien{display:inline-flex;align-items:center;line-height:0;}
  /* le bandeau couvre le haut : les ancres doivent s'arreter dessous */
  section[id],.hero{scroll-margin-top:5.2rem;}
  /* l'en-tete vit DANS le heros : sans ancetre positionne il se posait
     sur le bandeau d'avertissement et le logo s'y trouvait rogne. */
  /* « Contact » se termine sur le bord DROIT du globe. Demi-largeur = 0.513 R
     (silhouette en z=0, voir le script), donc bord droit a 0.847 de la largeur
     — d'ou une marge droite de 15,3 vw. Le logo reste cale sur le titre grace au
     max(), qui reproduit le calage du conteneur sur grand ecran et retombe sur
     la marge simple quand l'ecran est etroit. */
  .topin{max-width:none;margin:0;
         padding-top:1.6rem;padding-bottom:1.6rem;
         transition:padding .3s ease;
         padding-left:max(calc(1.5rem + var(--rail)),
                          calc((100vw - 68rem)/2 + 1.5rem + var(--rail)));
         padding-right:15.3vw;
         display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
  .logo{height:52px;width:auto;transition:height .3s ease;}
  .top.cale .logo{height:42px;}
  nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
  nav a{color:#EDF1F8;text-decoration:none;font-size:1.22rem;min-height:44px;display:inline-flex;align-items:center;font-weight:480;letter-spacing:.012em;
        padding:.5rem 0;border-bottom:1px solid transparent;transition:.25s;}
  nav a:hover{border-bottom-color:var(--clay-lt);color:#fff;}
  .top.cale .topin{padding-top:.9rem;padding-bottom:.9rem;}
  @media(max-width:76rem){.topin{padding-right:8vw;}}
  /* sous 60 rem la navigation s'empile : un bandeau fixe mangerait
     l'ecran, il reprend donc le comportement d'avant. */
  @media(max-width:60rem){.top{position:absolute;}}
  @media(max-width:60rem){.topin{flex-direction:column;align-items:flex-start;gap:.8rem;
    padding:1.3rem 1.5rem;} nav ul{gap:1.3rem;} nav a{font-size:1.1rem;} .logo{height:40px;}}

  /* ═══════════ heros : le reseau, pas la photo ═══════════ */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;
        background:var(--navy);overflow:hidden;}
  /* la photo de fond : un treillis lumineux, qui derive tres lentement */
  .hero .bg{position:absolute;inset:-4%;background-size:cover;background-position:center;
            animation:derive 44s ease-in-out infinite alternate;}
  @keyframes derive{from{transform:scale(1.02) translate3d(0,0,0)}
                    to{transform:scale(1.10) translate3d(-1.6%,-1%,0)}}
  /* le film bleu : assez dense a gauche pour que le texte tienne, transparent a
     droite pour laisser respirer le bokeh de la photo */
  .hero .veil{position:absolute;inset:0;
        background:linear-gradient(100deg,rgba(16,22,45,.96) 0%,rgba(19,26,54,.92) 30%,
                   rgba(26,35,70,.70) 58%,rgba(30,40,80,.46) 100%);}
  #net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;}
  /* une lueur sous les boutons, pas un objet pose sur les mots */
  /* 0.95 et non 0.72 : l'attenuation datait du temps ou le globe passait
     DERRIERE le texte. Il est descendu sous les boutons, elle ne protege
     donc plus rien et ne fait que delaver le scintillement. */
  @media(max-width:60rem){#net{opacity:.95;}}
  @media (prefers-reduced-motion: reduce){.hero .bg{animation:none;}}
  /* width:100% est INDISPENSABLE : .hero est en display:flex, donc .in est un
     element flexible — sans largeur imposee il se retracte sur son contenu,
     puis margin:auto centre cette boite etroite. C'est ce qui decalait le
     titre vers la droite et laissait un vide a gauche. */
  .hero .in{position:relative;z-index:3;width:100%;
            padding-top:5.5rem;padding-bottom:5rem;}
  .hero h1{font-family:var(--serif);font-weight:400;color:#F7F9FC;
           font-size:clamp(2.1rem,5.6vw,3.5rem);line-height:1.08;margin:0 0 1.1rem;
           max-width:19ch;text-wrap:balance;letter-spacing:-.018em;}
  /* surtout PAS la couleur du globe : meme teinte sur meme teinte = illisible */
  .hero h1 em{font-style:normal;color:#EEF2F9;opacity:.74;}
  .lead{font-size:clamp(1.02rem,1.5vw,1.17rem);line-height:1.55;color:#DDE4F0;
        max-width:37ch;margin:0 0 1.9rem;font-weight:380;}
  .sig{font-size:.73rem;text-transform:uppercase;letter-spacing:.28em;
       color:var(--clay-lt);font-weight:700;margin:0 0 2.4rem;}
  .btns{display:flex;gap:.8rem;flex-wrap:wrap;}
  .b1,.b2{display:inline-flex;align-items:center;min-height:46px;padding:.8rem 1.6rem;
          border-radius:2px;text-decoration:none;font-size:.88rem;font-weight:650;
          letter-spacing:.04em;transition:.25s;}
  .b1{background:var(--clay);color:#fff;}
  .b1:hover{background:#B06A51;transform:translateY(-2px);}
  .b2{border:1px solid rgba(255,255,255,.45);color:#F2F4F8;}
  .b2:hover{border-color:var(--clay-lt);color:var(--clay-lt);transform:translateY(-2px);}
  .scrollhint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
              color:var(--clay-lt);font-size:.68rem;text-transform:uppercase;
              letter-spacing:.2em;z-index:3;opacity:.75;}

  /* ═══════════ les quatre pratiques ═══════════ */
  .cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.8rem;}
  @media(min-width:40rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(min-width:62rem){.cards{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .card{position:relative;border-radius:3px;overflow:hidden;min-height:18.5rem;
        display:flex;align-items:flex-end;text-decoration:none;
        transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;}
  .card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(12,17,25,.26);}
  .card .ph{position:absolute;inset:0;background-size:cover;background-position:center;
            transition:transform .8s cubic-bezier(.2,.7,.3,1);}
  .card:hover .ph{transform:scale(1.09);}
  .card .vl{position:absolute;inset:0;
            background:linear-gradient(180deg,rgba(33,44,86,.34) 0%,rgba(22,30,58,.94) 76%);
            transition:background .45s;}
  .card:hover .vl{background:linear-gradient(180deg,rgba(33,44,86,.20) 0%,rgba(22,30,58,.90) 76%);}
  .card .ct{position:relative;z-index:2;padding:1.4rem 1.3rem;}
  .card .n{font-family:var(--mono);font-size:.68rem;color:var(--clay-lt);font-weight:700;
           letter-spacing:.16em;display:block;margin-bottom:.55rem;}
  .card h3{font-family:var(--serif);font-weight:400;font-size:1.16rem;line-height:1.18;
           color:#F7F9FC;margin:0 0 .4rem;}
  .card p{font-size:.85rem;color:var(--onnavy);margin:0;line-height:1.42;}

  /* ═══════════ methode ═══════════ */
  .steps{margin-top:2.6rem;}
  .step{display:flex;gap:1.4rem;padding:1.15rem 0;border-top:1px solid var(--line);}
  .step:last-child{border-bottom:1px solid var(--line);}
  .dark .step{border-color:rgba(255,255,255,.16);}
  .step .k{font-family:var(--mono);font-size:.7rem;color:var(--clay);font-weight:700;
           letter-spacing:.12em;flex:0 0 2.4rem;padding-top:.3rem;}
  .dark .step .k{color:var(--clay-lt);}
  .step b{display:block;font-family:var(--serif);font-size:1.18rem;font-weight:400;
          margin-bottom:.1rem;}
  .step span{color:var(--muted);font-size:.95rem;}
  .dark .step span{color:var(--onnavy);}

  /* ═══════════ services : groupes par pratique ═══════════ */
  .svc{display:grid;grid-template-columns:1fr;gap:2.2rem 2rem;margin-top:2.6rem;}
  @media(min-width:40rem){.svc{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(min-width:62rem){.svc{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .grp{border-top:2px solid var(--clay);padding-top:.95rem;}
  .grp h4{font-size:.73rem;font-weight:700;margin:0 0 .85rem;color:var(--clay);
          text-transform:uppercase;letter-spacing:.13em;}
  .grp ul{list-style:none;margin:0;padding:0;}
  .grp li{font-size:.89rem;color:var(--ink);padding:.3rem 0;line-height:1.45;}
  .grp li i{display:block;font-style:normal;font-size:.81rem;color:var(--muted);}
  .dark .grp li{color:#F2F4F8;} .dark .grp li i{color:var(--onnavy);}
  .dark .grp h4{color:var(--clay-lt);}

  /* ═══════════ a propos ═══════════ */
  .split{display:grid;grid-template-columns:1fr;gap:2.6rem;align-items:stretch;width:100%;}
  @media(min-width:56rem){.split{grid-template-columns:1fr 1fr;gap:var(--gut);}}
  .shot{position:relative;border-radius:3px;overflow:hidden;min-height:22rem;}
  .shot .ph{position:absolute;inset:0;background-size:cover;background-position:center;}
  .shot .vl{position:absolute;inset:0;background:rgba(33,44,86,.38);mix-blend-mode:multiply;}
  .body{font-family:var(--serif);font-size:1.06rem;line-height:1.68;max-width:50ch;}
  .vals{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem;}
  .vals span{border:1px solid var(--clay);color:var(--clay);border-radius:2px;
             padding:.35rem .75rem;font-size:.76rem;font-weight:650;
             text-transform:uppercase;letter-spacing:.1em;}


  /* ——— accroche en deux temps, comme seract.net ——— */
  h2 .q{display:block;font-size:.58em;color:var(--muted);letter-spacing:0;
        margin-top:.35rem;font-family:var(--sans);font-weight:600;
        text-transform:none;line-height:1.3;}
  .dark h2 .q{color:var(--onnavy);}

  /* ═══════════ contact ═══════════ */
  /* --sand vaut #1C1711 en theme sombre : un brun etranger a la palette. On lui
     substitue le fond natif de la marque, net, sous un voile bleu nuit. */
  .cta{position:relative;background:var(--navy-d);color:#F2F4F8;overflow:hidden;}
  .cta .bg2{position:absolute;inset:0;background-size:cover;background-position:center;}
  .cta .veil2{position:absolute;inset:0;
        background:linear-gradient(104deg,rgba(16,22,45,.93) 0%,rgba(22,30,58,.84) 46%,
                   rgba(33,44,86,.58) 100%);}
  .cta>.in{position:relative;z-index:2;}
  .cta .tag{color:var(--clay-lt);}
  .cta .eyebrow{color:var(--clay-lt);}
  .cta .lead,.cta .outro{color:#DDE4F0;}
  /* champs translucides plutot que blancs : quatre rectangles opaques poses sur
     une photo la decoupent au lieu de s'y inscrire */
  .cta form.cf input,.cta form.cf textarea{background:rgba(255,255,255,.07);
        border-color:rgba(255,255,255,.22);color:#F2F4F8;}
  .cta form.cf input::placeholder,
  .cta form.cf textarea::placeholder{color:rgba(237,241,248,.56);}
  .cta form.cf input:focus,.cta form.cf textarea:focus{border-color:var(--clay-lt);
        background:rgba(255,255,255,.11);box-shadow:0 0 0 3px rgba(201,142,120,.22);}
  .cta form.cf button{background:var(--clay);}
  .cta form.cf button:hover{background:#B06A51;}
  .cta .mail{color:var(--clay-lt);}
  .cta a.mail{font-family:var(--serif);font-size:1.5rem;color:var(--clay);
              text-underline-offset:7px;}


  /* ——— cartes a icone, reprises du site existant (2x2, trait, une phrase) ——— */
  /* Une seule ligne de quatre, et les deux paires reprennent EXACTEMENT les
     largeurs et la gouttiere du split au-dessus (.92fr / 1.08fr, 3.4rem) : les
     bords verticaux des tuiles se superposent donc a ceux de la photo et du
     paragraphe — et comme le bloc du haut est passe en 50/50, les quatre
     tuiles sont en plus EGALES entre elles. Premiere tentative : les paires
     reprenaient .92fr/1.08fr, donc 174 px a gauche contre 206 a droite. Caler
     sur une frontiere que rien ne dessine ne se voit pas ; l'inegalite de
     quatre tuiles lues comme quatre pairs, elle, se voit tout de suite. */
  .valrow{display:grid;grid-template-columns:1fr;gap:var(--gut);margin-top:2.4rem;width:100%;}
  /* La MEME gouttiere partout : entre les tuiles d'une paire et entre les
     paires. Les quatre ecarts sont donc egaux, et comme le split au-dessus
     emploie la meme variable, les tuiles 1-2 restent calees sur la photo et
     3-4 sur le paragraphe. Les deux exigences tiennent ensemble. */
  .valpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);}
  @media(max-width:34rem){.valpair{grid-template-columns:1fr;}}
  @media(min-width:56rem){.valrow{grid-template-columns:1fr 1fr;gap:var(--gut);
                                  margin-top:3.4rem;}}
  .vcard{background:var(--surface);border:1px solid var(--line);border-radius:7px;
         padding:1.25rem 1.15rem;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.3,1),
         box-shadow .35s,border-color .35s;}
  .vcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(12,17,25,.10);
               border-color:var(--clay);}
  .vcard svg{width:32px;height:32px;stroke:var(--clay);stroke-width:1.4;fill:none;
             stroke-linecap:round;stroke-linejoin:round;margin-bottom:.75rem;
             transition:transform .35s;}
  .vcard:hover svg{transform:scale(1.09);}
  .vcard b{display:block;font-size:.97rem;font-weight:650;margin-bottom:.26rem;
           text-wrap:balance;}
  .vcard span{display:block;font-size:.86rem;line-height:1.48;color:var(--muted);}

  /* ——— formulaire de contact ——— */
  form.cf{display:grid;grid-template-columns:1fr;gap:.85rem;margin-top:2rem;max-width:34rem;}
  @media(min-width:36rem){form.cf .row2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}}
  form.cf input,form.cf textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);
    background:var(--surface);border:1px solid var(--line);border-radius:3px;
    padding:.8rem .9rem;transition:border-color .25s,box-shadow .25s;}
  form.cf textarea{min-height:7rem;resize:vertical;}
  form.cf input:focus,form.cf textarea:focus{outline:none;border-color:var(--clay);
    box-shadow:0 0 0 3px rgba(156,91,69,.15);}
  form.cf button{justify-self:start;background:var(--navy);color:#fff;border:0;
    font:inherit;font-size:.9rem;font-weight:650;letter-spacing:.04em;
    padding:.85rem 1.8rem;border-radius:2px;min-height:46px;cursor:pointer;
    transition:background .25s,transform .25s;}
  form.cf button:hover{background:var(--clay);transform:translateY(-2px);}
  form.cf button[disabled]{opacity:.65;cursor:progress;transform:none;}
  /* hors de l'ecran plutot que display:none : certains robots ignorent les
     champs masques par display et remplissent quand meme le piege. */
  .pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  /* le visiteur doit SAVOIR ce qui s'est passe : un formulaire qui se vide
     sans rien dire laisse croire a un envoi. */
  .formetat{margin:.9rem 0 0;font-size:.93rem;min-height:1.2em;}
  .formetat.ok{color:var(--clay-lt);font-weight:650;}
  .formetat.ko{color:#F0A58C;font-weight:650;}

  /* ——— pied : le logo prend sa place, comme sur le site existant ——— */
  footer .desc{max-width:30ch;line-height:1.55;}
  footer .touch{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;}
  footer .touch svg{width:17px;height:17px;stroke:var(--clay-lt);stroke-width:1.6;
                    fill:none;flex:0 0 auto;}
  footer .touch a{color:#F2F4F8;}
  footer .touch a:hover{color:var(--clay-lt);}

  /* ═══════════ purpose ═══════════
     Deux rangees pleine largeur, MEME CORPS pour les deux enonces. Vision et
     mission sont deux enonces de MEME RANG : les hierarchiser par la taille
     suggerait que la mission compte moins, ce qui est faux. Correction demandee
     par Redouane, et il a raison.
     Plus d'eyebrow « Purpose » non plus : une etiquette sans rien en face,
     suivie de deux autres etiquettes, donnait a lire TROIS categories dont une
     vide. Les deux libelles de rangee sont le contenu de la section. */
  .purpose p em{font-style:normal;color:var(--clay);}
  .purpose .pr{border-top:1px solid var(--line);padding-top:1.9rem;margin-top:2.8rem;}
  .purpose .vlab{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;
       color:var(--clay);font-weight:700;margin:0 0 1.1rem;}
  .purpose p{margin:0;font-family:var(--serif);font-weight:400;
       font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.2;
       letter-spacing:-.014em;max-width:32ch;text-wrap:balance;}

  /* ═══════════ images de fond et retouches ═══════════
     ELLES ETAIENT EN ATTRIBUTS `style=`, et la politique de securite du
     site degroupe (`style-src 'self'`, sans `style-src-attr`) les
     bloquait : les SEPT images de fond ne s'affichaient pas. Plutot que
     d'assouplir la politique, on les met ou elles doivent etre. Il ne
     reste ainsi AUCUN attribut de style dans les pages. */
  .hero .bg{background-image:url('/img/fond.jpg');}
  .ph-advisory{background-image:url('/img/advisory.jpg');}
  .ph-technology{background-image:url('/img/technology.jpg');}
  .ph-integration{background-image:url('/img/integration.jpg');}
  .ph-incubation{background-image:url('/img/incubation.jpg');}
  .ph-method{background-image:url('/img/method.jpg');}
  .cta .bg2{background-image:url('/img/reseau.jpg');}
  .lead-serre{margin-bottom:1.8rem;}
  .outro{margin-top:1.4rem;font-size:.95rem;}
  .mail-sm{font-size:1.02rem;}
  .sansmarge{margin:0;}

  /* ═══════════ pied ═══════════ */
  footer{background:var(--navy-d);color:var(--onnavy);padding:3.4rem 0 2rem;font-size:.89rem;}
  /* auto-fit ne tenait que TROIS colonnes dans 842 px : les cinq blocs
     retombaient en 3+2, d'ou l'impression de desordre. Grille explicite : la
     marque prend sa propre rangee, puis quatre colonnes strictement egales. */
  footer .cols{display:grid;grid-template-columns:1fr;gap:2rem var(--gut);
               margin-bottom:2.2rem;}
  @media(min-width:40rem){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(min-width:56rem){footer .cols{grid-template-columns:repeat(4,minmax(0,1fr));}
    footer .brand{grid-column:1 / -1;margin-bottom:.4rem;}}
  footer h5{color:#F2F4F8;font-size:.69rem;text-transform:uppercase;
            letter-spacing:.16em;margin:0 0 .9rem;font-weight:700;}
  footer ul{list-style:none;margin:0;padding:0;}
  footer li{margin-bottom:.45rem;}
  /* Au banc 390 px, les liens du pied faisaient 19 px de haut — la hauteur de
     leur ligne de texte. Sous 60 rem on elargit la zone touchable sans changer
     l'aspect sur grand ecran : le rembourrage vertical porte le lien a 44 px,
     seuil usuel pour le doigt. */
  @media(max-width:60rem){
    footer li{margin-bottom:0;}
    footer li a,footer .touch a{display:inline-block;padding:.65rem 0;min-height:44px;}
    footer .touch{align-items:flex-start;}
    footer .touch svg{margin-top:.95rem;}
  }
  footer a{color:var(--onnavy);text-decoration:none;transition:.2s;}
  footer a:hover{color:var(--clay-lt);}
  footer .flogo{height:52px;margin-bottom:1.1rem;}
  .legal{border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem;
         display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.79rem;}

  /* Sur une page de document, le bandeau est PLEIN. A 88 % d'opacite plus un
     flou — le reglage de l'accueil, juste au-dessus d'une photo — le texte
     transparaissait encore derriere lui au defilement. Ici il n'y a rien a
     laisser voir : une couleur franche, et le texte s'arrete dessous. */
  .top[data-fige="1"].cale{background:var(--navy-d);
       backdrop-filter:none;-webkit-backdrop-filter:none;
       box-shadow:0 1px 0 rgba(255,255,255,.12);}

  /* Sur mobile le bandeau est absolu ET plein : il recouvrait le titre de la
     premiere section (mesure au banc 390 px : bandeau 0-190 px, eyebrow a
     112 px). On lui reserve sa hauteur. L'accueil n'a pas le probleme, son
     heros faisant 100vh avec son contenu centre bien plus bas. */
  @media(max-width:60rem){
    .top[data-fige="1"] ~ section:first-of-type{padding-top:13rem;}
  }

  /* ═══════════ pages juridiques ═══════════
     L'INTERTITRE PASSE A GAUCHE, la prose a droite. Premier essai : une colonne
     unique de 62ch, qui n'occupait que les deux tiers de la largeur et rendait
     chaque document tres long. Elargir la colonne aurait ete le mauvais remede —
     au-dela d'environ 75 caracteres par ligne, l'oeil perd la ligne suivante au
     retour chariot. On occupe donc l'horizontale autrement. */
  .lgrow{display:grid;grid-template-columns:1fr;gap:.25rem;
         padding:1.5rem 0;border-top:1px solid var(--line);}
  .lgrow:first-child{border-top:0;padding-top:.4rem;}
  @media(min-width:58rem){
    .lgrow{grid-template-columns:13.5rem 1fr;gap:2.4rem;padding:1.7rem 0;}
  }
  .dark .lgrow{border-top-color:rgba(255,255,255,.14);}
  .lgh{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
       color:var(--clay);font-weight:700;margin:0 0 .5rem;
       font-family:var(--sans);line-height:1.45;}
  @media(min-width:58rem){.lgh{margin:.3rem 0 0;}}
  .dark .lgh{color:var(--clay-lt);}
  .lgp{font-family:var(--serif);font-size:1.04rem;line-height:1.66;max-width:68ch;}
  .lgp p{margin:0 0 .85rem;}
  .lgp p:last-child{margin-bottom:0;}
  .lgp ul{margin:0 0 .85rem;padding-left:1.15rem;}
  .lgp li{margin-bottom:.5rem;}
  .dark .lgp{color:var(--onnavy);}

  /* la fiche d'identite : deux colonnes DANS la colonne de droite */
  .fiche{display:grid;grid-template-columns:1fr;gap:.1rem .9rem;margin:0;
         font-family:var(--sans);font-size:.95rem;}
  @media(min-width:40rem){.fiche{grid-template-columns:11rem 1fr;}}
  .fiche dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
            color:var(--muted);font-weight:700;padding-top:.28rem;}
  .fiche dd{margin:0 0 .55rem;}
  .dark .fiche dd{color:var(--onnavy);}

  .lgcorps{margin-top:2.2rem;}
  .docnav{display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;list-style:none;
          margin:2.1rem 0 0;padding:0;font-family:var(--sans);font-size:.98rem;}
  .docnav a{text-decoration:none;border-bottom:1px solid transparent;
            padding:.35rem 0;}
  .docnav a:hover{border-bottom-color:currentColor;}

  /* `.mail` n'est style QUE dans `.cta` sur la page d'accueil : hors de cette
     section, les liens retombaient sur le bleu souligne du navigateur. */
  .lgp a,.fiche a,.docnav a{color:var(--clay);text-decoration:none;
       border-bottom:1px solid rgba(156,91,69,.42);transition:border-color .2s;}
  .lgp a:hover,.fiche a:hover{border-bottom-color:var(--clay);}
  .dark .lgp a,.dark .fiche a,.dark .docnav a{color:var(--clay-lt);
       border-bottom-color:rgba(201,142,120,.42);}
  .dark .lgp a:hover,.dark .fiche a:hover{border-bottom-color:var(--clay-lt);}