/* Polices auto-hébergées — Fraunces & Source Sans 3 (SIL Open Font License 1.1).
   Aucune requête vers un tiers : les woff2 sont servis par le site. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/source-sans-3-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   OpsNode Télécom — feuille de style unique.
   Marine #12314e (couleur OpsNode), fond blanc cassé chaud, un seul accent
   cuivre employé avec parcimonie. Pas de dégradé, pas d'ombre portée, pas
   d'animation au défilement : la hiérarchie vient du type et des filets.
   Contrastes vérifiés : marine/fond 12,6:1 · gris/fond 6,7:1 · cuivre texte
   5,4:1 · le cuivre #b5633f (4,1:1) ne sert QUE aux filets et aux chiffres
   d'au moins 28 px, jamais au texte courant.
   =========================================================================== */

:root{
  --marine:#12314e;
  --marine-clair:#294a66;
  --encre:#12314e;
  --gris:#4a5a68;          /* texte secondaire — 6,7:1 */
  --cuivre:#b5633f;        /* filets, chiffres ≥28 px, soulignés */
  --cuivre-texte:#9c5333;  /* cuivre lisible en petit — 5,4:1 */
  --fond:#faf8f4;          /* blanc cassé chaud, jamais #fff */
  --fond-creux:#f4f0e9;    /* bandes en retrait */
  --papier:#fdfcfa;
  --filet:#e2dace;         /* hairline chaude */
  --filet-fort:#cfc4b2;
  --serif:'Fraunces',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:'Source Sans 3','Helvetica Neue',Helvetica,Arial,sans-serif;
  --lg:1100px;             /* largeur de contenu */
  --gouttiere:28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

body{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.68;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--lg);margin:0 auto;padding:0 var(--gouttiere)}
@media(max-width:640px){.wrap{padding:0 16px}}

a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--filet-fort)}
a:hover{text-decoration-color:var(--cuivre);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--cuivre-texte);outline-offset:3px}
img,svg{max-width:100%;display:block}
::selection{background:#e8d9cc}

/* titres : serif de caractère, optique réglée par la taille */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--marine)}
h1{font-size:clamp(34px,5.4vw,60px);font-variation-settings:'opsz' 120}
h2{font-size:clamp(26px,3.2vw,36px);font-variation-settings:'opsz' 72}
h3{font-size:clamp(19px,1.9vw,22px);font-variation-settings:'opsz' 24;letter-spacing:-.005em}
h4{font-size:18px;font-variation-settings:'opsz' 18}

/* lien d'évitement */
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--marine);color:#fff;padding:12px 20px;text-decoration:none;font-weight:600}
.skip:focus{left:0}

/* ---------- en-tête ---------- */
.tete{border-bottom:1px solid var(--filet)}
.tete-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.marque{display:inline-flex;align-items:center;gap:13px;text-decoration:none;padding:6px 0}
.marque .mot{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--marine);letter-spacing:-.02em;font-variation-settings:'opsz' 30;line-height:1}
.marque .filet{width:1px;height:26px;background:var(--cuivre)}
.marque .div{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gris);line-height:1}
.menu{display:flex;align-items:center;gap:30px}
.menu a{font-size:16px;text-decoration:none;color:var(--gris);padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--marine);border-bottom-color:var(--filet-fort)}
.menu a[aria-current="page"]{color:var(--marine);border-bottom-color:var(--cuivre)}
.menu .lang{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
@media(max-width:880px){
  .tete-in{flex-wrap:wrap;min-height:0;padding-top:14px;padding-bottom:14px;gap:10px}
  .menu{width:100%;gap:18px;flex-wrap:wrap;border-top:1px solid var(--filet);padding-top:10px}
  .menu a{font-size:15px}
}

/* ---------- ouverture : asymétrique, 7/4 ---------- */
.ouverture{padding:92px 0 76px}
.ouverture-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:end}
.ouverture h1{max-width:17em}
.ouverture .appui{border-top:2px solid var(--cuivre);padding-top:20px}
.ouverture .appui p+p{margin-top:14px}
.ouverture .appui p{color:var(--gris);font-size:17px}
@media(max-width:900px){.ouverture{padding:56px 0 48px}.ouverture-grille{grid-template-columns:1fr;gap:34px;align-items:start}}

/* bande de faits — filets, aucune carte, aucune icône */
.faits{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);background:var(--fond-creux)}
.faits dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.faits dl>div{padding:26px 24px 28px;border-left:1px solid var(--filet)}
.faits dl>div:first-child{border-left:0;padding-left:0}
.faits dt{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:7px}
.faits dd{font-family:var(--serif);font-size:20px;color:var(--marine);line-height:1.25;font-variation-settings:'opsz' 24}
@media(max-width:820px){
  .faits dl{grid-template-columns:1fr 1fr}
  .faits dl>div{padding:20px 18px;border-top:1px solid var(--filet)}
  .faits dl>div:nth-child(odd){border-left:0;padding-left:0}
  .faits dl>div:nth-child(-n+2){border-top:0}
}
@media(max-width:460px){
  .faits dl{grid-template-columns:1fr}
  .faits dl>div{border-left:0;padding-left:0;border-top:1px solid var(--filet)}
  .faits dl>div:first-child{border-top:0}
}

/* ---------- sections ---------- */
section{padding:84px 0}
@media(max-width:700px){section{padding:54px 0}}
.creux{background:var(--fond-creux);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}

/* section à deux colonnes : titre à gauche, matière à droite */
.duo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:60px;align-items:start}
.duo>.tete-sec h2{margin-bottom:12px}
.duo .amorce{color:var(--gris);font-size:17px;max-width:30em}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:28px}}

.intertitre{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre-texte);margin-bottom:16px}

/* liste de définitions : étiquette / explication, séparées par un filet */
.liste{border-top:1px solid var(--filet)}
.liste>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding:22px 0;border-bottom:1px solid var(--filet)}
.liste dt,.liste h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--marine);line-height:1.25;font-variation-settings:'opsz' 24}
.liste dd,.liste p{color:var(--gris);font-size:17px}
@media(max-width:760px){.liste>div{grid-template-columns:1fr;gap:8px;padding:18px 0}}

/* liste à puces sobre */
.puces{list-style:none}
.puces li{position:relative;padding-left:20px;margin-top:11px;color:var(--gris)}
.puces li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--cuivre)}
.puces.serre li{margin-top:7px}

/* étapes numérotées : le chiffre devient grand (cuivre autorisé à cette taille) */
.etapes{counter-reset:e;border-top:1px solid var(--filet)}
.etapes>li{counter-increment:e;list-style:none;display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,7fr);gap:28px;padding:28px 0;border-bottom:1px solid var(--filet);align-items:start}
.etapes>li::before{content:counter(e,decimal-leading-zero);font-family:var(--serif);font-size:38px;font-weight:600;color:var(--cuivre);line-height:.9;font-variation-settings:'opsz' 48;font-variant-numeric:tabular-nums}
.etapes h3{margin-bottom:0}
.etapes p{color:var(--gris);font-size:17px}
.etapes .note{display:block;margin-top:9px;font-size:15.5px;color:var(--gris);font-style:italic}
@media(max-width:820px){
  .etapes>li{grid-template-columns:48px 1fr;gap:16px 18px;padding:22px 0}
  .etapes>li::before{font-size:28px}
  .etapes>li>div:last-child{grid-column:2}
}

/* ---------- déclaration : le second moment typographique ---------- */
.declaration{background:var(--marine);color:#fff;padding:96px 0}
.declaration p{font-family:var(--serif);font-size:clamp(27px,3.9vw,44px);line-height:1.18;letter-spacing:-.015em;max-width:26em;font-variation-settings:'opsz' 96;font-weight:600}
.declaration .suite{font-family:var(--sans);font-size:17.5px;line-height:1.66;color:#e8d9cc;max-width:40em;margin-top:26px;font-weight:400;letter-spacing:0}
@media(max-width:700px){.declaration{padding:60px 0}}

/* ---------- prise de contact ---------- */
.contact-bloc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.coord{border-top:2px solid var(--cuivre);padding-top:22px}
.coord dt{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:20px}
.coord dt:first-child{margin-top:0}
.coord dd{font-family:var(--serif);font-size:22px;margin-top:5px;font-variation-settings:'opsz' 24}
.coord dd a{text-decoration-color:var(--cuivre)}
@media(max-width:860px){.contact-bloc{grid-template-columns:1fr;gap:32px}}

/* texte courant d'une page intérieure */
.prose p+p{margin-top:16px}
.prose p{color:var(--gris);max-width:36em}
.prose p strong{color:var(--marine);font-weight:600}
.lead{font-size:20px;color:var(--marine);max-width:33em}

/* ---------- pied de page ---------- */
.pied{border-top:1px solid var(--filet);padding:36px 0 56px;font-size:15.5px;color:var(--gris)}
.pied-in{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;justify-content:space-between}
.pied nav{display:flex;flex-wrap:wrap;gap:14px 22px}
.pied a{text-decoration-color:var(--filet-fort)}

/* ---------- utilitaires de rythme (remplacent les styles en ligne :
   la CSP du site peut ainsi rester en style-src 'self') ---------- */
.service{padding:46px 0;border-top:1px solid var(--filet)}
section.suite{padding-top:0}
section.serree{padding-top:34px}
section.serree-contact{padding-top:20px}
.duo-etapes{margin-bottom:34px}
.prose.rappro{margin-top:16px}
.puces.apres{margin-top:18px}
.apres-liste{margin-top:22px;color:var(--gris)}
.titre-liste{margin-bottom:18px}
.lien-suite{margin-top:26px}