/* ============================================================================
   SOWILO NETWORK — feuille de style commune
   ----------------------------------------------------------------------------
   Une seule feuille pour l'ensemble du site. Chargée par toutes les pages.

   Direction : base claire éditoriale, ponctuée de sections sombres immersives.
   Le clair porte le discours commercial, le sombre porte la démonstration
   technique. L'alternance des deux donne le rythme de la page.

   SOMMAIRE
     01. Jetons de marque          09. Bandeau secteurs
     02. Polices                   10. Sections
     03. Base                      11. Principes
     04. Utilitaires               12. Capacités
     05. Apparitions au défilement 13. Socle technique
     06. Boutons                   14. Agences
     07. En-tête                   15. Avis
     08. Héros                     16. Pied de page & formulaire
                                   17. Pictogrammes
                                   18. États « maquette »
                                   19. Pages intérieures
                                   20. Responsive
                                   21. Pages légales
                                   22. Bandeau cookies
                                   23. Page 404
   ========================================================================= */


/* ============================================================================
   01. JETONS DE MARQUE
   Seul bloc à modifier pour faire évoluer l'identité.
   Aucune couleur ni police en dur ailleurs dans la feuille.
   ========================================================================= */
:root{

  /* --- Rouge de marque, désaturé -------------------------------------------
     Le #D20000 du logo reste la couleur de l'enseigne. Sur un écran, étalé
     sur des liens et des aplats, ce rouge pur vibre et fatigue. On garde la
     teinte, avec moins de saturation et un ton plus profond : la parenté
     visuelle est conservée, l'agressivité tombe. */
  --rouge:        #B23A31;   /* brique — actions, accents */
  --rouge-deep:   #8E2A23;   /* survol */
  --rouge-soft:   #F7EEEC;   /* fond très clair, légèrement chaud */
  --rouge-pur:    #D20000;   /* réservé au logo */

  --ardoise:      #546373;   /* gris-bleu du logo */
  --ardoise-soft: #EEF1F3;

  /* --- Accent technique ----------------------------------------------------
     Vert d'eau emprunté au vocabulaire des consoles de supervision : il
     signale un état sain. RÉSERVÉ AUX FONDS SOMBRES — 9,9:1 sur --ink,
     mais 1,7:1 sur blanc. Ne jamais l'employer sur fond clair.
     Il ne remplace pas le rouge : le rouge appelle à l'action, le vert
     d'eau ne fait que qualifier un état. */
  --signal:       #4FD1C5;
  --signal-dim:   rgba(79,209,197,.14);
  --alerte:       #E8A33D;   /* état intermédiaire, fond sombre uniquement */

  /* --- Neutres réchauffés : gris-bleu plutôt que noir -----------------------
     Les sections sombres descendent plus bas que dans la version précédente
     (#232E3A → #101822). Le contraste avec le blanc de la page se creuse,
     et les blocs sombres cessent d'être des « gris foncé » pour devenir
     des ruptures franches. */
  --ink:          #101822;   /* fond des sections sombres */
  --ink-2:        #18222E;   /* survol sur fond sombre */
  --ink-3:        #212D3B;   /* bordure interne sur fond sombre */
  --slate:        #5F6C7E;   /* texte courant — 5,3:1 sur blanc (WCAG AA).
                                Sur --ink il ne vaut que 3,4:1 : ne pas
                                l'employer sur fond sombre, prendre --slate-lo. */
  --slate-mid:    #8A96A6;   /* fond sombre — 6,1:1 sur --ink. Textes indicatifs
                                des champs : distinct du blanc d'une vraie saisie,
                                mais toujours lisible. */
  --slate-lo:     #A3AEBC;   /* UNIQUEMENT sur fond sombre — 8,9:1 sur --ink.
                                Sur fond clair il tombe à 2,3:1 : proscrit. */
  --line:         #E6E9ED;
  --line-dk:      rgba(255,255,255,.13);
  --mist:         #F6F8F9;
  --paper:        #FFFFFF;

  /* --- Polices -------------------------------------------------------------
     Isidora (fonderie Latinotype) est la police commerciale de la marque.
     Le site en production déclare « Isodora Medium » : c'est une coquille,
     la police s'appelle Isidora. Le nom correct est donc en tête, l'ancien
     conservé en second pour les postes où la variante mal nommée existe.
     Sans @font-face servi par le serveur, le rendu bascule sur Montserrat. */
  --font:         'Isidora','Isodora Medium','Montserrat',Arial,Tahoma,sans-serif;
  --font-display: 'Isidora','Isodora Medium','Montserrat',Arial,Tahoma,sans-serif;
  --mono:         'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* --- Trame ---------------------------------------------------------------  */
  --max: 1240px;
  --gut: 24px;

  /* --- Mouvement -----------------------------------------------------------
     Une seule courbe pour tout le site : décélération franche, sans rebond.
     Le rebond fait « animation » ; la décélération fait « matériel ». */
  --ease: cubic-bezier(.16,1,.3,1);

  /* --- Élévations ----------------------------------------------------------
     Ombres portées froides plutôt que noires : sur un fond blanc cassé,
     une ombre neutre grise paraît sale. */
  --sh-1: 0 1px 2px rgba(16,24,34,.05), 0 4px 14px rgba(16,24,34,.05);
  --sh-2: 0 2px 6px rgba(16,24,34,.07), 0 18px 46px rgba(16,24,34,.10);
  --sh-3: 0 10px 30px rgba(16,24,34,.13), 0 40px 90px rgba(16,24,34,.16);
}


/* ============================================================================
   02. POLICES
   Hébergées sur le site (assets/fonts) plutôt que chargées depuis Google :
   aucune adresse IP de visiteur n'est transmise à un tiers pour afficher
   le texte. Chemins relatifs à cette feuille (assets/css → assets/fonts).
   ========================================================================= */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/montserrat-v31-latin_latin-ext-300.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');
}

/* ----------------------------------------------------------------------------
   POLICE PROPRIÉTAIRE
   À activer une fois la licence webfont Isidora vérifiée et les fichiers
   déposés sur le serveur. Tant que ce bloc est commenté, Montserrat prend
   le relais sans que rien d'autre ne bouge.
   ----------------------------------------------------------------------------
@font-face{
  font-family:'Isidora';
  src:url('/assets/fonts/isidora-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Isidora';
  src:url('/assets/fonts/isidora-semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
   ========================================================================= */


/* ============================================================================
   03. BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Le décalage évite qu'une ancre place son titre sous l'en-tête collant. */
:target{scroll-margin-top:110px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2.5px solid var(--rouge);outline-offset:4px;border-radius:3px}
.on-dark :focus-visible,
.sec-dark :focus-visible{outline-color:var(--signal)}

::selection{background:var(--rouge);color:#fff}

h1,h2,h3{
  font-family:var(--font-display);
  margin:0;
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.04;
  text-wrap:balance;
}
/* Le plafond est volontairement contenu : au-delà, le titre du héros passe
   à quatre lignes dans sa colonne et écrase tout le reste du bloc. */
h1{font-size:clamp(42px,6.4vw,78px);letter-spacing:-.04em}
h2{font-size:clamp(33px,4.8vw,60px);line-height:1.05;letter-spacing:-.034em}
h3{font-size:20px;font-weight:600;letter-spacing:-.018em;line-height:1.25}


/* ============================================================================
   04. UTILITAIRES
   ========================================================================= */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* Réservé aux lecteurs d'écran. */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Lien d'évitement : hors écran jusqu'à ce qu'il reçoive le focus clavier. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:13px 22px;
  font-size:15px;font-weight:600;text-decoration:none;
}
.skip:focus{left:8px;top:8px;border-radius:3px}

/* Étiquette de section. Le carré plein qui la précède rappelle le pixel :
   c'est le seul ornement récurrent du site. */
.kick{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--slate);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
}
.kick::before{content:"";width:6px;height:6px;background:var(--ardoise);flex-shrink:0}
.on-dark .kick{color:var(--slate-lo)}
.on-dark .kick::before{background:var(--signal);box-shadow:0 0 0 4px var(--signal-dim)}

.lede{font-size:clamp(17px,1.35vw,19.5px);color:var(--slate);line-height:1.6;max-width:38em}
.on-dark .lede{color:var(--slate-lo)}

/* Filet décoratif : dégradé qui s'éteint, plutôt qu'un trait net. */
.rule{height:1px;border:0;background:linear-gradient(90deg,var(--line),transparent)}
.on-dark .rule{background:linear-gradient(90deg,var(--line-dk),transparent)}


/* ============================================================================
   05. APPARITIONS AU DÉFILEMENT
   ----------------------------------------------------------------------------
   Le masquage n'est appliqué QUE si la classe .js est posée sur <html> par
   le script en tête de page. Sans JavaScript, ou si le script échoue, rien
   n'est jamais caché : le contenu reste lisible en toutes circonstances.
   ========================================================================= */
html.js .rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
html.js .rv.in{opacity:1;transform:none}

/* Décalages en cascade pour les grilles : l'œil suit l'ordre de lecture. */
html.js .rv-d1{transition-delay:.08s}
html.js .rv-d2{transition-delay:.16s}
html.js .rv-d3{transition-delay:.24s}
html.js .rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
}


/* ============================================================================
   06. BOUTONS
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-size:15px;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;
  padding:16px 28px;border-radius:3px;
  transition:background .18s,color .18s,border-color .18s,box-shadow .22s var(--ease),transform .22s var(--ease);
}
.btn svg{transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn-red{background:var(--rouge);color:#fff;box-shadow:0 1px 2px rgba(142,42,35,.28)}
.btn-red:hover{background:var(--rouge-deep);box-shadow:0 6px 20px rgba(142,42,35,.30);transform:translateY(-1px)}

.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--ink);background:var(--mist)}
.on-dark .btn-line{color:#fff;border-color:var(--line-dk)}
.on-dark .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}


/* ============================================================================
   07. EN-TÊTE
   ----------------------------------------------------------------------------
   Deux étages : une barre de service en mono qui pose le contexte
   d'exploitation, puis la barre de navigation. La barre de service disparaît
   dès qu'on défile — elle informe à l'arrivée, elle n'a pas à occuper
   l'écran ensuite.
   ========================================================================= */
/* Non collante, contrairement à l'en-tête : elle défile et disparaît d'elle-même
   dès les premiers pixels. Elle informe à l'arrivée, puis cède la place. */
.topbar{
  background:var(--ink);color:var(--slate-lo);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  overflow:hidden;height:36px;
}
.topbar-in{display:flex;align-items:center;gap:26px;height:36px;flex-wrap:nowrap}
.topbar b{font-weight:400;color:#fff}
.topbar-sep{margin-left:auto}
.topbar a{text-decoration:none;color:var(--slate-lo);transition:color .18s}
.topbar a:hover{color:#fff}

/* Pastille d'état : le seul élément animé en continu de la page.
   Coupée par prefers-reduced-motion via la règle globale de la section 03. */
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--signal);
  display:inline-block;flex-shrink:0;margin-right:9px;
  box-shadow:0 0 0 0 rgba(79,209,197,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 rgba(79,209,197,.5)}
  70% {box-shadow:0 0 0 7px rgba(79,209,197,0)}
  100%{box-shadow:0 0 0 0 rgba(79,209,197,0)}
}

.hdr{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background .3s;
}
.hdr-in{display:flex;align-items:center;gap:34px;height:80px;transition:height .3s var(--ease)}
.logo{flex-shrink:0}
.logo img{height:40px;width:auto;transition:height .3s var(--ease)}

/* État défilé, posé par le script. */
.hdr.stuck{box-shadow:var(--sh-1);background:rgba(255,255,255,.94)}
.hdr.stuck .hdr-in{height:64px}
.hdr.stuck .logo img{height:33px}

.nav{display:flex;gap:30px;margin-left:auto}
.nav a{
  position:relative;text-decoration:none;font-size:15px;font-weight:500;
  color:var(--ink);padding:6px 0;
}
/* Le soulignement pousse depuis la gauche plutôt que d'apparaître d'un bloc. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--rouge);transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--rouge)}

.hdr-side{display:flex;align-items:center;gap:18px;flex-shrink:0}

/* Bouton d'appel à l'action replié dans le menu.
   Masqué par défaut : il ne se montre que sur les écrans où .hdr-side a
   disparu, pour ne jamais présenter deux fois la même action. */
.nav-cta{display:none}
.hdr-tels{display:flex;gap:18px}
.hdr-tel{
  font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--ink);
  line-height:1.3;white-space:nowrap;display:flex;flex-direction:column;gap:2px;
  transition:color .18s;
}
.hdr-tel span{
  font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);
}
.hdr-tel:hover{color:var(--rouge)}

/* Deux numéros plus le bouton saturent la barre : on les replie tôt.
   Ils restent joignables par le menu, la barre de service et le pied de page. */
@media (max-width:1200px){ .hdr-tels{display:none} }

.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:3px;padding:11px 13px;cursor:pointer;transition:border-color .18s;
}
.burger:hover{border-color:var(--ink)}
.burger span{
  display:block;width:19px;height:1.5px;background:var(--ink);margin:4.5px 0;
  transition:transform .28s var(--ease),opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}


/* ============================================================================
   08. HÉROS
   ========================================================================= */
/* isolation:isolate confine le z-index négatif des décors à l'intérieur du
   héros. Sans lui, un enfant en z-index:-1 remonterait au-dessus du fond de
   la page mais sous des éléments frères imprévus, et le rendu deviendrait
   dépendant de l'ordre du document. */
.hero{padding:104px 0 0;position:relative;overflow:hidden;isolation:isolate}

/* Halo ardoise, en haut à droite. */
.hero::before{
  content:"";position:absolute;top:-360px;right:-280px;width:960px;height:960px;
  background:radial-gradient(circle,var(--ardoise-soft) 0%,transparent 62%);
  opacity:.95;pointer-events:none;z-index:-1;
}
/* Halo brique, en bas à gauche : réchauffe le milieu du bloc.
   Il est tenu à distance de la rangée de tuiles — débordant dessus, il y
   posait un voile rosé sur la première colonne seulement, et la rangée
   n'était plus d'une seule teinte. */
.hero::after{
  content:"";position:absolute;top:180px;left:-420px;width:760px;height:760px;
  background:radial-gradient(circle,var(--rouge-soft) 0%,transparent 58%);
  opacity:.6;pointer-events:none;z-index:-1;
}

/* Trame technique, très atténuée, effacée par un masque radial en descendant. */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(84,99,115,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,99,115,.10) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 8%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 8%,#000 0%,transparent 72%);
}

/* --- Topologie de fond ------------------------------------------------
   Vient enrichir le fond du héros sans devenir un second élément de
   contenu à côté du texte : toujours en retrait (z-index:-1), à faible
   opacité, hors de la colonne de lecture. Purement schématique — aucun
   chiffre, aucune donnée présentée comme mesurée ou en temps réel, dans
   le même esprit que le bandeau « Périmètre » des pages de service. */
.hero-illus{
  position:absolute;top:-30px;right:-70px;width:520px;max-width:44vw;
  height:auto;opacity:.5;pointer-events:none;z-index:-1;
}
.hero-illus.is-compact{width:380px;top:-6px;right:-40px;opacity:.42}
.hero-illus .hi-line{
  fill:none;stroke:var(--ardoise);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:5 7;opacity:.55;
  animation:hiFlow 8s linear infinite;
}
.hero-illus .hi-node{fill:var(--paper);stroke:var(--ardoise);stroke-width:1.4}
.hero-illus .hi-hub{fill:var(--rouge-soft);stroke:var(--rouge);stroke-width:1.6}
.hero-illus .hi-pulse{
  fill:var(--rouge);transform-box:fill-box;transform-origin:center;
  animation:hiPulse 3.2s var(--ease) infinite;
}
.hero-illus .hi-pulse.d1{animation-delay:.6s}
.hero-illus .hi-pulse.d2{animation-delay:1.2s}
@keyframes hiFlow{to{stroke-dashoffset:-24}}
@keyframes hiPulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%     {opacity:1;  transform:scale(1.5)}
}
@media (max-width:1080px){.hero-illus{display:none}}

/* --- Entrée du héros ------------------------------------------------------
   Animation CSS pure, déclenchée au premier rendu, et NON le mécanisme .rv
   du reste de la page : celui-ci masque jusqu'à ce que JavaScript s'exécute,
   ce qui provoquerait un clignotement en haut de page.
   Le h1 et son chapeau sont volontairement exclus : ce sont eux que le
   navigateur mesure pour le LCP, et un élément en opacity:0 n'est pas
   considéré comme peint. Les animer retarderait la métrique d'autant. */
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}
.hero-txt .kick{animation:rise .7s var(--ease) both}
.hero-act     {animation:rise .7s var(--ease) .10s both}
.hero-meta    {animation:rise .7s var(--ease) .18s both}

@media (prefers-reduced-motion:reduce){
  .hero-txt .kick,.hero-act,.hero-meta{animation:none}
}

/* Colonne unique : le héros porte tout son poids sur le discours. La
   topologie de fond (.hero-illus) n'introduit pas de second élément de
   contenu à côté du texte — elle reste une texture d'arrière-plan. */
.hero-in{position:relative}
.hero-txt{min-width:0;max-width:52em}
.hero h1{max-width:16ch}
.hero h1 b{font-weight:400;color:var(--rouge)}
.hero-sub{margin-top:30px;max-width:44ch;font-size:clamp(17px,1.4vw,20px);color:var(--slate);line-height:1.55}
.hero-act{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}

/* Rangée de chiffres clés : élargie par un espacement plus généreux entre
   les colonnes plutôt que par une police plus grande, pour que le bloc
   occupe davantage la largeur du héros sans devenir criard. */
.hero-meta{
  margin-top:46px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;gap:clamp(40px,6vw,84px);flex-wrap:wrap;
}
.hero-meta div{display:flex;flex-direction:column;gap:5px}
.hero-meta b{
  font-family:var(--font-display);font-size:clamp(29px,2.8vw,38px);font-weight:400;
  letter-spacing:-.032em;line-height:1;white-space:nowrap;
}
.hero-meta span{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}


/* --- Tuiles d'accès rapide ---------------------------------------------- */
.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);margin-top:92px;position:relative;
  perspective:1000px;
}
.tile{
  padding:36px 30px 34px;text-decoration:none;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:216px;position:relative;
  transition:background .24s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
  transform-origin:bottom center;
}
.tile:last-child{border-right:0}
/* Le filet rouge se déploie depuis la gauche sur toute la largeur de la tuile. */
.tile::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:var(--rouge);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.tile:hover{background:var(--mist);transform:translateY(-6px) rotateX(3deg);box-shadow:var(--sh-2)}
.tile:hover::before{transform:scaleX(1)}
.tile-n{
  font-family:var(--mono);font-size:11px;color:var(--slate);
  letter-spacing:.14em;margin-bottom:20px;
}
.tile h3{margin-bottom:10px}
.tile p{font-size:14.5px;color:var(--slate);line-height:1.5;flex:1}
.tile-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:13.5px;font-weight:600;color:var(--rouge);
}
.tile-go svg{transition:transform .22s var(--ease)}
.tile:hover .tile-go svg{transform:translateX(4px)}


/* ============================================================================
   09. BANDEAU SECTEURS
   ----------------------------------------------------------------------------
   Défilement continu. Le duplicata nécessaire à la boucle est ajouté par le
   script et marqué aria-hidden : répété, il ne serait que du bruit pour un
   lecteur d'écran. Pas de bouton de mise en pause dédié : le survol à la
   souris interrompt le mouvement, et prefers-reduced-motion le coupe
   d'emblée pour qui l'a demandé au niveau du système. Un visiteur au clavier
   ou au doigt n'a en revanche aucun moyen de l'arrêter — c'est un choix
   assumé pour un défilement purement décoratif, mais à revoir s'il devait
   un jour porter de l'information qu'on ne veut pas manquer.
   ========================================================================= */
.sect{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;overflow:hidden;background:var(--paper);position:relative;
}
.sect-vp{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
/* L'espacement passe par un padding sur chaque élément, jamais par `gap`.
   Avec `gap`, la moitié dupliquée n'est pas exactement la moitié de la
   largeur totale — il manque une gouttière — et la translation de -50 %
   produit un léger saut à chaque tour de boucle. */
.sect-in{
  display:flex;white-space:nowrap;width:max-content;
  animation:slide 46s linear infinite;
}
.sect-vp:hover .sect-in{animation-play-state:paused}
.sect-in span{
  display:block;padding-right:46px;
  font-family:var(--mono);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--slate);
}
@keyframes slide{to{transform:translateX(-50%)}}


/* ============================================================================
   10. SECTIONS
   ========================================================================= */
.sec{padding:132px 0;position:relative}
.sec-mist{background:var(--mist)}

/* Section sombre : fond profond, trame technique et halo froid.
   La trame est portée par ::before pour rester derrière le contenu. */
.sec-dark{background:var(--ink);color:#fff;overflow:hidden}
.sec-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 20% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 20% 0%,#000 0%,transparent 70%);
}
.sec-dark::after{
  content:"";position:absolute;top:-260px;right:-180px;width:760px;height:760px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(79,209,197,.09) 0%,transparent 62%);
}
.sec-dark > .wrap{position:relative;z-index:1}

.sec-head{margin-bottom:68px}
.sec-head h2{max-width:20ch}          /* 20 caractères À LA TAILLE DU TITRE */
.sec-head.wide h2{max-width:26ch}
.sec-head .lede{margin-top:22px;max-width:46ch}

/* Césure manuelle : uniquement là où la largeur la rend pertinente. */
.sec-head h2 .brk{display:none}
@media (min-width:1000px){ .sec-head h2 .brk{display:inline} }


/* ============================================================================
   11. PRINCIPES (trois colonnes, fond sombre)
   ========================================================================= */
.prin{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dk);perspective:1000px}
.prin article{
  padding:38px 34px 0 0;border-right:1px solid var(--line-dk);position:relative;
  transition:transform .32s var(--ease);transform-origin:bottom center;
}
.prin article:hover{transform:translateY(-6px) rotateX(3deg)}
.prin article:hover .pic{transform:scale(1.08) rotate(-6deg)}
.prin article:last-child{border-right:0;padding-right:0}
.prin article:not(:first-child){padding-left:34px}
/* Repère chiffré : le lecteur situe l'étape sans avoir à compter. */
.prin-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--signal);display:block;margin-bottom:22px;
}
.prin h3{margin-bottom:14px}
.prin p{font-size:15.5px;color:var(--slate-lo);line-height:1.6}


/* ============================================================================
   12. CAPACITÉS (lignes cliquables)
   ========================================================================= */
.caps{border-top:1px solid var(--line)}
.cap{
  display:grid;grid-template-columns:.9fr 1.6fr auto;gap:32px;align-items:baseline;
  padding:34px 0;border-bottom:1px solid var(--line);text-decoration:none;
  position:relative;isolation:isolate;transition:padding-left .28s var(--ease);
}
/* Aplat qui se déplie derrière la ligne : le survol devient une zone, pas
   seulement un changement de couleur de titre. isolation:isolate sur .cap
   garde ce z-index:-1 confiné : il passe derrière le texte de la ligne,
   sans jamais descendre sous le fond de la section. */
.cap::before{
  content:"";position:absolute;top:0;bottom:0;left:-24px;right:-24px;
  background:var(--mist);opacity:0;transition:opacity .26s var(--ease);z-index:-1;
}
.cap:hover{padding-left:18px}
.cap:hover::before{opacity:1}
.cap h3{font-size:24px;font-weight:500;letter-spacing:-.024em;transition:color .2s}
.cap:hover h3{color:var(--rouge)}
.cap p{font-size:15.5px;color:var(--slate);line-height:1.55}
.cap-go{color:var(--rouge);display:flex;align-items:center}
.cap-go svg{transition:transform .22s var(--ease)}
.cap:hover .cap-go svg{transform:translateX(5px)}


/* ============================================================================
   13. SOCLE TECHNIQUE
   Grille en 1 px de gouttière : les filets sont le fond qui transparaît.
   ========================================================================= */
.tech{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);perspective:1000px;
}
/* Variante à 5 colonnes (page d'accueil : Collaboratif, Sauvegarde,
   Virtualisation, Sécurité des postes, Télécoms). Padding et police
   légèrement réduits pour que chaque intitulé tienne sur une seule ligne :
   sans ça, une colonne dont le dernier élément passe à la ligne rompt
   l'alignement des filets horizontaux avec les quatre autres. */
.tech.tech-5{grid-template-columns:repeat(5,1fr)}
.tech.tech-5 .tech-col{padding:24px 18px 26px}
.tech.tech-5 .tech-col h3{font-size:10.5px}
.tech.tech-5 .tech-col li{font-size:13.5px;padding:7px 0}
.tech-col{
  background:var(--paper);padding:28px 24px 30px;position:relative;z-index:0;
  transition:background .22s,transform .32s var(--ease),box-shadow .32s var(--ease);
  transform-origin:bottom center;
}
.tech-col:hover{background:#fff;transform:translateY(-5px) rotateX(2.5deg);box-shadow:var(--sh-1);z-index:1}
.tech-col h3{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-bottom:18px;
}
.tech-col li{
  font-size:15px;font-weight:500;padding:8px 0;border-bottom:1px solid var(--line);
}
.tech-col li:last-child{border-bottom:0}


/* ============================================================================
   14. AGENCES
   ========================================================================= */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.ag article{background:var(--paper);display:flex;flex-direction:column}

/* Bandeau supérieur : à remplacer par la photo d'agence.
   1200 × 600 px, WebP ou JPEG < 150 Ko.
   La réserve est volontairement sombre, dans le même registre que les autres
   sections dark du site. Un dégradé pâle donnait l'impression d'une image
   qui n'a pas chargé ; un aplat assumé se lit comme un parti pris. */
.ag-visu{
  height:168px;position:relative;overflow:hidden;background:var(--ink);
}
.ag-visu::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 120% at 15% 100%,rgba(79,209,197,.16),transparent 62%),
             radial-gradient(ellipse 70% 100% at 95% 0%,rgba(178,58,49,.22),transparent 60%);
}
/* Carte de France schématique (silhouette à facettes, pas un tracé
   géographique précis) en fond de bandeau, avec un repère qui pulse à
   l'emplacement approximatif de l'agence. Purement évocateur — aucune
   donnée de géolocalisation exacte ni mesure en temps réel. */
.ag-map{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ag-fr{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.24);stroke-width:1.6;stroke-linejoin:round}
.ag-pin{fill:var(--rouge)}
.ag-pin-halo{
  fill:none;stroke:var(--rouge);stroke-width:1.5;opacity:.6;
  transform-box:fill-box;transform-origin:center;
  animation:agPulse 2.6s var(--ease) infinite;
}
.ag-pin-dot{fill:var(--ink)}
@keyframes agPulse{
  0%  {transform:scale(.6);opacity:.6}
  70% {transform:scale(2.1);opacity:0}
  100%{transform:scale(2.1);opacity:0}
}
.ag-tag{
  position:absolute;left:20px;bottom:16px;z-index:1;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(255,255,255,.10);color:#fff;padding:6px 11px;border-radius:3px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ag-body{padding:32px 34px 34px;flex:1;display:flex;flex-direction:column}
.ag h3{font-size:28px;font-weight:400;letter-spacing:-.03em;margin-bottom:8px}
.ag-nap{font-family:var(--mono);font-size:13px;color:var(--slate);margin-bottom:18px;line-height:1.6}
.ag p{font-size:15.5px;color:var(--slate);line-height:1.58}
.ag-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;
  font-size:14.5px;font-weight:600;color:var(--rouge);text-decoration:none;
}
.ag-go svg{transition:transform .22s var(--ease)}
.ag-go:hover svg{transform:translateX(4px)}


/* ============================================================================
   15. AVIS
   ========================================================================= */
.rev-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:44px;
}
.rev-sc{display:flex;align-items:baseline;gap:14px}
.rev-sc b{font-family:var(--font-display);font-size:58px;font-weight:400;letter-spacing:-.04em;line-height:1}
.rev-sc span{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.rev-nav{display:flex;gap:8px}
.rev-b{
  width:48px;height:48px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:3px;transition:border-color .18s,background .18s;
}
.rev-b:hover{border-color:var(--ink);background:#fff}

.rev-vp{overflow:hidden}
.rev-tr{display:flex;gap:1px;transition:transform .55s var(--ease)}
.rev-c{
  flex:0 0 calc((100% - 2px)/3);background:var(--paper);border:1px solid var(--line);
  padding:32px 28px 26px;display:flex;flex-direction:column;margin-right:-1px;position:relative;
}
/* Guillemet ouvrant en filigrane, purement décoratif. */
.rev-c::before{
  content:"“";position:absolute;top:6px;right:20px;
  font-family:var(--font-display);font-size:76px;line-height:1;
  color:var(--line);pointer-events:none;
}
.rev-q{font-size:16px;line-height:1.62;color:var(--ink);flex:1;position:relative}
.rev-w{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.rev-w b{font-size:14.5px;font-weight:600}
.rev-w span{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.rev-dots{display:flex;gap:6px;justify-content:center;margin-top:34px}
.rev-d{
  width:26px;height:2px;background:var(--line);border:0;padding:0;cursor:pointer;
  transition:background .22s;
}
.rev-d[aria-current="true"]{background:var(--rouge)}


/* ============================================================================
   16. PIED DE PAGE & FORMULAIRE
   ========================================================================= */
.ft{
  background:var(--ink);color:var(--slate-lo);padding:0 0 32px;font-size:15px;
  position:relative;overflow:hidden;
}
.ft::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 80% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 80% 0%,#000 0%,transparent 72%);
}
.ft > .wrap{position:relative;z-index:1}

.ft-cta{padding:108px 0;border-bottom:1px solid var(--line-dk)}
.ft-cta h2{color:#fff;max-width:22ch}
.ft-cta .lede{margin:22px 0 34px}

.ft h4{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-lo);margin:0 0 20px;
}
.ft li{margin-bottom:11px}
.ft a{text-decoration:none;transition:color .18s}
.ft a:hover{color:#fff}

.ft-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding:64px 0 48px;border-bottom:1px solid var(--line-dk);
}
.ft-logo img{height:34px;width:auto;filter:brightness(0) invert(1);margin-bottom:20px}
.ft-logo p{font-size:14.5px;line-height:1.65;max-width:26em}
.ft-nap{font-style:normal;line-height:1.7;font-size:14.5px}
.ft-nap b{color:#fff;display:block;margin-bottom:6px;font-weight:600}
.ft-bot{
  padding-top:28px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:12.5px;color:var(--slate-mid);
}
.ft-bot ul{display:flex;gap:22px;flex-wrap:wrap}

/* --- Voies de contact ---------------------------------------------------- */
.cta-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-dk);border:1px solid var(--line-dk);
  margin:34px 0 28px;border-radius:4px;overflow:hidden;
}
/* Variante à 2 voies (page d'accueil : seulement les deux numéros). */
.cta-grid.cta-grid-2{grid-template-columns:repeat(2,1fr)}
.cta-way{
  background:var(--ink);padding:24px 26px;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;gap:5px;transition:background .22s;
}
.cta-way:hover{background:var(--ink-2)}
.cta-way span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate-lo);
}
.cta-way b{font-family:var(--font-display);font-size:21px;font-weight:400;letter-spacing:-.02em}
.cta-way em{font-style:normal;font-size:12.5px;color:var(--slate-lo)}

/* --- Formulaire ----------------------------------------------------------
   Étiquettes visibles au-dessus des champs plutôt que de simples textes
   indicatifs : ceux-ci disparaissent à la saisie, et le visiteur ne sait
   plus ce qu'il est en train de remplir. */
.form{margin-top:36px;border-top:1px solid var(--line-dk);padding-top:32px}
.form-t{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-lo);margin-bottom:22px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:#fff}
.field label .opt{font-weight:400;color:var(--slate-mid);margin-left:5px}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--line-dk);border-radius:3px;
  padding:14px 15px;color:#fff;font-family:var(--font);font-size:15.5px;width:100%;
  transition:border-color .18s,background .18s;
}
.field textarea{resize:vertical;min-height:100px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-mid);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--signal);outline:2px solid transparent;outline-offset:2px;
  background:rgba(255,255,255,.08);
}
.field select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AEBC' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
}
.field select option{background:var(--ink);color:#fff}

.consent{
  grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:var(--slate-lo);line-height:1.55;
}
.consent input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--rouge)}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.form-send{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-note{font-size:13px;color:var(--slate-mid)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{grid-column:1/-1;font-size:14.5px;line-height:1.5;margin:4px 0 0;color:#fff}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--signal)}
.form-status.is-err{color:var(--alerte)}


/* ============================================================================
   17. PICTOGRAMMES
   Traits arrondis, pastille claire : registre chaleureux plutôt que
   strictement technique — le sombre des sections porte déjà la technicité.
   ========================================================================= */
.pic{
  width:46px;height:46px;border-radius:50%;background:var(--rouge-soft);
  color:var(--rouge);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;flex-shrink:0;transition:background .22s,color .22s,transform .32s var(--ease);
}
.pic svg{width:22px;height:22px}
.on-dark .pic,.sec-dark .pic{background:rgba(255,255,255,.07);color:#fff}
.sec-mist .pic{background:var(--paper)}
.tile:hover .pic{background:var(--rouge);color:#fff;transform:scale(1.08) rotate(-6deg)}
.tile .pic{margin-bottom:20px}

/* Tracé au défilement : le pictogramme se dessine plutôt que d'apparaître
   d'un bloc, dès que son bloc .rv devient visible. La valeur de dasharray
   est volontairement généreuse : au-delà de la longueur réelle du tracé,
   seul l'offset final (0) compte pour obtenir un contour complet. Les
   formes pleines (fill, sans trait) ne sont pas concernées et restent
   simplement visibles. */
html.js .rv .pic svg path{
  stroke-dasharray:170;
  stroke-dashoffset:170;
  transition:stroke-dashoffset 1.1s var(--ease) .15s;
}
html.js .rv.in .pic svg path{stroke-dashoffset:0}


/* ============================================================================
   18. ÉTATS « MAQUETTE »
   ----------------------------------------------------------------------------
   Blocs dont la page de destination n'existe pas encore. Ils ne sont ni
   cliquables ni présentés comme des liens : pas de flèche, pas d'effet au
   survol. En production, redevenir des <a href="/la-page/"> et retirer
   .is-static.
   ========================================================================= */
.cap.is-static,.tile.is-static{cursor:default}
.cap.is-static:hover{padding-left:0}
.cap.is-static:hover::before{opacity:0}
.cap.is-static:hover h3{color:inherit}
.tile.is-static:hover{background:transparent;transform:none;box-shadow:none}
.tile.is-static:hover::before{transform:scaleX(0)}
.tile.is-static:hover .pic{background:var(--rouge-soft);color:var(--rouge);transform:none}
.cap.is-static .cap-go,.tile.is-static .tile-go{display:none}
.ag-go.is-static{cursor:default;color:var(--slate)}
.ag-go.is-static svg{display:none}

/* Listes de sous-pages à venir : simple énumération, sans affordance de lien. */
li.is-static .lnk{display:inline-block;cursor:default;color:var(--slate-lo)}
.ft-bot li.is-static .lnk{color:var(--slate-mid)}


/* ============================================================================
   19. PAGES INTÉRIEURES
   ----------------------------------------------------------------------------
   Composants propres aux pages de service (cybersécurité, infogérance,
   télécoms) : fil d'ariane, héros plus court que celui de l'accueil,
   grille de risques, étapes numérotées, engagements, FAQ, périmètre audité.
   ========================================================================= */

/* --- Fil d'ariane --------------------------------------------------------- */
.crumb{padding:20px 0 0}
.crumb ol{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  font-family:var(--mono);font-size:13px;color:var(--slate);
}
.crumb a{color:var(--slate);text-decoration:none;transition:color .18s}
.crumb a:hover{color:var(--rouge)}
.crumb li[aria-current]{color:var(--ink)}

/* --- Héros de page intérieure ---------------------------------------------
   Même halo et même trame que le héros de l'accueil, mais plus court : le
   fil d'ariane occupe déjà le haut de l'écran, et le propos d'une page de
   service n'a pas besoin du même souffle que la page d'entrée du site. */
.phero{padding:44px 0 0;position:relative;overflow:hidden;isolation:isolate}
.phero::before{
  content:"";position:absolute;top:-320px;right:-260px;width:860px;height:860px;
  background:radial-gradient(circle,var(--ardoise-soft) 0%,transparent 62%);
  opacity:.9;pointer-events:none;z-index:-1;
}
.phero-in{position:relative}
.phero h1{max-width:18ch;animation:rise .7s var(--ease) both}
.phero h1 b{font-weight:400;color:var(--rouge)}
.phero h1.h1-wide{max-width:34ch;font-size:clamp(32px,4.4vw,54px)}
.phero .kick{animation:rise .7s var(--ease) both}
.phero .answer{animation:rise .7s var(--ease) .08s both}
.phero .hero-note{animation:rise .7s var(--ease) .14s both}
.phero .hero-act{animation:rise .7s var(--ease) .20s both}
@media (prefers-reduced-motion:reduce){
  .phero h1,.phero .kick,.phero .answer,.phero .hero-note,.phero .hero-act{animation:none}
}

/* Bloc réponse : le paragraphe qui résume la page en une respiration,
   pensé pour être repris tel quel par un moteur de recherche ou une IA
   génératrice de réponses. */
.answer{
  margin-top:28px;max-width:52ch;padding-left:22px;border-left:2px solid var(--rouge);
  font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--slate);
}
.hero-note{
  margin-top:22px;display:flex;align-items:center;gap:9px;
  font-size:14px;color:var(--slate);
}
.hero-note svg{flex-shrink:0}
.hero-note a{color:var(--rouge);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero-note a:hover{color:var(--rouge-deep)}
.hero-act{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

/* --- Périmètre audité -------------------------------------------------
   Bandeau schématique et non cliquable : il illustre l'étendue d'un audit
   plutôt que de la décrire en prose. Volontairement statique — aucune
   donnée n'y est présentée comme vivante ou mesurée en temps réel. */
.scope{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.scope-head{margin-bottom:40px;max-width:46em}
.scope-head .kick{margin-bottom:16px}
.scope-head p{font-size:16px;color:var(--slate);line-height:1.6}
.scope-row{
  display:grid;grid-template-columns:repeat(5,1fr);position:relative;
}
/* Ligne de liaison horizontale : purement graphique, passée derrière les
   pastilles pour évoquer un schéma de topologie sans jamais prétendre à
   une mesure réelle. */
.scope-row::before{
  content:"";position:absolute;left:6%;right:6%;top:26px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
  z-index:0;
}
.scope-node{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;padding:0 10px;
}
.scope-node .pic{margin-bottom:0;background:var(--paper);border:1px solid var(--line)}
.scope-node span{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}

/* Variante à 4 nœuds (page collaboratif : Microsoft 365, Google Workspace,
   Zimbra, Nextcloud) plutôt que les 5 du périmètre d'audit. */
.scope-row.n4{grid-template-columns:repeat(4,1fr)}

/* --- Comparatif de solutions (page collaboratif) ---------------------------
   Réutilise la grille .eng ; n'ajoute que l'espacement entre les groupes
   « Pour qui / Points forts / À savoir » à l'intérieur d'une carte. */
.compare .cap-benef{margin-top:18px}
.compare .cap-benef:first-child{margin-top:0}
.compare p{margin-top:6px;font-size:15px;color:var(--slate);line-height:1.56}

/* --- Menaces : grille à filets, même langage que les tuiles d'accueil --- */
.risk{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);perspective:1000px;
}
.risk article{
  background:var(--paper);padding:32px 26px 30px;position:relative;z-index:0;
  transition:background .22s,transform .32s var(--ease),box-shadow .32s var(--ease);
  transform-origin:bottom center;
}
.risk article:hover{background:#fff;transform:translateY(-6px) rotateX(3deg);box-shadow:var(--sh-2);z-index:1}
.risk article:hover .pic{transform:scale(1.08) rotate(-6deg)}
.risk-n{
  font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.14em;
  display:block;margin-bottom:20px;
}
.risk h3{margin-bottom:10px}
.risk p{font-size:14.5px;color:var(--slate);line-height:1.55}

/* --- Étapes numérotées, sur fond sombre ---------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dk);perspective:1000px}
.steps article{
  padding:38px 32px 0 0;border-right:1px solid var(--line-dk);
  transition:transform .32s var(--ease);transform-origin:bottom center;
}
.steps article:hover{transform:translateY(-6px) rotateX(3deg)}
.steps article:hover .steps-n{color:#fff}
.steps article:last-child{border-right:0;padding-right:0}
.steps article:not(:first-child){padding-left:32px}
.steps-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--signal);
  display:block;margin-bottom:18px;transition:color .28s var(--ease);
}
.steps h3{margin-bottom:12px}
.steps > article > p{font-size:15.5px;color:var(--slate-lo);line-height:1.6;margin-bottom:22px}
.steps ul li{border-top:1px solid var(--line-dk)}
.steps ul li:first-child{border-top:0}
.steps ul span{
  display:flex;align-items:center;gap:10px;padding:12px 0;
  font-size:14.5px;font-weight:500;color:var(--slate-lo);
}
.steps ul span::before{
  content:"";width:5px;height:5px;background:var(--signal);border-radius:50%;flex-shrink:0;
}

/* --- Engagements : grille à deux ou trois colonnes ------------------------ */
.eng{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:44px;
  perspective:1000px;
}
.eng.eng-3{grid-template-columns:repeat(3,1fr)}
.eng.eng-flush{margin-top:0}
.eng div{
  background:var(--paper);padding:30px 28px 32px;position:relative;z-index:0;
  transition:background .22s,transform .32s var(--ease),box-shadow .32s var(--ease);
  transform-origin:bottom center;
}
.eng div:hover{background:#fff;transform:translateY(-6px) rotateX(3deg);box-shadow:var(--sh-2);z-index:1}
.eng div:hover .pic{transform:scale(1.08) rotate(-6deg)}
.eng h3{margin-bottom:10px;font-size:19px}
.eng p{font-size:15px;color:var(--slate);line-height:1.56}

/* Étiquette de bénéfice au-dessus du titre d'une prestation : la raison
   avant le nom de l'offre. */
.cap-benef{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;
  letter-spacing:.06em;color:var(--slate);margin-bottom:8px;text-transform:none;
}
.cap:hover .cap-benef{color:var(--rouge-deep)}

/* --- Prestations : blocs empilés plutôt que lignes côte à côte -----------
   Le titre passe au-dessus du texte, avec un pictogramme, au lieu d'un
   alignement en ligne de base sur deux colonnes : chaque prestation gagne
   en présence verticale, à la mesure de ce qu'elle représente. */
.caps.stack{perspective:1000px}
.caps.stack .cap{
  display:block;grid-template-columns:unset;padding:48px 0;
  transition:background .22s,transform .32s var(--ease),box-shadow .32s var(--ease);
  transform-origin:bottom center;
}
.caps.stack .cap:hover{transform:translateY(-5px) rotateX(2.5deg);box-shadow:var(--sh-1)}
.caps.stack .cap:hover .pic{transform:scale(1.08) rotate(-6deg)}
.caps.stack .cap .pic{margin-bottom:24px}
.caps.stack .cap h3{font-size:25px;margin-bottom:14px;max-width:32ch}
.caps.stack .cap p{font-size:16px;max-width:58ch;color:var(--slate)}

/* Liste « concrètement » sous le paragraphe d'une prestation : puces
   discrètes, séparées par un filet plutôt qu'un espacement seul. */
.cap-list{margin-top:18px;max-width:58ch}
.cap-list li{
  position:relative;padding:9px 0 9px 20px;font-size:14.5px;
  color:var(--slate);border-top:1px solid var(--line);
}
.cap-list li:first-child{border-top:0}
.cap-list li::before{
  content:"";position:absolute;left:0;top:17px;width:5px;height:5px;
  border-radius:50%;background:var(--rouge);
}

/* Liens dans un paragraphe de contenu (renvois « pour aller plus loin ») :
   le site n'en a pas ailleurs, d'où ce style dédié plutôt que le
   color:inherit par défaut. */
.sec p a,.answer a{
  color:var(--rouge);text-decoration:underline;text-underline-offset:3px;font-weight:600;
}
.sec p a:hover,.answer a:hover{color:var(--rouge-deep)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{max-width:56rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 46px 26px 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.018em;
  line-height:1.35;transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rouge)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:34px;width:12px;height:2px;background:var(--rouge);
}
.faq summary::before{
  content:"";position:absolute;right:13px;top:29px;width:2px;height:12px;
  background:var(--rouge);transition:transform .22s var(--ease);
}
.faq details[open] summary::before{transform:scaleY(0)}
.faq details p{padding:0 40px 28px 0;font-size:16px;color:var(--slate);line-height:1.65}

@media (max-width:1080px){
  .risk{grid-template-columns:repeat(2,1fr)}
  .scope-row,.scope-row.n4{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .scope-row::before{display:none}
}
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .steps article{border-right:0;border-bottom:1px solid var(--line-dk);padding:30px 0}
  .steps article:not(:first-child){padding-left:0}
  .steps article:last-child{border-bottom:0}
  .eng{grid-template-columns:1fr}
  .eng.eng-3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .risk{grid-template-columns:1fr}
  .scope-row,.scope-row.n4{grid-template-columns:repeat(2,1fr)}
  .faq summary{font-size:17px;padding:22px 40px 22px 0}
}


/* ============================================================================
   20. RESPONSIVE
   ========================================================================= */

@media (max-width:1080px){
  .hero h1{max-width:18ch}
  .hero-sub{max-width:52ch}

  .nav{display:none}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:10px var(--gut) 22px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  }
  .nav.open a{padding:15px 0;border-bottom:1px solid var(--line);width:100%;font-size:17px}
  .nav.open a::after{display:none}
  .burger{display:block}
  .hdr-tels{display:none}

  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(2n){border-right:0}
  .tile:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tech{grid-template-columns:repeat(2,1fr)}
  /* .tech-5 reste sur une seule ligne de 5 colonnes jusqu'à un écran
     nettement plus étroit : voir plus bas, resserrement progressif. */
  .tech.tech-5 .tech-col{padding:20px 14px 22px}
  .tech.tech-5 .tech-col h3{font-size:10px;letter-spacing:.1em}
  .tech.tech-5 .tech-col li{font-size:13px;padding:6px 0}
  .rev-c{flex:0 0 calc((100% - 1px)/2)}
}

@media (max-width:920px){
  .topbar-hide{display:none}
}

/* --------------------------------------------------------------------------
   EN-TÊTE ÉTROIT
   Sous ce seuil, le logo, le bouton d'ouverture du menu et l'appel à
   l'action ne tiennent plus sur une ligne : .hdr-side ne se comprime pas
   (flex-shrink:0), et c'est toute la page qui se met à déborder
   horizontalement. Le bouton passe donc dans le menu, où il devient
   pleine largeur — plus visible qu'il ne l'était dans la barre.
   ----------------------------------------------------------------------- */
@media (max-width:660px){
  .hdr-in{gap:16px;height:70px}
  .hdr.stuck .hdr-in{height:60px}
  .logo img{height:34px}
  .hdr.stuck .logo img{height:30px}
  .hdr-side{display:none}

  .nav.open .nav-cta{
    display:inline-flex;justify-content:center;width:100%;
    margin-top:18px;padding:16px 24px;border-bottom:0;font-size:15px;
  }
}

@media (max-width:860px){
  .sec{padding:88px 0}
  .sec-head{margin-bottom:48px}
  .hero{padding:56px 0 0}
  .hero-meta{gap:32px}
  .tiles{margin-top:64px}

  .prin{grid-template-columns:1fr}
  .prin article{border-right:0;border-bottom:1px solid var(--line-dk);padding:30px 0}
  .prin article:not(:first-child){padding-left:0}
  .prin article:last-child{border-bottom:0}
  .prin-n{margin-bottom:16px}

  .cap{grid-template-columns:1fr auto;gap:8px 20px}
  .cap p{grid-column:1/-1}
  .cap:hover{padding-left:0}
  .cap::before{left:-16px;right:-16px}

  .ag{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-cta{padding:72px 0}
  .cta-grid,.cta-grid.cta-grid-2{grid-template-columns:1fr}

  /* Socle technique à 5 colonnes : en dessous de 860 px, cinq colonnes ne
     laissent plus la place à un texte lisible. On passe à deux colonnes aux
     tailles normales ; la cinquième occupe toute la largeur pour ne pas
     laisser de case vide. */
  .tech.tech-5{grid-template-columns:repeat(2,1fr)}
  .tech.tech-5 .tech-col{padding:22px 18px 20px}
  .tech.tech-5 .tech-col h3{font-size:10.5px;letter-spacing:.14em;margin-bottom:12px}
  .tech.tech-5 .tech-col li{font-size:14px;padding:7px 0}
  .tech.tech-5 .tech-col:last-child:nth-child(odd){grid-column:1/-1}
}

@media (max-width:600px){
  body{font-size:16px}
  .topbar{display:none}       /* la barre de service devient du bruit */
  .tiles{grid-template-columns:1fr}
  .tile{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .tile:nth-child(2n){border-right:0}
  .tech{grid-template-columns:1fr}
  .rev-c{flex:0 0 100%}
  .ft-grid{grid-template-columns:1fr}
  .hero-meta{gap:26px}
  .rev-sc b{font-size:46px}
  .pic{width:40px;height:40px;margin-bottom:14px}
  .pic svg{width:19px;height:19px}
}

/* Chiffres du héros : évite le débordement sur très petit écran. */
@media (max-width:420px){
  .hero-meta{gap:20px 26px}
  .hero-meta b{font-size:25px}
  .hero-meta span{font-size:10px;letter-spacing:.1em}
}


/* ============================================================================
   GARDE-FOU RESPONSIVE
   ----------------------------------------------------------------------------
   Un élément de grille vaut par défaut min-width:auto : son contenu — texte
   long, image large, texte alternatif d'une image absente — peut donc forcer
   la colonne à s'élargir et faire déborder toute la page. On autorise
   explicitement la compression.
   ========================================================================= */
.tiles>*,.tech>*,.prin>*,.ag>*,.caps>*,.cta-grid>*,.ft-grid>*,
.rev-tr>*,.hero-meta>*,.hero-in>*,.risk>*,.steps>*,.eng>*,.scope-row>*{min-width:0}


/* ============================================================================
   IMPRESSION
   Les fonds sombres et les décors coûtent de l'encre sans rien apporter.
   ========================================================================= */
@media print{
  .topbar,.hdr,.sect,.rev-nav,.rev-dots,.form,.burger,.skip{display:none}
  .sec-dark,.ft{background:#fff !important;color:#000 !important}
  .sec-dark::before,.sec-dark::after,.ft::before,.hero::before,.hero::after,
  .hero-grid{display:none !important}
  .on-dark .lede,.prin p,.ft{color:#333 !important}
  .sec{padding:24px 0;break-inside:avoid}
  html.js .rv{opacity:1 !important;transform:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}


/* ============================================================================
   Cybersécurité : socle, audit, sensibilisation
   ----------------------------------------------------------------------------
   Composants propres aux trois sections ajoutées entre « Le terrain » et la
   FAQ sur cybersecurite.html : illustrations schématiques, déroulé en 4
   étapes (réutilisé en clair pour l'audit et en sombre pour la
   sensibilisation) et encarts de la section sensibilisation.
   ========================================================================= */

/* --- Illustrations schématiques -------------------------------------------
   Purement décoratives : aucune donnée, aucune mesure, aucun compteur.
   Un seul et même gabarit .diagram, décliné en variante claire ou sombre
   selon la section qui l'accueille. */
.diagram{display:block;width:100%;max-width:620px;height:auto;margin:0 auto 56px}

.diagram-light .diagram-line{fill:none;stroke:var(--line);stroke-width:1.8}
.diagram-light .diagram-vpn{
  fill:none;stroke:var(--ardoise);stroke-width:1.6;
  stroke-dasharray:5 6;stroke-linecap:round;
}
.diagram-light .diagram-node{fill:var(--paper);stroke:var(--line);stroke-width:1.6}
.diagram-light .diagram-node-sm{fill:var(--mist)}
.diagram-light .diagram-icon{
  fill:none;stroke:var(--ardoise);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.diagram-light .diagram-icon-fill,
.diagram-light .diagram-icon-dot{fill:var(--ardoise);stroke:none}
.diagram-light .diagram-badge{fill:var(--rouge-soft);stroke:var(--rouge);stroke-width:1.6}
.diagram-light .diagram-badge-icon{
  fill:none;stroke:var(--rouge);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.diagram-light .diagram-lock-bg{fill:var(--paper);stroke:var(--ardoise);stroke-width:1.6}
.diagram-light .diagram-glass{fill:rgba(178,58,49,.05);stroke:var(--rouge);stroke-width:2.2}
.diagram-light .diagram-glass-handle{fill:none;stroke:var(--rouge);stroke-width:4;stroke-linecap:round}
.diagram-light .diagram-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  fill:var(--slate);text-anchor:middle;
}

.diagram-dark .diagram-line-dk{fill:none;stroke:var(--line-dk);stroke-width:1.8}
.diagram-dark .diagram-node-dk{fill:var(--ink-2);stroke:var(--line-dk);stroke-width:1.6}
.diagram-dark .diagram-icon-dk{
  fill:none;stroke:var(--signal);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.diagram-dark .diagram-icon-dk-dot{fill:var(--signal);stroke:none}
.diagram-dark .diagram-label-dk{
  font-family:var(--mono);font-size:12px;fill:var(--signal);text-anchor:middle;
}

@media (max-width:600px){
  .diagram{margin-bottom:40px}
}

/* --- Déroulé en 4 étapes / cycle en 4 temps --------------------------------
   Même composant pour l'audit (fond clair) et la sensibilisation (fond
   sombre) : seules les couleurs changent, via .on-dark / .sec-dark. */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);margin-top:48px;
}
.flow li{padding:28px 24px 0 0;border-right:1px solid var(--line)}
.flow li:last-child{border-right:0;padding-right:0}
.flow li:not(:first-child){padding-left:24px}
.flow-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--rouge);
  display:block;margin-bottom:14px;
}
.flow h3{margin-bottom:8px;font-size:18px}
.flow p{font-size:14.5px;color:var(--slate);line-height:1.55}

.on-dark .flow,.sec-dark .flow{border-top-color:var(--line-dk)}
.on-dark .flow li,.sec-dark .flow li{border-right-color:var(--line-dk)}
.on-dark .flow-n,.sec-dark .flow-n{color:var(--signal)}
.on-dark .flow p,.sec-dark .flow p{color:var(--slate-lo)}

@media (max-width:860px){
  .flow{grid-template-columns:1fr}
  .flow li{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .on-dark .flow li,.sec-dark .flow li{border-bottom-color:var(--line-dk)}
  .flow li:not(:first-child){padding-left:0}
  .flow li:last-child{border-bottom:0}
}

/* --- Encarts « ce que nous ne faisons pas » / « signes qui alertent » ----- */
.callout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.callout{
  background:rgba(255,255,255,.05);border:1px solid var(--line-dk);border-radius:6px;
  padding:28px 30px;
}
.callout h3{color:#fff;font-size:17px;margin-bottom:16px}
.callout li{
  position:relative;padding:8px 0 8px 20px;font-size:14.5px;
  color:var(--slate-lo);line-height:1.5;
}
.callout li::before{
  content:"";position:absolute;left:0;top:16px;width:5px;height:5px;
  border-radius:50%;background:var(--signal);
}
@media (max-width:760px){.callout-grid{grid-template-columns:1fr}}

/* --- Variante à 3 encarts (sensibilisation : « Ce que vous recevez » en
   plus des deux encarts existants). --- */
.callout-grid.callout-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.callout-grid.callout-grid-3{grid-template-columns:1fr}}

/* --- Tuiles du héros, variante à 3 (sensibiliser / auditer / protéger) ----
   La grille .tiles est pensée pour 4 éléments ; à 3, on fixe ses propres
   points de rupture plutôt que d'hériter des repères pensés pour 2 colonnes,
   qui casseraient les filets verticaux entre les tuiles. */
.tiles.tiles-3{grid-template-columns:repeat(3,1fr);margin-top:56px}
@media (max-width:1080px){
  .tiles.tiles-3 .tile:nth-child(2n){border-right:1px solid var(--line)}
}
@media (max-width:600px){
  .tiles.tiles-3{grid-template-columns:1fr}
  .tiles.tiles-3 .tile{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .tiles.tiles-3 .tile:last-child{border-bottom:0}
}

/* --- Double bloc audit (Microsoft 365 mis en avant / systèmes
   d'information en liste compacte), côte à côte sur ordinateur. --- */
.audit-split{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;
}
.audit-block{background:var(--mist);border-radius:8px;padding:34px 36px}
.audit-block h3{font-size:20px;margin-bottom:6px}
.audit-block .cap-list{margin-top:16px}
.audit-block > p{margin-top:18px;font-size:15px;color:var(--slate);line-height:1.55}
.audit-block-accent{
  background:var(--rouge-soft);border:1px solid var(--rouge);
}
@media (max-width:760px){
  .audit-split{grid-template-columns:1fr}
}

/* --- Illustration réduite (loupe de la section Audit, moins d'espace
   nécessaire une fois le double bloc ajouté). --- */
.diagram.diagram-compact{max-width:340px}

/* --- Statistique mise en avant (sensibilisation) ---------------------------
   Un seul chiffre sourcé, pas un tableau de bord : le nombre porte tout le
   poids visuel, la phrase reste sobre, la source est discrète. */
.stat{margin:48px 0 0;max-width:50ch;font-size:clamp(20px,2.6vw,27px);line-height:1.5;color:var(--slate-lo)}
.stat b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(46px,6.5vw,68px);letter-spacing:-.03em;line-height:1;
  color:var(--signal);margin-bottom:18px;
}
.stat-source{
  display:block;margin-top:32px;font-family:var(--mono);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate-mid);
}


/* ============================================================================
   21. PAGES LÉGALES
   ----------------------------------------------------------------------------
   Mentions légales et politique de confidentialité : sommaire collant à
   gauche, texte courant à droite. Le texte reste en colonne étroite (46 rem)
   pour une longueur de ligne confortable, comme le reste du site.
   ========================================================================= */
.phero .crumb{padding:0 0 26px}
.phero .crumb li[aria-hidden]{color:var(--line)}
.legal-date{
  margin-top:20px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--slate);animation:rise .7s var(--ease) .14s both;
}
.sec-legal{padding:88px 0 120px}

.legal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:72px;align-items:start}

/* --- Sommaire ------------------------------------------------------------ */
.legal-toc{position:sticky;top:96px}
.legal-toc-t{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:14px;
}
.legal-toc ol{border-left:1px solid var(--line)}
.legal-toc a{
  display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;
  font-size:14px;line-height:1.4;color:var(--slate);text-decoration:none;
  transition:color .18s,border-color .18s;
}
.legal-toc a:hover{color:var(--rouge)}
.legal-toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--rouge);font-weight:600}

/* --- Texte courant --------------------------------------------------------- */
.prose{max-width:46rem}
.prose > section{margin-bottom:68px;scroll-margin-top:100px}
.prose > section:last-child{margin-bottom:0}
.prose h2{
  font-size:clamp(25px,2.5vw,31px);line-height:1.18;letter-spacing:-.025em;
  margin-bottom:20px;display:flex;gap:14px;align-items:baseline;
}
.prose-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--rouge);flex-shrink:0}
.prose h3{font-size:17px;margin:30px 0 8px}
.prose p{font-size:16px;color:var(--slate);line-height:1.7;margin-top:14px}
.prose h2 + p,.prose h3 + p{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--rouge);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.prose a:hover{color:var(--rouge-deep)}
.prose .btn{text-decoration:none}
.prose ul.dots{margin-top:14px}
.prose ul.dots li{
  position:relative;padding:9px 0 9px 22px;font-size:16px;line-height:1.6;
  color:var(--slate);border-top:1px solid var(--line);
}
.prose ul.dots li:first-child{border-top:0}
.prose ul.dots li::before{
  content:"";position:absolute;left:2px;top:19px;width:5px;height:5px;
  border-radius:50%;background:var(--rouge);
}

/* Encart d'avertissement : informations à ne pas transmettre, etc. */
.prose-note{
  margin-top:22px;padding:18px 22px;border-left:2px solid var(--rouge);
  background:var(--rouge-soft);border-radius:0 4px 4px 0;
}
.prose .prose-note p{margin:0;color:var(--ink);font-size:15px}

/* Fiches d'identité des sociétés (éditeur, responsables du traitement). */
.ids{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px}
.ids.ids-1{grid-template-columns:1fr;max-width:30rem}
.ids > *{min-width:0}
.id-card{background:var(--paper);padding:26px 26px 24px}
.id-card h3{margin:0 0 4px;font-size:18px}
.id-card .id-sub{font-size:14px;color:var(--slate);margin:0 0 16px}
.id-card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:14.5px;line-height:1.5}
.id-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding-top:3px}
.id-card dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.id-card dd a{font-weight:500}

/* Tableaux : durées de conservation, cookies, finalités. Sur mobile, chaque
   ligne devient une fiche, la colonne étant rappelée par data-label. */
.ltable{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px;line-height:1.55}
.ltable th{
  text-align:left;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);padding:0 18px 12px 0;border-bottom:1px solid var(--ink);
}
.ltable td{padding:16px 18px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--slate)}
.ltable td:first-child{color:var(--ink);font-weight:600}
.ltable th:last-child,.ltable td:last-child{padding-right:0}
.ltable-sub{display:block;font-weight:400;color:var(--slate);margin-top:4px}
.ltable code{font-family:var(--mono);font-size:13px;background:var(--mist);padding:2px 6px;border-radius:3px;color:var(--ink);font-weight:400}

.prose-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Valeur manquante à fournir avant la mise en ligne. Volontairement voyante :
   elle ne doit pas pouvoir passer inaperçue en recette. */
.todo{background:#FFF3C4;color:#7A5200;padding:1px 6px;border-radius:3px;font-weight:600}

@media (max-width:1080px){
  .legal{grid-template-columns:1fr;gap:40px}
  .legal-toc{position:static;border:1px solid var(--line);border-radius:4px;padding:22px 22px 16px;background:var(--mist)}
  .legal-toc ol{columns:2;column-gap:28px;border-left:0}
  .legal-toc li{break-inside:avoid}
  .legal-toc a{padding:6px 0;margin:0;border-left:0}
  .legal-toc a[aria-current="true"]{font-weight:400;color:var(--slate)}
}
@media (max-width:760px){
  .ids{grid-template-columns:1fr}
}
@media (max-width:600px){
  .sec-legal{padding:56px 0 88px}
  .legal-toc ol{columns:1}
  .prose > section{margin-bottom:52px}
  .prose h2{flex-direction:column;gap:6px}
  .id-card{padding:22px 20px}
  .id-card dl{grid-template-columns:1fr;gap:2px}
  .id-card dd{margin-bottom:10px}
  .ltable thead{display:none}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:100%}
  .ltable tr{border-bottom:1px solid var(--line);padding:14px 0}
  .ltable tr:first-child{border-top:1px solid var(--ink)}
  .ltable td{border:0;padding:3px 0}
  .ltable td[data-label]::before{
    content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:400;margin-top:8px;
  }
  .ltable td:first-child[data-label]::before{display:none}
}


/* ============================================================================
   22. BANDEAU COOKIES
   ----------------------------------------------------------------------------
   Injecté par le script (module « cookies »). Les deux choix ont exactement
   le même poids visuel : la CNIL exige que refuser soit aussi simple
   qu'accepter. Non modal : il ne bloque pas la lecture de la page.
   ========================================================================= */
.ck{
  position:fixed;left:20px;bottom:20px;z-index:150;width:min(440px,calc(100vw - 40px));
  background:var(--ink);color:var(--slate-lo);border:1px solid var(--line-dk);border-radius:6px;
  padding:24px 24px 22px;box-shadow:var(--sh-3);font-size:14.5px;line-height:1.6;
  animation:ckIn .5s var(--ease) both;
}
.ck[hidden]{display:none}
@keyframes ckIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ck-t{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.ck-t::before{content:"";width:6px;height:6px;background:var(--signal);box-shadow:0 0 0 4px var(--signal-dim)}
.ck a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ck-b{
  justify-content:center;padding:13px 18px;font-size:14.5px;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34);
}
.ck-b:hover{background:#fff;color:var(--ink);border-color:#fff}
.ck :focus-visible{outline-color:var(--signal)}
@media (max-width:600px){
  .ck{left:10px;right:10px;bottom:10px;width:auto;padding:16px 16px 14px;font-size:13.5px;line-height:1.5}
  .ck-t{margin-bottom:6px}
  .ck-act{margin-top:12px;gap:8px}
  .ck-b{padding:11px 14px}
}
@media print{.ck{display:none !important}}

/* Bouton « Gérer mes cookies » du pied de page : un bouton, puisqu'il ouvre
   le bandeau, mais habillé comme ses voisins qui sont des liens. */
.ft-lnk{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;transition:color .18s;
}
.ft-lnk:hover{color:#fff}


/* ============================================================================
   23. PAGE 404
   ========================================================================= */
.nf{padding-bottom:96px}
.nf-code{
  display:block;font-family:var(--mono);font-size:clamp(64px,11vw,132px);line-height:1;
  letter-spacing:-.04em;color:var(--line);margin-bottom:18px;animation:rise .7s var(--ease) both;
}
.nf-links{margin-top:64px;max-width:56rem}
.nf-links .cap{grid-template-columns:.9fr 1.6fr auto}
.nf-links .cap h2{font-size:24px;font-weight:500;letter-spacing:-.024em;line-height:1.25;transition:color .2s}
.nf-links .cap:hover h2{color:var(--rouge)}
@media (max-width:860px){.nf-links .cap{grid-template-columns:1fr auto}}
@media (max-width:600px){.nf{padding-bottom:64px}.nf-links{margin-top:44px}}