/* Police auto-hébergée — Inter (SIL Open Font License 1.1), la même que opsnode.ca et Cadence.
   Aucune requête vers un tiers : les woff2 sont servis par le site. */
@font-face{
  font-family:'Inter var';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/InterVariable.woff2') format('woff2');
}
/* ===========================================================================
   DEV par OpsNode — feuille de style unique.
   Copie conforme de telecom.css (même ossature, mêmes classes), au seul accent
   près : la division DEV porte le sarcelle là où Télécom porte le cuivre. Tout
   le reste — marine #12314e, fond #f6f9fc, filets #e5ecf2, Inter — vient
   d'opsnode.ca et ne change pas d'une division à l'autre.
   Contrastes vérifiés sur le fond : marine 12,6:1 · gris 6,7:1 ·
   sarcelle-texte #0a6a60 6,1:1 · sarcelle #1f9e8d 3,1:1 — celui-là ne sert
   QU'aux filets, aux gros chiffres et au pictogramme, jamais au texte courant.
   =========================================================================== */

:root{
  --marine:#12314e;
  --marine-clair:#294a66;
  --encre:#12314e;
  --gris:#54646f;          /* texte secondaire — celui d'opsnode.ca */
  --sarcelle:#1f9e8d;      /* filets, chiffres ≥28 px, soulignés */
  --sarcelle-texte:#0a6a60;/* sarcelle lisible en petit — 6,1:1 */
  --fond:#f6f9fc;          /* le fond d'opsnode.ca et de Cadence */
  --fond-creux:#ffffff;    /* bandes en retrait (blanc, comme .alt chez Cadence) */
  --papier:#ffffff;
  --filet:#e5ecf2;         /* hairline de la maison */
  --filet-fort:#cfdce7;
  --serif:'Inter var',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;  /* titres : Inter, comme partout */
  --sans:'Inter var',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,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:17px;
  line-height:1.62;
  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(--sarcelle);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sarcelle-texte);outline-offset:3px}
img,svg{max-width:100%;display:block}
::selection{background:#D5E8F0}

/* titres : Inter grasse, comme opsnode.ca et Cadence */
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--marine)}
h1{font-size:clamp(34px,5.4vw,60px)}
h2{font-size:clamp(26px,3.2vw,36px)}
h3{font-size:clamp(19px,1.9vw,22px);letter-spacing:-.005em}
h4{font-size:18px}

/* 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 svg{width:32px;height:32px;flex:none}
.marque .mot{font-family:var(--serif);font-size:22px;font-weight:800;color:var(--marine);letter-spacing:-.02em;line-height:1}
.marque .filet{width:1px;height:26px;background:var(--sarcelle)}
.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(--sarcelle)}
.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(--sarcelle);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}
@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(--sarcelle-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}
.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(--sarcelle)}
.puces.serre li{margin-top:7px}

/* étapes numérotées : le chiffre devient grand (sarcelle 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(--sarcelle);line-height:.9;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-weight:600}
.declaration .suite{font-family:var(--sans);font-size:17.5px;line-height:1.66;color:#cfe4e0;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(--sarcelle);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}
.coord dd a{text-decoration-color:var(--sarcelle)}
@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}

/* ---------- pages légales (confidentialité, conditions) ---------- */
.legal{max-width:720px}
.legal h2{font-size:clamp(21px,2.4vw,25px);margin:40px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p+p{margin-top:12px}

/* ===========================================================================
   Mise en scène (2026-10-06, demande JF : « aussi bien monté que Cadence »)
   En-tête qui suit le défilement, bandeau marine en tête de chaque page, et sur
   l'accueil un exemple d'intégration dans un cadre — l'équivalent des captures
   de Cadence. Aplats seulement : marine plein, sarcelle en filet.
   =========================================================================== */
.tete{position:sticky;top:0;z-index:60;background:rgba(246,249,252,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media(max-width:880px){
  .menu{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
}

.ouverture{background:var(--marine);color:#fff;padding:84px 0 76px;border-bottom:3px solid var(--sarcelle)}
.ouverture h1{color:#fff}
.ouverture .appui{border-top-color:var(--sarcelle)}
.ouverture .appui p{color:#d6e3ef}
.ouverture a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.ouverture :focus-visible{outline-color:#fff}

/* accueil : texte à gauche, exemple de plan d'appels à droite */
.ouverture-accueil .ouverture-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:56px}
.ouverture-accueil h1{font-size:clamp(32px,4.4vw,52px)}
.ouverture-accueil .appui{margin-top:26px;max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none}
.bouton-plein{background:#fff;color:var(--marine)}
.bouton-plein:hover{background:#eef3f7}
.bouton-trait{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.bouton-trait:hover{border-color:#fff}
.ouverture .bouton{text-decoration:none}
.ouverture .bouton-plein{color:var(--marine)}

.plan{background:#fff;color:var(--encre);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.plan-barre{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#eef3f7;border-bottom:1px solid var(--filet);font-size:13px;color:var(--gris)}
.plan-barre i{width:9px;height:9px;border-radius:50%;background:#cfdce7;display:inline-block}
.plan-barre span{margin-left:6px}
.livrables{list-style:none;margin:0;padding:14px 20px 12px}
.livrables li{padding:13px 0;border-top:1px solid var(--filet)}
.livrables li:first-child{border-top:0;padding-top:4px}
.livrables .dom{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sarcelle-texte);margin-bottom:5px}
.livrables b{display:block;color:var(--marine);font-size:15.5px;line-height:1.3}
.livrables small{display:block;color:var(--gris);font-size:14px;line-height:1.45;margin-top:3px}
.plan-pied{padding:10px 20px 14px;font-size:12.5px;color:var(--gris);border-top:1px solid var(--filet)}
@media(max-width:900px){.ouverture-accueil .ouverture-grille{grid-template-columns:1fr;gap:40px}}

/* ancres : l'en-tête colle en haut, une cible d'ancre doit donc se poser
   SOUS lui — sinon le titre visé passe derrière la barre (site d'une seule
   page : tout le menu est fait d'ancres). */
main [id]{scroll-margin-top:104px}
@media(max-width:880px){main [id]{scroll-margin-top:124px}}

/* ---------- condition d'admissibilité : l'encadré qui doit être lu ----------
   DEV ne prend pas de nouveaux clients. La condition n'est pas une mention en
   bas de page : elle a son bloc, sur fond blanc, filet sarcelle épais. */
.condition{background:var(--papier);border:1px solid var(--filet);border-top:3px solid var(--sarcelle);border-radius:12px;padding:30px 32px}
.condition h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:12px}
.condition p{color:var(--gris)}
.condition p+p{margin-top:12px}
.condition .pourquoi{border-top:1px solid var(--filet);margin-top:20px;padding-top:18px;font-size:16px}
.condition strong{color:var(--marine);font-weight:600}
@media(max-width:700px){.condition{padding:24px 20px}}

/* plaque d'admissibilité dans le bandeau d'ouverture */
.plaque{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.28);border-left:3px solid var(--sarcelle);border-radius:8px;padding:9px 15px;font-size:15px;color:#d6e3ef;margin-bottom:22px}
.plaque b{color:#fff;font-weight:600}
@media(max-width:600px){.plaque{align-items:flex-start}}