/* INTERP — feuille unique. Charte V2 : navy, bleu, or, 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)
   L or #C9A23A plafonne a 2,4:1 : jamais du texte, seulement filet, bordure
   ou puce. Les filets ont ete fonces pour rester visibles sur un fond
   entierement blanc. */

:root{
  color-scheme:light;
  --navy:#1F3864; --blue:#245E96; --gold:#C9A23A;
  --ink:#22262E; --ink-2:#464E5C; --ink-3:#5B6270;
  --ground:#FFFFFF; --surface:#FFFFFF;
  --rule:#CDD5E0; --rule-fort:#9AA8BC;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Lato",-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(--gold);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}
.bloc{padding:72px 0}
.saut{position:absolute;left:-9999px;background:var(--navy);color:#FFFFFF;
      padding:12px 20px;z-index:10}
.saut:focus{left:0;top:0}

/* Le libelle qui coiffe chaque section : filet or 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-left:14px;
          border-left:3px solid var(--gold)}
.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(--gold)}

/* ---------- bandeau d echeance ---------- */
/* Blanc, comme le reste : c est la taille du titre et le filet or 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-left:14px;
                border-left:3px solid var(--gold)}
.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(--gold);
                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-left:1px solid var(--rule);padding-left: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}

/* ---------- la preuve, juste sous le bandeau ---------- */
.preuve{background:var(--surface);border-top:3px solid var(--gold);
        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 trois offres ---------- */
/* Le fond « rule » qui traverse la grille sert de filet : l ecart d un pixel
   entre les cartes laisse voir le fond, et rien n est dessine en double. */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
        background:var(--rule);border:1px solid var(--rule)}
.offre{background:var(--surface);padding:32px 28px 28px;display:flex;flex-direction:column}
.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(--gold);
           align-self:flex-start;font-variant-numeric:tabular-nums}
.offre h3{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(--gold);
      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(--gold)}
.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(--gold);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}
.appel-actions .adresse{font-size:17px;color:var(--navy);text-decoration:none;
                        border-bottom:2px solid var(--gold);padding-bottom:3px;word-break:break-word}
.appel-actions .adresse:hover{color:var(--blue)}
.appel-actions .tel{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- article ---------- */
.article{padding:56px 0 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(--gold);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(--gold)}

.prose{max-width:68ch}
.prose h2{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--navy);
          border-left:3px solid var(--gold);padding-left: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-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left: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:left;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}

/* Les gens : ce que l acheteur ouvre en deuxieme, apres la page de service. */
.equipe{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
        background:var(--rule);border:1px solid var(--rule);margin:26px 0 8px}
.equipe > div{background:var(--surface);padding:24px 26px}
.equipe .nom{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);margin:0 0 4px}
.equipe .role{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
              color:var(--ink-3);margin:0 0 12px}
.equipe .bio{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0}

/* ---------- 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(--gold)}
.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{grid-template-columns:1fr;gap:34px}
  .panneau{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:22px}
  .panneau ul{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
  .offres,.equipe{grid-template-columns:1fr}
  .preuve-grille{grid-template-columns:1fr 1fr;gap:26px}
  .pied-grille{grid-template-columns:1fr;gap:28px}
  .bandeau{padding:48px 0 44px}
  .bloc{padding:48px 0}
  .article{padding:40px 0 52px}
}
@media (max-width:620px){
  .rang{padding:0 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}
}