/* INTERP — feuille unique. Navy, bleu et turquoise du logo, sur fond blanc.
   Aucun arrondi, aucune ombre portee, des filets d un pixel.
   Le theme tient dans ce fichier : le remplacer change la direction.

   Fond blanc partout, sans mode sombre — decision de Farouq, 16 septembre
   2026. Les bandes navy du bandeau et de l appel sont devenues blanches,
   separees par des filets. Plus de bascule automatique : un poste regle en
   mode sombre voyait un autre site que celui qu on relisait.

   Lisibilite mesuree sur blanc (WCAG, texte courant : 4,5:1 minimum) :
     ink    #22262E  15,2:1    titres forts, gras
     navy   #1F3864  11,6:1    titres
     ink-2  #464E5C   8,4:1    texte courant   (etait #515A6B, 6,9:1)
     blue   #245E96   6,7:1    liens           (etait #2E75B6, 4,8:1)
     ink-3  #5B6270   6,1:1    petits libelles (etait #6A7180, 4,9:1)
   Le turquoise #2979B9 est celui du logo (moyenne des pixels, 17 septembre
   2026). Il remplace l or de la charte V2 : filet, bordure ou puce, jamais du
   texte. Les filets ont ete fonces pour rester visibles sur un fond
   entierement blanc.

   Polices (17 septembre 2026) : Source Serif 4 pour les titres, Source Sans 3
   pour le texte. Deux familles de fonderie, sobres, dessinées pour l ecran,
   à la place d EB Garamond et Lato. */

:root{
  color-scheme:light;
  --navy:#1F3864; --blue:#245E96; --turquoise:#2979B9;
  --ink:#22262E; --ink-2:#464E5C; --ink-3:#5B6270;
  --ground:#FFFFFF; --surface:#FFFFFF;
  --rule:#CDD5E0; --rule-fort:#9AA8BC;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rang:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
     font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.rang{max-width:var(--rang);margin:0 auto;padding:0 32px}
/* Seulement le haut et le bas : ces classes s ajoutent a .rang, dont elles
   annulaient les marges laterales (texte colle au bord sous 1180 px). */
.bloc{padding-top:72px;padding-bottom:72px}
/* Caché au-dessus de la page plutôt qu'à gauche : en arabe, un élément poussé
   à gauche ouvrait dix mille pixels de défilement horizontal. */
.saut{position:absolute;inset-inline-start:0;top:0;transform:translateY(-120%);
      background:var(--navy);color:#FFFFFF;padding:12px 20px;z-index:10}
.saut:focus{transform:none}

/* Le libelle qui coiffe chaque section : filet turquoise a gauche, texte lisible. */
.surtitre{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
          color:var(--ink-2);margin:0 0 14px;padding-inline-start:14px;
          border-inline-start:3px solid var(--turquoise)}
.titre-section{font-family:var(--serif);font-size:clamp(26px,3vw,33px);font-weight:600;
               color:var(--navy);margin:0 0 6px;line-height:1.2;text-wrap:balance}
.intro-section{font-size:16px;color:var(--ink-2);margin:0 0 34px;max-width:64ch}

/* ---------- en-tete ---------- */
.entete{background:var(--surface);border-bottom:1px solid var(--rule)}
.entete .rang{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
              gap:10px 32px;padding-top:18px;padding-bottom:18px}
.marque img{height:52px;width:auto}
.menu{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.menu a{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
        text-decoration:none;color:var(--ink-2);padding:6px 0;
        border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.menu a:hover{color:var(--navy);border-bottom-color:var(--turquoise)}

/* ---------- langues ---------- */
/* Le choix de la langue, présent sur toutes les pages. La mise en page suit le
   sens d'écriture : les marges et les filets sont écrits en propriétés
   logiques (début, fin), qui se retournent d'elles-mêmes en arabe. */
.langues{display:flex;gap:6px;align-items:center}
.langue{font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.4;text-decoration:none;
        color:var(--ink-2);border:1px solid var(--rule);padding:4px 9px}
a.langue:hover{border-color:var(--turquoise);color:var(--navy)}
.langue-courante{background:var(--navy);border-color:var(--navy);color:#FFFFFF}
[dir="rtl"]{--serif:"Noto Naskh Arabic","Source Serif 4",Georgia,serif;
            --sans:"IBM Plex Sans Arabic","Source Sans 3",Tahoma,Arial,sans-serif}
/* L'espacement des lettres casse la liaison des lettres arabes. */
[dir="rtl"] *{letter-spacing:0 !important}
[dir="rtl"] body{line-height:1.8}
[dir="rtl"] .porte-titre::after{content:" \2190"}

/* ---------- bandeau d echeance ---------- */
/* Blanc, comme le reste : c est la taille du titre et le filet turquoise qui
   signalent la une, plus un aplat sombre. */
.bandeau{background:var(--surface);color:var(--ink);padding:64px 0 60px;
         border-bottom:1px solid var(--rule)}
.bandeau-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
                gap:24px 64px;align-items:start}
.surtitre-bande{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
                color:var(--ink-2);margin:0 0 18px;padding-inline-start:14px;
                border-inline-start:3px solid var(--turquoise)}
.bandeau h1{font-family:var(--serif);font-size:clamp(31px,4.1vw,50px);line-height:1.13;
            font-weight:500;color:var(--navy);margin:0 0 20px;text-wrap:balance}
.chapo{font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--ink-2);
       max-width:56ch;margin:0}
.bandeau-lien{margin:32px 0 0}
.bandeau-lien a{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.13em;
                text-transform:uppercase;text-decoration:none;color:var(--navy);
                border:1px solid var(--navy);border-bottom:2px solid var(--turquoise);
                padding:13px 24px;transition:background .2s,color .2s}
.bandeau-lien a:hover{background:var(--navy);color:#FFFFFF}

/* Le panneau de droite donne sa masse au bandeau et porte le perimetre. */
.panneau{border-inline-start:1px solid var(--rule);padding-inline-start:30px}
.panneau-lbl{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
             color:var(--ink-3);margin:0 0 14px}
.panneau ul{list-style:none;margin:0;padding:0}
.panneau li{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
            color:var(--ink);padding:11px 0;border-bottom:1px solid var(--rule)}
.panneau li:last-child{border-bottom:0}

/* ---------- boutons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin:28px 0 0}
.bouton{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.1em;
        text-transform:uppercase;text-decoration:none;color:#FFFFFF;background:var(--navy);
        border:1px solid var(--navy);border-bottom:3px solid var(--turquoise);padding:14px 24px;
        transition:background .2s,color .2s}
.bouton:hover{background:#FFFFFF;color:var(--navy)}
.bouton-petit{font-size:11px;padding:11px 16px}
.bouton-second{background:#FFFFFF;color:var(--navy)}
.bouton-second:hover{background:var(--navy);color:#FFFFFF}

/* ---------- photos ---------- */
.photo{margin:0}
.photo img{display:block;width:100%;height:auto}

/* ---------- accueil : ce que nous faisons ---------- */
/* Une phrase, deux boutons, une photo. Le reste se lit plus bas. */
.hero{padding:56px 0 60px;border-bottom:1px solid var(--rule)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
             gap:32px 56px;align-items:center}
.hero h1{font-family:var(--serif);font-size:clamp(32px,4.2vw,52px);line-height:1.1;
         font-weight:500;color:var(--navy);margin:0 0 20px;text-wrap:balance}
.hero .chapo{color:var(--ink-2)}

.avantages{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.avantage{border-top:3px solid var(--turquoise);padding-top:18px}
.avantage h2{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);
             margin:0 0 8px;line-height:1.2}
.avantage p{margin:0;color:var(--ink-2)}

.etapes{list-style:none;margin:30px 0 0;padding:0;display:grid;
        grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:etape}
.etapes li{counter-increment:etape;border-inline-start:1px solid var(--rule-fort);padding-inline-start:22px}
.etapes li::before{content:counter(etape, decimal-leading-zero);display:block;
                   font-family:var(--serif);font-size:36px;color:var(--navy);line-height:1;
                   margin-bottom:12px;font-variant-numeric:tabular-nums}
.etapes h3{font-size:14px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
           color:var(--ink);margin:0 0 8px}
.etapes p{margin:0;color:var(--ink-2);font-size:15px}
.bloc-serre{padding-top:0}

/* ---------- onglets des missions : une page par mission, sans script ---------- */
/* Les onglets ne défilent jamais : un onglet caché hors champ, c'est une
   mission que le visiteur ne voit pas. Sept onglets par pôle tiennent sur une
   rangée en cases égales ; un libellé long passe à la ligne dans sa case. */
.onglets{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:0 4px;
         margin:0 0 36px;border-bottom:1px solid var(--rule-fort)}
.onglets a{display:flex;align-items:flex-end;padding:12px 6px 11px 0;font-size:11px;
           font-weight:700;line-height:1.35;letter-spacing:.05em;text-transform:uppercase;
           color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;
           margin-bottom:-1px}
.onglets a:hover{color:var(--navy);border-bottom-color:var(--rule-fort)}
.onglets a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--turquoise)}

/* ---------- page de service : l essentiel, puis le detail replie ---------- */
.page-tete{padding-bottom:34px}
.page-tete-photo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
                 gap:28px 48px;align-items:center}
.page-tete h1{font-family:var(--serif);font-size:clamp(29px,4vw,43px);line-height:1.14;
              font-weight:600;color:var(--navy);margin:0 0 22px;text-wrap:balance}
.bref{list-style:none;margin:0;padding:0;max-width:60ch}
.bref li{position:relative;padding:0 0 12px;padding-inline-start:26px;font-size:18px;line-height:1.55;color:var(--ink)}
/* Un petit carré plutôt qu'un tiret : sur trois lignes empilées, trois tirets
   se lisaient comme une liste générée. */
.bref li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:7px;height:7px;
                 background:var(--turquoise)}

/* Le repli est natif (<details>) : pas de JavaScript, et le texte reste lu
   par les moteurs. */
.plus{border-top:1px solid var(--rule-fort)}
.plus summary{cursor:pointer;list-style:none;display:flex;align-items:center;
              justify-content:space-between;gap:16px;padding:20px 0;font-size:13px;
              font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
              border-bottom:1px solid var(--rule)}
.plus summary::-webkit-details-marker{display:none}
.plus summary::after{content:"+";font-size:26px;font-weight:400;line-height:1;color:var(--navy)}
.plus[open] summary::after{content:"‘2"}
.plus summary:hover{color:var(--blue)}
.plus .prose{padding-top:26px}

/* La frise de zellige, au-dessus du pied de page. Nom fixe : voir photos.py. */
.frise{height:28px;border-top:1px solid var(--rule);
       background:url("photos/motif-1.webp") repeat-x left center;background-size:28px 28px}

/* ---------- la preuve, juste sous le bandeau ---------- */
.preuve{background:var(--surface);border-top:3px solid var(--turquoise);
        border-bottom:1px solid var(--rule);padding:38px 0 34px}
.preuve-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.preuve strong{display:block;font-family:var(--serif);font-size:40px;font-weight:600;
               color:var(--navy);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.preuve span{font-size:13px;line-height:1.45;color:var(--ink-2);display:block;max-width:26ch}
.preuve-note{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--rule);
             font-size:13px;color:var(--ink-2);max-width:88ch}

/* ---------- les cartes de mission ---------- */
/* Chaque carte trace ses filets droit et bas, la grille le haut et la gauche :
   une rangée incomplète (cinq missions sur trois colonnes) reste propre, sans
   case grise vide. */
.offres{display:grid;grid-template-columns:repeat(3,1fr);
        border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.offre{background:var(--surface);padding:32px 28px 28px;display:flex;flex-direction:column;
       border-inline-end:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.offre-titre a{color:inherit;text-decoration:none}
.offre-titre a:hover{border-bottom:1px solid var(--turquoise)}
/* Le nombre de références attestées : la preuve, sous la promesse. */
.offre p.offre-preuve{font-size:13px;line-height:1.4;color:var(--ink-3);margin:-6px 0 20px;
                      font-variant-numeric:tabular-nums}
.offre-preuve strong,.preuve-ligne strong{color:var(--navy);font-weight:700}
.preuve-ligne{font-size:14px;color:var(--ink-3);margin:4px 0 18px 26px;
              font-variant-numeric:tabular-nums}

/* ---------- pages de contact : une fiche par besoin ---------- */
/* Même grille que les cartes de mission : filets, pas d ombre, pas d arrondi. */
.canaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 0 56px;
        border-top:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.canal{padding:28px 26px 24px;border-inline-end:1px solid var(--rule);border-bottom:1px solid var(--rule);
       border-top:3px solid var(--turquoise);margin-top:-1px;display:flex;flex-direction:column;
       scroll-margin-top:24px}
.canal-titre{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy);
             margin:0 0 10px;line-height:1.25}
.canal p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 18px}
.canal .canal-actions{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 14px}
.canal .canal-objet{font-size:13px;color:var(--ink-3);margin:0;overflow-wrap:anywhere}
.canal-objet span{color:var(--ink);font-weight:700}

/* ---------- la page des missions : deux pôles ---------- */
.pole{padding:8px 0 56px;scroll-margin-top:24px}
.pole-titre{font-family:var(--serif);font-size:clamp(26px,3vw,34px);font-weight:600;
            color:var(--navy);margin:0 0 10px;padding-inline-start:16px;border-inline-start:4px solid var(--turquoise)}
.pole-groupe{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
             color:var(--ink-3);margin:34px 0 14px}
.pole-intro{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0 0 26px;max-width:66ch}
.pole-suite{max-width:68ch;padding-top:8px;border-top:1px solid var(--rule)}

/* ---------- l accueil : les deux pôles côte à côte ---------- */
/* L'equipe : portrait en noir et blanc, a sa taille d'origine, et le texte. */
.equipe{margin:8px 0 44px;padding-top:34px;border-top:1px solid var(--rule)}
.equipe-grille{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start}
.portrait{margin:0}
.portrait img{display:block;width:100%;max-width:200px;height:auto;border-top:3px solid var(--turquoise)}
.portrait figcaption{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.portrait strong{font-family:var(--serif);font-size:19px;color:var(--navy)}
.portrait span{font-size:14px;color:var(--ink-3)}
.equipe-texte p{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 14px;max-width:68ch}
@media (max-width:620px){.equipe-grille{grid-template-columns:1fr;gap:20px}.portrait img{max-width:160px}}
/* Les portes d'entree : une carte par public, filet turquoise en tete. */
.portes{padding:34px 0 38px;border-bottom:1px solid var(--rule);background:var(--surface)}
.portes .surtitre{margin-bottom:18px}
.portes-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.porte{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--rule);
       border-top:3px solid var(--turquoise);padding:20px 22px 22px;text-decoration:none;
       color:var(--ink);transition:border-color .15s,box-shadow .15s}
.porte:hover{border-color:var(--navy);border-top-color:var(--turquoise);
             box-shadow:0 6px 18px rgba(31,56,100,.08)}
.porte-qui{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
           color:var(--ink-3)}
.porte-titre{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.25;
             color:var(--navy)}
.porte-titre::after{content:" \2192";color:var(--navy)}
.porte-texte{font-size:15px;line-height:1.55;color:var(--ink-2)}
.poles-accueil{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px}
.pole-carte h3{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--navy);
               margin:0 0 8px;padding-bottom:12px;border-bottom:2px solid var(--turquoise)}
.pole-carte p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.pole-carte ul{list-style:none;margin:0 0 18px;padding:0}
.pole-carte li{border-bottom:1px solid var(--rule)}
.pole-carte li a{display:block;padding:11px 0;color:var(--ink);text-decoration:none;font-size:16px}
.pole-carte li a:hover{color:var(--navy)}
.offre-num{font-family:var(--serif);font-size:14px;letter-spacing:.1em;color:var(--ink-3);
           margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--turquoise);
           align-self:flex-start;font-variant-numeric:tabular-nums}
.offre-titre{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--navy);
          margin:0 0 12px;line-height:1.24;text-wrap:balance}
.offre p{font-size:15px;line-height:1.66;color:var(--ink-2);margin:0 0 20px}
.offre .lien{margin-top:auto}
.lien{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
      text-decoration:none;color:var(--navy);border-bottom:2px solid var(--turquoise);
      padding-bottom:3px;display:inline-block}
.lien:hover{color:var(--blue)}

/* ---------- l index des notes ---------- */
/* Une ligne par note : la liste tient a un element comme a vingt, ce que la
   grille a deux colonnes ne faisait pas — elle laissait un trou. */
.index-notes{border-top:1px solid var(--rule-fort)}
.index-note{display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 36px;
            padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.index-note time{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--ink-3);
                 font-variant-numeric:tabular-nums;text-transform:uppercase}
.index-note h3,.index-note h2{font-family:var(--serif);font-size:24px;line-height:1.26;
                              font-weight:600;margin:0 0 8px;text-wrap:balance}
.index-note a{color:var(--navy);text-decoration:none;border-bottom:1px solid transparent}
.index-note a:hover{border-bottom-color:var(--turquoise)}
.index-note p{font-size:15px;line-height:1.66;color:var(--ink-2);margin:0;max-width:74ch}
.lien-suite{margin:28px 0 0}

/* ---------- la bande d appel ---------- */
.appel{background:var(--surface);color:var(--ink);padding:56px 0;
       border-top:3px solid var(--turquoise);border-bottom:1px solid var(--rule)}
.appel-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
              gap:28px 64px;align-items:center}
.appel h2{font-family:var(--serif);font-size:clamp(25px,3vw,32px);font-weight:500;
          color:var(--navy);margin:0 0 12px;line-height:1.22;text-wrap:balance}
.appel p{color:var(--ink-2);margin:0;max-width:58ch}
.appel-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:24px}
.appel .bouton{text-transform:none;letter-spacing:.02em;font-size:16px;word-break:break-word}
.appel-actions .adresse{font-size:17px;color:var(--navy);text-decoration:none;
                        border-bottom:2px solid var(--turquoise);padding-bottom:3px;word-break:break-word}
.appel-actions .adresse:hover{color:var(--blue)}
/* Les lignes du cabinet : la fonction au-dessus, le numéro dessous. */
.lignes{list-style:none;margin:0 0 14px;padding:0}
.lignes li{margin:0 0 10px;line-height:1.35}
.ligne-lbl{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;
           text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.lignes a{color:var(--navy);text-decoration:none;font-size:15px;font-variant-numeric:tabular-nums}
.lignes a:hover{border-bottom:1px solid var(--turquoise)}
.appel-lignes{display:flex;flex-wrap:wrap;gap:10px 32px;margin:6px 0 0}
.appel-lignes li{margin:0}
.cote .lignes{display:block}
.cote .lignes li{padding:0;border-bottom:0;margin:0 0 10px}

/* ---------- article ---------- */
.article{padding-top:56px;padding-bottom:72px}
.article-grille{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start}
.article-tete{border-bottom:1px solid var(--rule-fort);padding-bottom:28px;margin-bottom:34px}
.article-tete h1{font-family:var(--serif);font-size:clamp(29px,4vw,43px);line-height:1.14;
                 font-weight:600;color:var(--navy);margin:0 0 18px;text-wrap:balance}
.chapo-clair{font-family:var(--serif);font-size:20px;line-height:1.58;color:var(--ink-2);
             margin:0;max-width:62ch}

/* La colonne laterale : ce que le lecteur veut apres avoir lu. */
.cote{position:sticky;top:28px;border-top:3px solid var(--turquoise);padding-top:20px}
.cote-lbl{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
          color:var(--ink-3);margin:0 0 12px}
.cote p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}
.cote ul{list-style:none;margin:0 0 18px;padding:0}
.cote li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px}
.cote li a{color:var(--navy);text-decoration:none}
.cote li a:hover{border-bottom:1px solid var(--turquoise)}

.prose{max-width:68ch}
.prose h2{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--navy);
          border-inline-start:3px solid var(--turquoise);padding-inline-start:15px;margin:44px 0 15px;text-wrap:balance}
.prose h3{font-family:var(--sans);font-size:14px;font-weight:900;letter-spacing:.09em;
          text-transform:uppercase;color:var(--ink);margin:34px 0 10px}
.prose p{margin:0 0 18px;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{margin:0 0 19px;padding-inline-start:22px;color:var(--ink-2)}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--turquoise)}
.prose blockquote{margin:28px 0;padding:4px 0;padding-inline-start:22px;border-inline-start:3px solid var(--rule-fort);
                  font-family:var(--serif);font-size:19px;color:var(--ink);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14px}
.prose thead th{text-align:start;font-size:11px;font-weight:900;letter-spacing:.1em;
                text-transform:uppercase;color:var(--ink-3);padding:0 14px 10px 0;
                border-bottom:1px solid var(--rule-fort)}
.prose tbody td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);
                color:var(--ink-2);vertical-align:top}
.prose sup a{text-decoration:none}
.prose .footnote{font-size:14px;color:var(--ink-3)}
.article-pied{margin-top:48px;padding-top:22px;border-top:1px solid var(--rule)}
.article-pied p{font-size:13px;color:var(--ink-3);margin:0 0 8px}

/* ---------- pied ---------- */
.pied{background:var(--surface);border-top:1px solid var(--rule-fort);padding:44px 0 0}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:34px}
.pied-nom{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy);margin:0 0 8px}
.pied-lbl{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
          color:var(--ink-3);margin:0 0 10px}
.pied-txt{font-size:14px;line-height:1.85;color:var(--ink-2);margin:0;max-width:46ch}
.pied-txt a{color:var(--ink-2);text-decoration:none}
.pied-txt a:hover{color:var(--navy);border-bottom:1px solid var(--turquoise)}
.pied-bas{border-top:1px solid var(--rule);padding-top:20px;padding-bottom:24px}
.pied-bas p{font-size:12px;color:var(--ink-3);margin:0;line-height:1.7}

/* ---------- reprises ---------- */
@media (max-width:1000px){
  .article-grille{grid-template-columns:1fr;gap:40px}
  .cote{position:static;max-width:none}
  .cote ul{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
}
@media (max-width:880px){
  /* La navigation ne disparait pas : elle passe sous la marque, en pleine
     largeur. Un menu escamotable demanderait du JavaScript, que le site
     n en charge aucun. */
  .entete .rang{padding-bottom:0}
  .menu{width:100%;border-top:1px solid var(--rule);margin-top:6px;padding:12px 0;
        gap:12px 22px}
  .bandeau-grille,.appel-grille,.hero-grille,.page-tete-photo{grid-template-columns:1fr;gap:30px}
  .avantages,.etapes{grid-template-columns:1fr;gap:26px}
  .hero{padding:36px 0 44px}
  /* Sur telephone, la photo du bandeau repoussait les portes d'entree sous le
     premier ecran : elle est decorative, les portes ne le sont pas. */
  .hero-photo{display:none}
  .hero .actions .bouton-second{display:none}
  .portes{padding-top:26px}
  .bref li{font-size:17px}
  .panneau{border-inline-start:0;border-top:1px solid var(--rule);padding-inline-start:0;padding-top:22px}
  .panneau ul{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
  .offres{grid-template-columns:1fr}
  .poles-accueil{grid-template-columns:1fr;gap:40px}
  .pole{padding-bottom:40px}
  .preuve-grille{grid-template-columns:1fr 1fr;gap:26px}
  .pied-grille{grid-template-columns:1fr;gap:28px}
  .bandeau{padding:48px 0 44px}
  .bloc{padding-top:48px;padding-bottom:48px}
  .article{padding-top:40px;padding-bottom:52px}
}
@media (max-width:620px){
  .rang{padding:0 20px}
  .bouton-petit{padding:10px 11px;letter-spacing:.06em}
  .canal{padding:24px 20px 20px}
  .index-note{grid-template-columns:1fr;gap:6px}
  .panneau ul,.cote ul{grid-template-columns:1fr}
  .preuve-grille{grid-template-columns:1fr;gap:22px}
  .preuve span{max-width:none}
  /* Sur téléphone, six onglets en ligne feraient cinq rangées : deux colonnes.
     Un intitulé long passe à la ligne dans sa colonne. */
  .onglets{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;border-bottom:0}
  .onglets a{padding:10px 0 9px;white-space:normal;font-size:11px;
             border-bottom:1px solid var(--rule);margin-bottom:0}
  .onglets a[aria-current="page"]{border-bottom:3px solid var(--turquoise)}
}

/* ---------- la lettre ---------- */
/* Une vitrine : chaque article se résume à un chiffre, ce qu'il mesure et un
   titre. La carte se lit en trois secondes, sur le site comme en capture pour
   un réseau social. */
.cartes-lettre{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px}
.carte-lettre{border:1px solid var(--rule);border-top:3px solid var(--turquoise);padding:22px 22px 20px;
              display:flex;flex-direction:column}
.carte-chiffre{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--navy);margin:0 0 8px}
.carte-libelle{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 16px}
.carte-lettre h3{font-family:var(--serif);font-size:19px;line-height:1.3;font-weight:600;margin:auto 0 0;
                 padding-top:14px;border-top:1px solid var(--rule)}
.carte-lettre h3 a{color:var(--navy);text-decoration:none}
.carte-lettre h3 a:hover{text-decoration:underline;text-decoration-color:var(--turquoise)}
.en-bref{border-inline-start:3px solid var(--turquoise);padding:6px 0 6px 18px;padding-inline-start:18px;margin:22px 0 0;max-width:46ch}
.index-chiffre{margin:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.index-chiffre strong{display:block;font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--navy)}
.offre-lettre{margin:40px 0 0;padding:28px 28px 24px;border:1px solid var(--rule);border-top:3px solid var(--turquoise)}
.offre-lettre p{font-size:16px;color:var(--ink-2);margin:0 0 6px;max-width:64ch}
.lettre-titre{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);margin:0 0 10px}