/* ==========================================================================
   Athinium IT - feuille de style unique
   Aucun framework, aucune dépendance. Les couleurs passent toutes par des
   variables : le mode sombre ne redéfinit que ces variables.
   ========================================================================== */

/* ---------- polices auto-hébergées ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Texte lu par les lecteurs d'écran et les robots, invisible à l'écran. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- variables ---------- */
:root{
  --rouge:#D50A14;--rouge-vif:#FB121F;--rouge-txt:#B00810;
  --encre:#212C35;--encre-2:#5C666E;--encre-3:#8A939A;
  --doux:#F4F6F7;--filet:#DEE3E6;--carte:#FFFFFF;--carte-2:#F4F6F7;--fond:#FFFFFF;
  --bande:#212C35;--ombre:0 10px 28px rgba(33,44,53,.08);
  --titre-accent:#D50A14;--ch-ombre:rgba(33,44,53,.13);
  --pastille-rouge:rgba(213,10,20,.09);--pastille-ardoise:rgba(33,44,53,.08);
  --carte-mer:#D3E5F3;--carte-terre:#F4F7F9;--carte-pays:#FFFFFF;--carte-frontiere:#C3D3DF;--carte-etiquette:#7F8E9A;
  --max:1220px;--rayon:7px;
  --titre:'Archivo','Inter',ui-sans-serif,system-ui,sans-serif;
  --texte:'Inter',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#0E1419;--carte:#161E25;--carte-2:#1C252D;--doux:#131A20;--filet:#27323A;
    --encre:#E7EDF1;--encre-2:#A6B2BB;--encre-3:#7E8A93;--rouge-txt:#FF6A63;
    --bande:#18222A;--ombre:0 10px 28px rgba(0,0,0,.45);
    --titre-accent:#FF4A50;--ch-ombre:rgba(0,0,0,.55);
    --pastille-rouge:rgba(255,74,80,.14);--pastille-ardoise:rgba(255,255,255,.08);
    --carte-mer:#0B1620;--carte-terre:#18232D;--carte-pays:#1F2C38;--carte-frontiere:#2F3F4C;--carte-etiquette:#6F808D;
  }
}
:root[data-theme="dark"]{
  --fond:#0E1419;--carte:#161E25;--carte-2:#1C252D;--doux:#131A20;--filet:#27323A;
  --encre:#E7EDF1;--encre-2:#A6B2BB;--encre-3:#7E8A93;--rouge-txt:#FF6A63;
  --bande:#18222A;--ombre:0 10px 28px rgba(0,0,0,.45);
  --titre-accent:#FF4A50;--ch-ombre:rgba(0,0,0,.55);
  --pastille-rouge:rgba(255,74,80,.14);--pastille-ardoise:rgba(255,255,255,.08);
  --carte-mer:#0B1620;--carte-terre:#18232D;--carte-pays:#1F2C38;--carte-frontiere:#2F3F4C;--carte-etiquette:#6F808D;
}

/* ---------- socle ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:16px;line-height:1.6;color:var(--encre);background:var(--fond);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--titre);letter-spacing:-.025em;font-weight:600;margin:0 0 14px}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3.4vw,2.55rem);line-height:1.08}
h3{font-size:1.24rem;line-height:1.2}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:1.15em}
li{margin-bottom:7px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--rouge);color:#fff;padding:12px 18px;z-index:80}
.skip:focus{left:0}

/* ---------- utilitaires ---------- */
.sur-titre{font-family:var(--titre);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rouge-txt);margin:0 0 10px}
.sur-titre.gris{color:var(--encre-3)}
.lead{font-size:1.16rem;color:var(--encre-2);max-width:58ch}
.muted{color:var(--encre-2)}
.center{text-align:center}
.mt0{margin-top:0}
.mb0,.card>*:last-child,.sombre>*:last-child{margin-bottom:0}
.a-remplir{display:inline-block;padding:1px 8px;border:1px dashed var(--rouge);border-radius:4px;color:var(--rouge-txt);font-size:.9em;font-family:var(--titre);font-weight:600}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--carte);border-bottom:1px solid var(--filet)}
.topin{max-width:var(--max);margin:0 auto;padding:0 32px;min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.marque{display:inline-flex;align-items:center;flex:0 0 auto}
/* Les deux déclinaisons n'ont pas le même blanc tournant : à hauteur d'image
   égale, le mot-symbole de la version sombre paraîtrait 18 % plus gros. La
   hauteur de la version sombre est donc ramenée dans le rapport mesuré sur
   les fichiers fournis, pour que la bascule clair/sombre ne fasse pas
   « sauter » le logo. */
.marque img{display:block;width:auto;height:40px}
.marque .marque-sombre{display:none;height:34px}
.marque-footer img{height:44px}
.marque-footer .marque-sombre{height:37px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marque .marque-clair{display:none}
  :root:not([data-theme="light"]) .marque .marque-sombre{display:block}
}
:root[data-theme="dark"] .marque .marque-clair{display:none}
:root[data-theme="dark"] .marque .marque-sombre{display:block}
.custom-logo{height:40px;width:auto}

.nav{display:flex;align-items:center;gap:4px;font-size:.96rem}
.nav>a,.nav .dd>a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:5px;color:var(--encre);white-space:nowrap}
.nav>a:hover,.nav .dd>a:hover{background:var(--doux);color:var(--rouge-txt)}
.nav>a.on{color:var(--rouge-txt);font-weight:600;box-shadow:inset 0 -2px 0 var(--rouge);border-radius:0}
/* Un bouton placé dans la barre de navigation garde son apparence de bouton :
   sans cette reprise, la règle .nav>a l'emporterait sur .btn-r. */
.nav>a.btn{min-height:44px;padding:0 20px;font-family:var(--titre);font-weight:600}
.nav>a.btn-r,.nav>a.btn-r:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.nav>a.btn-r:hover{background:var(--rouge-vif);border-color:var(--rouge-vif)}
.nav>a.cta{margin-left:10px}
/* Contact : bouton en contour ardoise, plein au survol. */
.nav>a.cta.btn-r,.nav>a.cta{background:transparent;border:1px solid var(--encre);color:var(--encre)}
.nav>a.cta.btn-r:hover,.nav>a.cta:hover{background:var(--encre);border-color:var(--encre);color:var(--fond)}
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:8px}
.lang-sw{display:inline-flex;border:1px solid var(--filet);border-radius:5px;overflow:hidden}
.lang-sw a,.lang-sw span{min-height:42px;display:inline-flex;align-items:center;padding:0 10px;font-family:var(--titre);font-weight:600;font-size:.82rem;color:var(--encre-3);background:var(--carte)}
.lang-sw [aria-current="true"]{background:var(--encre);color:var(--fond)}
.lang-sw a:hover{background:var(--carte-2);color:var(--encre)}
.tool{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:44px;padding:0 10px;border:1px solid var(--filet);border-radius:5px;background:var(--carte);color:var(--encre-2);cursor:pointer}
.tool:hover{background:var(--carte-2);color:var(--encre)}
.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ico-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-moon{display:none}
  :root:not([data-theme="light"]) .ico-sun{display:block}
}
:root[data-theme="dark"] .ico-moon{display:none}
:root[data-theme="dark"] .ico-sun{display:block}

/* sous-menu */
.dd{position:relative}
.dd-m{position:absolute;top:100%;left:0;min-width:290px;background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);box-shadow:var(--ombre);padding:8px;display:none;flex-direction:column;gap:2px;z-index:50}
.dd:hover .dd-m,.dd:focus-within .dd-m{display:flex}
.dd-m a{display:block;padding:9px 12px;border-radius:5px}
.dd-m a:hover{background:var(--doux)}
.dd-m b{display:block;font-family:var(--titre);font-weight:600;font-size:.95rem}
.dd-m span{display:block;font-size:.83rem;color:var(--encre-3)}

.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--filet);border-radius:5px;background:var(--carte);cursor:pointer}
.burger span{display:block;position:relative;width:20px;height:2px;background:var(--encre)}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--encre)}
.burger span:before{top:-6px}
.burger span:after{top:6px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:1px solid var(--encre);border-radius:5px;background:none;color:var(--encre);font-family:var(--titre);font-weight:600;font-size:.98rem;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--doux)}
.btn-r{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn-r:hover{background:var(--rouge-vif);border-color:var(--rouge-vif);color:#fff}
.btn-l{border-color:var(--filet);color:var(--encre)}
.btn-c{border-color:rgba(255,255,255,.45);color:#fff}
.btn-c:hover{background:rgba(255,255,255,.12);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.lien-bouton{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
.lien-r{color:var(--rouge-txt);font-weight:600;font-family:var(--titre)}
.lien-r:hover{text-decoration:underline}

/* ---------- sections ---------- */
.sec{padding:76px 0}
.sec.doux{background:var(--doux)}
/* En-tête de section - une seule règle pour tout le site.
   Deux colonnes : le titre prend exactement la largeur de sa plus longue
   ligne, le texte d'accompagnement prend tout le reste. Le titre n'est donc
   jamais recoupé au hasard, et le texte ne laisse pas de vide à droite. */
.sec-tete{display:grid;grid-template-columns:auto minmax(300px,1fr);column-gap:64px;row-gap:18px;align-items:end;margin-bottom:46px}
.sec-tete>*{min-width:0}
.sec-tete-titre{align-self:end}
.sec-tete-texte{color:var(--encre-2);font-size:1.12rem;line-height:1.65;margin:0;text-wrap:pretty}
/* Bandeau d'appel à l'action en pied de page intérieure. */
.bandeau-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.bandeau-cta h2{font-size:1.6rem;margin-bottom:6px}
.bandeau-cta p{color:var(--encre-2);margin:0}

/* ---------- héros ---------- */
.heros{padding:84px 0 76px;background:linear-gradient(140deg,var(--doux) 0%,var(--fond) 52%,var(--doux) 100%);border-bottom:1px solid var(--filet);overflow:hidden}
.heros-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;align-items:center}
.heros h1{max-width:15ch;margin-bottom:20px}
.heros .lead{font-size:1.2rem;max-width:44ch}
/* Trois verbes, un par ligne ; celui du milieu porte la couleur de la marque. */
.heros-titre{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:14px 0 0}
.heros-titre span{display:block}
.heros-titre .accent{color:var(--titre-accent)}
.heros-trait{display:block;width:88px;height:4px;border-radius:2px;background:var(--rouge);margin:28px 0 26px}
.btn .fleche{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.btn:hover .fleche{transform:translateX(3px)}

/* ---------- la chaîne de livraison ---------- */
/* Quatre stations en escalier sur leurs étagères. Le rail passe du gris au
   rouge à l'approche de chaque station ; un retour en pointillés repasse
   sous l'escalier et se rebranche sur la première. */
.chaine{width:100%}
.chaine svg{width:100%;height:auto;display:block;overflow:visible;color:var(--encre)}
.chaine .chaine-compacte{display:none}
.ch-etagere{fill:url(#ch-etagere-ombre)}
.ch-etagere-arete{fill:url(#ch-etagere-ligne)}
.ch-seg{fill:none;stroke-width:1.6;stroke-linecap:round}
.ch-deg-gris{stop-color:var(--encre-3);stop-opacity:.55}
.ch-deg-rouge{stop-color:var(--rouge);stop-opacity:1}
.ch-rail{fill:none;stroke:var(--filet);stroke-width:3;stroke-linecap:round}
.ch-rail-rouge{stroke:var(--rouge);stroke-width:2.2}
.ch-retour{fill:none;stroke:var(--encre-3);stroke-width:1.1;stroke-dasharray:4 4;stroke-linecap:round;opacity:.8}
.ch-entree{fill:none;stroke:var(--rouge);stroke-width:1.6;stroke-linecap:round}
.ch-pointe{fill:var(--encre-3)}
.ch-flux{fill:none;stroke:var(--rouge-vif);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:28 1000;stroke-dashoffset:1028;opacity:0}
.ch-noeud{fill:var(--carte);stroke:var(--filet);stroke-width:.8;filter:drop-shadow(0 7px 10px var(--ch-ombre))}
.ch-noeud-lueur{stroke:var(--rouge);stroke-width:3;stroke-linecap:round;opacity:.5;filter:url(#ch-flou)}
.ch-halo{fill:none;stroke:var(--rouge);stroke-width:1.2;opacity:0}
.ch-port{fill:var(--fond);stroke:var(--rouge);stroke-width:1.8}
.ch-port-halo{fill:var(--rouge);opacity:0}
.ch-titre{font-family:var(--titre);font-weight:700;font-size:13px;letter-spacing:.2em;fill:var(--encre)}
.ch-souligne{stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round}
.ch-sous{font-family:var(--texte);font-size:10.4px;fill:var(--encre-2)}
.chaine .chaine-compacte .ch-titre{font-size:14px;letter-spacing:.14em}
.chaine .chaine-compacte .ch-sous{font-size:12.5px}
.gl-t{fill:none;stroke:var(--rouge);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gl-p{fill:var(--rouge)}
.ch-boucle-tag rect{fill:var(--fond);stroke:var(--filet);stroke-width:1}
.ch-boucle-t{font-family:var(--texte);font-size:11px;font-weight:500;fill:var(--encre)}
.ch-boucle-s{font-family:var(--titre);font-size:5.8px;letter-spacing:.18em;text-transform:uppercase;fill:var(--encre-3)}
/* En mode sombre, la lueur sous les stations porte davantage. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ch-noeud-lueur{opacity:.9}}
:root[data-theme="dark"] .ch-noeud-lueur{opacity:.9}

/* l'impulsion parcourt l'escalier, puis le retour */
:root.js .chaine.en-vue .ch-flux{animation:ath-flux 9s linear infinite}
@keyframes ath-flux{
  0%{stroke-dashoffset:1028;opacity:0}
  3%{opacity:1}
  62%{stroke-dashoffset:0;opacity:1}
  66%{opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
/* chaque station s'allume au passage de l'impulsion */
:root.js .chaine.en-vue .ch-station .ch-halo{animation:ath-halo 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
:root.js .chaine.en-vue .ch-station .ch-noeud{animation:ath-noeud 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
:root.js .chaine.en-vue .ch-station .ch-port-halo{animation:ath-port 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes ath-halo{0%,8%{opacity:0;transform:scale(.94)}14%{opacity:.6;transform:scale(1)}24%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1)}}
@keyframes ath-noeud{0%,8%{stroke:var(--filet);stroke-width:1.4}14%,22%{stroke:var(--rouge);stroke-width:2.2}30%,100%{stroke:var(--filet);stroke-width:1.4}}
@keyframes ath-port{0%,10%{opacity:0;transform:scale(1)}18%{opacity:.45;transform:scale(1.9)}30%,100%{opacity:0;transform:scale(1)}}
.ch-halo,.ch-noeud,.ch-port-halo{transform-box:fill-box;transform-origin:center}

/* ---------- cartes ---------- */
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:var(--carte);border:1px solid var(--filet);border-radius:var(--rayon);padding:26px}
a.card{display:block;transition:border-color .18s,transform .18s,box-shadow .18s}
a.card:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:var(--ombre)}
.card p{color:var(--encre-2);font-size:.95rem;margin-bottom:0}
.card h3{margin-bottom:8px}
.num{font-family:var(--titre);font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--encre-3);margin-bottom:14px}

/* carte d'expertise : filet haut coloré */
/* Carte d'expertise : filet haut rouge ou ardoise en alternance, texte, puis
   pastille en pied - toujours alignée d'une carte à l'autre. */
.exp{border-top:3px solid var(--rouge);display:flex;flex-direction:column;padding:28px 24px 24px}
.exp:nth-child(even){border-top-color:var(--encre)}
.exp .num{letter-spacing:.2em;margin-bottom:12px}
.exp h3{font-size:1.24rem;line-height:1.2;margin-bottom:14px}
.exp .exp-texte{margin:0 0 26px;line-height:1.6}
.exp-icone{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:11px;background:var(--pastille-rouge);color:var(--rouge)}
.exp:nth-child(even) .exp-icone{background:var(--pastille-ardoise);color:var(--encre)}
.exp-icone svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.exp-icone .plein{fill:currentColor;stroke:none}
.exp-icone .dents{fill:none;stroke-width:3.4;stroke-dasharray:3 3}
.exp-icone .trou{fill:var(--pastille-rouge);stroke:none}
/* Titre de section large : pas de plafond de largeur, la coupure est voulue. */
.titre-section{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin:0}
.titre-section .point{color:var(--rouge)}

/* service */
.srv small{display:block;font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge-txt);margin-bottom:8px}
/* Carte de service de l'accueil : plus d'air, titre et texte plus lisibles. */
.srv-grand{padding:34px 34px 32px}
.srv-grand small{font-size:.76rem;letter-spacing:.16em;margin-bottom:10px}
.srv-grand h3{font-size:1.45rem;letter-spacing:-.02em;margin-bottom:12px}
.srv-grand p{font-size:1.02rem;line-height:1.65}
/* Titre de section tenu sur une ligne quand la largeur le permet. */
.titre-section.une-ligne{font-size:clamp(1.9rem,2.9vw,2.4rem)}
/* Sur écran large, une ligne du titre ne se recoupe jamais. En dessous,
   l'en-tête passe sur une colonne et le titre retrouve un retour normal. */
@media (min-width:1101px){.titre-section .ligne{white-space:nowrap}}
@media (max-width:1100px){.sec-tete{grid-template-columns:1fr}}

/* pilier : filet gauche */
.pilier{border-left:3px solid var(--rouge);padding:4px 0 4px 20px}
.pilier h3{font-size:1.06rem;margin-bottom:6px}
.pilier p{color:var(--encre-2);font-size:.95rem;margin:0}
/* Pilier avec pastille : filet rouge pleine hauteur, pastille, titre, texte. */
.pilier-grand{padding:2px 12px 6px 36px}
.pilier-grand h3{font-size:1.4rem;letter-spacing:-.015em;margin-bottom:12px}
.pilier-grand p{font-size:1.04rem;line-height:1.65}
.pilier-icone{padding:0 8px 0 24px}
.pilier-icone .pastille{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--pastille-rouge);color:var(--rouge);margin-bottom:22px}
.pilier-icone .pastille svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pilier-icone h3{font-size:1.2rem;margin-bottom:10px}
.pilier-icone p{font-size:1rem;line-height:1.6}
/* Titre de section en plusieurs phrases : une phrase par ligne. */
.titre-section .ligne{display:block}
.trait-court{display:block;width:56px;height:3px;border-radius:2px;background:var(--rouge);margin:6px 0 20px}

/* liste à puces rouges */
.puces{list-style:none;padding:0;margin:0}
.puces li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--encre-2)}
.puces li:before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--rouge)}

/* ---------- bandeau sombre ---------- */
/* Le bandeau a sa propre teinte : en mode sombre, « var(--encre) » serait
   clair, et le bandeau deviendrait blanc. */
.sombre{background:var(--bande);color:#fff;padding:72px 0}
.sombre h2{color:#fff}
.sombre p{color:#C3CCD3}
.sombre .sur-titre{color:var(--rouge-vif)}
.sombre .trait-court{background:var(--rouge-vif)}
.sombre-grille{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sombre-grille{align-items:start}
.sombre .titre-section{color:#fff}
.sombre-texte{font-size:1.12rem;line-height:1.65;margin:26px 0 0;text-wrap:pretty}
.sombre-sous-titre{font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em;font-weight:700;margin:0 0 28px}
/* Tuiles des technologies : logo en couleur, nom dessous, cinq par ligne. */
.technos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.technos li{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:104px;padding:14px 6px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.technos li:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.technos img{width:36px;height:36px;display:block}
.technos span{font-size:.95rem;color:#E4EAEE;text-align:center}
@media (max-width:620px){.technos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- bloc métier détaillé ---------- */
.detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;padding:34px 0;border-top:1px solid var(--filet)}
.detail:first-of-type{border-top:0;padding-top:0}
.detail h2{font-size:1.75rem}

/* ---------- accueil : métiers (Nous rejoindre) ---------- */
.metier{padding:30px 28px 32px}
.metier .pastille,.atout .pastille{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--pastille-rouge);color:var(--rouge);margin-bottom:22px}
.metier .pastille svg,.atout .pastille svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.metier .pastille .plein,.atout .pastille .plein{fill:currentColor;stroke:none}
.metier h3{font-size:1.3rem;letter-spacing:-.015em;margin-bottom:12px}
.metier p{font-size:1rem;line-height:1.65}

/* ---------- accueil : À propos et carte EOXIS ---------- */
.apropos-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:center}
.apropos-grille .sec-tete{margin-bottom:24px}
.apropos-lead{font-size:1.2rem;line-height:1.6;color:var(--encre-2);margin:0 0 36px;text-wrap:pretty}
.atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.atout{padding:0 16px 0 18px;border-left:1px solid var(--filet)}
.atout .pastille{width:42px;height:42px;margin-bottom:16px}
.atout .pastille svg{width:22px;height:22px}
.atout h3{font-size:1rem;line-height:1.3;margin-bottom:10px}
.atout p{font-size:.95rem;line-height:1.6;color:var(--encre-2);margin:0}
.lien-r .fleche{width:18px;height:18px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.carte-eoxis{min-height:460px;display:flex;background:var(--carte);border:1px solid var(--filet);border-radius:12px;overflow:hidden;box-shadow:var(--ombre)}
.carte-eoxis-texte{flex:1;position:relative;padding:40px 34px 34px 38px;border-left:3px solid var(--rouge);display:flex;flex-direction:column}
/* Semis de points discret, en haut à droite : l'idée d'une carte, sans en dessiner une. */
.carte-eoxis-texte::after{content:"";position:absolute;top:0;right:0;width:62%;height:58%;background-image:radial-gradient(var(--encre-3) .9px,transparent 1.1px);background-size:7px 7px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse at 75% 30%,#000 10%,transparent 68%);mask-image:radial-gradient(ellipse at 75% 30%,#000 10%,transparent 68%);pointer-events:none}
.carte-eoxis-texte>*{position:relative;z-index:1}
.carte-eoxis-logo{display:flex;align-items:center;gap:10px}
.carte-eoxis-logo .sym{width:auto;height:34px}
.carte-eoxis-logo .mot{width:auto;height:26px}
.carte-eoxis-logo .mot-sombre{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .carte-eoxis-logo .mot-clair{display:none}
  :root:not([data-theme="light"]) .carte-eoxis-logo .mot-sombre{display:block}
}
:root[data-theme="dark"] .carte-eoxis-logo .mot-clair{display:none}
:root[data-theme="dark"] .carte-eoxis-logo .mot-sombre{display:block}
.carte-eoxis-groupe{font-family:var(--titre);font-size:.78rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--encre-3);margin:10px 0 0 2px}
.carte-eoxis-trait{display:block;width:34px;height:1px;background:var(--encre-3);opacity:.6;margin:22px 0 26px}
.carte-eoxis-devise{font-family:var(--titre);font-size:.84rem;font-weight:600;letter-spacing:.24em;line-height:2;text-transform:uppercase;color:var(--encre-2);margin:0 0 16px}
.carte-eoxis-presentation{font-size:.92rem;line-height:1.6;color:var(--encre-2);margin:0 0 26px}
.carte-eoxis-role{display:flex;align-items:flex-start;gap:12px;margin:auto 0 16px;font-family:var(--titre);font-size:.74rem;font-weight:600;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--encre-2)}
.point-rouge{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--rouge);margin-top:6px;box-shadow:0 0 0 4px var(--pastille-rouge)}
.carte-eoxis-lien{font-size:.95rem}
@media (max-width:1100px){
  .apropos-grille{grid-template-columns:1fr}
}
@media (max-width:620px){
  .atouts{grid-template-columns:1fr;row-gap:26px}
}

/* ---------- pages intérieures : héros ---------- */
.heros-page{padding:72px 0 64px}
.heros-page-titre{font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:12px 0 22px}
.heros-page-titre>span{display:block}
.heros-page .heros-grille{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media (min-width:1101px){.heros-page-titre>span{white-space:nowrap}}
.heros-page-titre .point{display:inline;color:var(--rouge)}
.heros-page .lead{font-size:1.1rem;max-width:52ch}
.gages{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;row-gap:18px}
.gages li{display:flex;align-items:center;gap:12px;margin:0;padding:0 18px;border-left:1px solid var(--filet);font-size:.88rem;line-height:1.4;color:var(--encre-2)}
.gages li:first-child{padding-left:0;border-left:0}
.gages svg{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:var(--rouge);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gages svg .plein{fill:var(--rouge);stroke:none}

/* ---------- schéma du cycle, page Services ---------- */
.cycle-services svg{width:100%;height:auto;display:block;overflow:visible}
.cs-rouge{stop-color:var(--rouge)}
.cs-gris{stop-color:var(--encre-3);stop-opacity:.5}
.cs-rail{fill:none;stroke-width:1.8;stroke-linecap:round}
.cs-retour{fill:none;stroke:var(--encre-3);stroke-width:1.1;stroke-dasharray:4 4;opacity:.8}
.cs-pointe{fill:var(--encre-3)}
.cs-noeud{fill:var(--carte);stroke:var(--filet);stroke-width:.8;filter:drop-shadow(0 6px 10px var(--ch-ombre))}
.cs-entree .cs-noeud{stroke:var(--rouge);stroke-width:1.4}
.cs-halo{fill:none;stroke:var(--rouge);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.cycle-services .ico{fill:none;stroke:var(--rouge);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cycle-services .ico .plein{fill:var(--rouge);stroke:none}
.cs-titre{font-family:var(--titre);font-weight:700;font-size:10.5px;letter-spacing:.06em;fill:var(--encre)}
.cs-sous{font-family:var(--texte);font-size:8.2px;fill:var(--encre-3)}
.cs-legende rect{fill:var(--fond);stroke:var(--filet);stroke-width:1}
.cs-legende text{font-family:var(--texte);font-size:8.4px;fill:var(--encre-2)}
.cs-promesse{font-family:var(--titre);font-size:8.6px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;fill:var(--encre-3)}
.cs-trait{stroke:var(--rouge);stroke-width:2}
:root.js .rv.in .cs-station .cs-halo,:root.js .cycle-services .cs-station .cs-halo{animation:ath-halo 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
:root.js .cycle-services .ch-flux{animation:ath-flux 9s linear infinite}

/* ---------- cartes de la page Services ---------- */
.srv-page{display:block;padding:26px 28px 30px}
.srv-page-tete{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.srv-page .pastille{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:var(--pastille-rouge);color:var(--rouge)}
.srv-page .pastille svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.srv-page .pastille .plein{fill:currentColor;stroke:none}
.srv-page small{flex:1;font-family:var(--titre);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge-txt)}
.srv-page-fleche .fleche{width:20px;height:20px;fill:none;stroke:var(--encre-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
a.srv-page:hover .srv-page-fleche .fleche{transform:translateX(4px);stroke:var(--rouge)}
.srv-page h3{font-size:1.32rem;letter-spacing:-.015em;margin-bottom:8px}
.srv-page p{font-size:1rem;line-height:1.6}

/* ---------- bandeau « Un projet ? Parlons-en. » ---------- */
.appel-projet{padding:56px 0;background:var(--doux);border-top:1px solid var(--filet)}
.appel-projet-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.appel-projet .trait-court{margin:0 0 18px}
.appel-projet h2{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em;font-weight:700;margin:0 0 8px}
.appel-projet p{color:var(--encre-2);margin:0}
.appel-projet .btn{min-height:54px;padding:0 30px}

/* ---------- cartes à pastille (pages intérieures) ---------- */
.metier-pile>div{margin:0}
.metier-num{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--encre-3);margin:0 0 6px}
.metier-ligne{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.metier-ligne .pastille{margin:0}
.metier .pastille{flex:0 0 auto}

/* ---------- parcours fléché ---------- */
.parcours{margin-top:48px}
.parcours .sur-titre{margin-bottom:22px}
.parcours-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.parcours-etapes li{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 10px}
.parcours-etapes li+li::before{content:"";position:absolute;left:-18px;top:14px;width:36px;height:1px;background:var(--encre-3)}
.parcours-etapes li+li::after{content:"";position:absolute;left:13px;top:10px;width:8px;height:8px;border-top:1px solid var(--encre-3);border-right:1px solid var(--encre-3);transform:rotate(45deg)}
.parcours-ico svg{width:30px;height:30px;fill:none;stroke:var(--rouge);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.parcours-ico svg .plein{fill:var(--rouge);stroke:none}
.parcours-etapes strong{font-family:var(--titre);font-size:1rem;color:var(--encre)}
.parcours-texte{font-size:.9rem;line-height:1.5;color:var(--encre-2);max-width:22ch}
@media (max-width:760px){
  .parcours-etapes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .parcours-etapes li::before,.parcours-etapes li::after{display:none}
}

/* ---------- héros avec visuel ---------- */
.heros-visuel-panneau{position:relative;min-height:340px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--carte) 0%,var(--doux) 55%,var(--pastille-rouge) 100%);border:1px solid var(--filet);display:flex;align-items:center;justify-content:flex-end}
.heros-visuel-panneau>img:not(.heros-visuel-symbole){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.heros-visuel-symbole{position:absolute;left:-40px;bottom:-50px;width:320px;height:auto;opacity:.09}
.heros-visuel-devise{position:relative;margin:0 44px 0 0;font-family:var(--titre);font-weight:600;font-size:1.9rem;line-height:1.12;letter-spacing:-.02em;color:var(--encre)}
.heros-visuel-devise .trait-court{margin:18px 0 0}
.avec-photo .heros-visuel-devise{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}

/* ---------- schéma en cercle (Notre approche) ---------- */
.cycle-cercle svg{width:100%;max-width:480px;height:auto;display:block;margin-inline:auto;overflow:visible}
.cc-piste{fill:none;stroke:var(--filet);stroke-width:1}
.cc-arc{fill:none;stroke:var(--rouge);stroke-width:1.6;stroke-linecap:round}
.cc-arc-retour{stroke:var(--encre-3)}
.cc-pointe{fill:var(--rouge)}
.cc-flux{fill:none;stroke:var(--rouge-vif);stroke-width:3;stroke-linecap:round;stroke-dasharray:24 1000;stroke-dashoffset:1024;opacity:0}
:root.js .cycle-cercle .cc-flux{animation:ath-flux 9s linear infinite}
:root.js .cycle-cercle .cs-station .cs-halo{animation:ath-halo 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)}
.cycle-cercle .ico{fill:none;stroke:var(--rouge);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cycle-cercle .ico .plein{fill:var(--rouge);stroke:none}
.cc-centre{font-family:var(--texte);font-size:11.5px;fill:var(--encre-3)}
.cc-num{font-family:var(--titre);font-size:9px;letter-spacing:.1em;fill:var(--encre-3)}
.cycle-cercle .cs-titre{font-size:12px}
.cycle-cercle .cs-sous{font-size:9.5px}

/* ---------- « Notre place » : carte des implantations ---------- */
.implantations{position:relative;overflow:hidden;background:var(--fond);padding:80px 0 56px;border-top:1px solid var(--filet)}
.implantations-carte{position:absolute;top:0;right:0;width:66%;max-width:1150px;height:440px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.implantations-carte svg{width:100%;height:100%;display:block}
.carte-mer{fill:var(--carte-mer)}
.carte-terre{fill:var(--carte-terre);stroke:var(--carte-frontiere);stroke-width:1;stroke-linejoin:round}
.carte-pays{fill:var(--carte-pays)}
.carte-etiquette{font-family:var(--texte);font-size:19px;fill:var(--carte-etiquette)}
.carte-etiquette.forte{font-family:var(--titre);font-size:24px;font-weight:700;fill:var(--encre)}
.carte-repere{fill:var(--rouge)}
.carte-ombre{fill:rgba(0,0,0,.22)}
.carte-encart{fill:var(--carte);stroke:var(--filet);filter:drop-shadow(0 8px 14px var(--ch-ombre))}
.carte-encart-titre{font-family:var(--titre);font-size:23px;font-weight:700;fill:var(--encre)}
.carte-encart-lieu{font-family:var(--texte);font-size:17px;fill:var(--encre-2)}
.carte-drapeau-filet{fill:none;stroke:rgba(0,0,0,.12)}
.implantations-in{position:relative;min-height:320px}
.implantations-texte{max-width:470px}
.implantations-texte .titre-section{margin:10px 0 20px}
.implantations-texte p:not(.sur-titre){color:var(--encre-2);font-size:1.05rem;line-height:1.65;margin:0 0 28px}
.reperes{list-style:none;margin:56px 0 0;padding:22px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--carte);border:1px solid var(--filet);border-radius:10px;position:relative}
.reperes li{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;padding:4px 12px;border-left:1px solid var(--filet)}
.reperes li:first-child{border-left:0}
.reperes svg{flex:0 0 auto;width:32px;height:32px;fill:none;stroke:var(--rouge);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reperes span{display:flex;flex-direction:column;font-size:.86rem;color:var(--encre-3);line-height:1.35}
.reperes strong{font-family:var(--titre);font-size:1rem;color:var(--encre)}
@media (max-width:980px){
  .implantations-carte{position:relative;width:100%;max-width:none;height:300px;margin-bottom:28px;-webkit-mask-image:none;mask-image:none}
  .implantations{padding-top:0}
  .reperes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .reperes li:nth-child(3){border-left:0}
}

/* ---------- page Expertises ---------- */
.heros-expertises .heros-grille{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr)}
.heros-devise{margin:0;padding-left:30px;border-left:1px solid var(--filet);font-family:var(--titre);font-size:.84rem;font-weight:600;letter-spacing:.26em;line-height:2.1;text-transform:uppercase;color:var(--encre-2)}
.heros-devise .trait-court{margin:18px 0 0}
/* Colonne de gauche assez large pour quatre pastilles d'outils sur une ligne, identique d'un domaine à l'autre. */
.domaine{display:grid;grid-template-columns:52px minmax(460px,max-content) minmax(0,1fr) 28px;gap:0 30px;align-items:start;padding:34px 0;border-top:1px solid var(--filet)}
.domaine:first-child{border-top:0;padding-top:4px}
.domaine-pastille{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;background:var(--pastille-rouge);color:var(--rouge)}
.domaine-pastille svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.domaine-pastille .plein{fill:currentColor;stroke:none}
.domaine h2{font-size:1.55rem;letter-spacing:-.02em;margin:0 0 10px}
.domaine-accroche{color:var(--encre-2);margin:0 0 18px;max-width:44ch}
.domaine-gauche{min-width:0}
.domaine-droite{padding-left:30px;border-left:1px solid var(--filet)}
.domaine-droite>p{color:var(--encre-2);margin:0 0 18px;line-height:1.65}
.puces-carrees{list-style:none;margin:0;padding:0}
.puces-carrees li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--encre-2)}
.puces-carrees li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--rouge)}
.domaine-lien{align-self:center;color:var(--encre-2)}
.domaine-lien .fleche{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.domaine-lien:hover{color:var(--rouge)}
.domaine-lien:hover .fleche{transform:translateX(4px)}
.outils{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:8px}
.outils li{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 11px;white-space:nowrap;border:1px solid var(--filet);border-radius:7px;background:var(--carte);font-size:.86rem;color:var(--encre)}
.outils img{width:18px;height:18px;display:block}
.trait-dessous{margin:14px 0 16px}
@media (max-width:980px){
  .heros-expertises .heros-grille{grid-template-columns:1fr}
  .domaine{grid-template-columns:52px minmax(0,1fr);row-gap:20px}
  .domaine-droite{grid-column:2;padding-left:0;border-left:0}
  .domaine-lien{display:none}
  .outils{flex-wrap:wrap}
}

/* ---------- formulaire ---------- */
.form{display:grid;gap:15px;max-width:720px;width:100%;margin-inline:auto}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form label{display:block;font-size:.86rem;font-weight:600;color:var(--encre-2);margin-bottom:6px;font-family:var(--titre)}
.form input,.form textarea,.form select{width:100%;min-height:48px;padding:12px;border:1px solid var(--filet);border-radius:5px;background:var(--carte);color:var(--encre);font:inherit;font-size:1rem}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--rouge)}
.form .choix{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--encre-2)}
.form .choix input{width:auto;min-height:0;margin-top:4px}
.form .aide{font-size:.85rem;color:var(--encre-3);margin:0}
.form ::placeholder{color:var(--encre-3);opacity:1}
.form select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A939A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.form .cf-turnstile{margin-top:4px;min-height:65px}
.athf-envoi{margin:10px 0 0}
.btn-envoi{min-height:56px;padding:0 30px;font-size:1.05rem}
.etat{min-height:1.3em;font-size:.93rem}
.etat.ok{color:#0B7A53}
.etat.ko{color:var(--rouge-txt)}

/* ---------- contact ---------- */
.contact-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.contact-lead{font-size:1.2rem;line-height:1.65;color:var(--encre-2);margin:22px 0 0}
.contact-sep{border:0;border-top:1px solid var(--filet);margin:36px 0 34px}
/* ---------- page Contact : héros ---------- */
.heros-contact{position:relative;padding:58px 0 40px}
/* La grille déborde dans la marge de droite sur les grands écrans : le texte
   reste aligné sur le logo, le réseau et la devise prennent la place libre. */
.heros-contact-grille{position:relative;display:grid;grid-template-columns:520px minmax(0,1fr) 160px;gap:28px;align-items:center;margin-right:min(0px,calc((var(--max) - 100vw) / 2))}
.heros-contact .heros-page-titre{margin-bottom:18px}
.heros-contact .lead{max-width:48ch}
.contact-atouts{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,max-content);gap:26px}
.contact-atouts li{display:flex;align-items:flex-start;gap:12px;margin:0}
.contact-atouts .pastille{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:var(--pastille-rouge);color:var(--rouge)}
.contact-atouts .pastille svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-atouts li>span:last-child{display:flex;flex-direction:column;max-width:150px;font-size:.8rem;line-height:1.45;color:var(--encre-2)}
.contact-atouts strong{font-family:var(--titre);font-size:.9rem;color:var(--encre);margin-bottom:3px;white-space:nowrap}
.heros-contact-visuel{min-width:0}
.reseau{display:block;width:100%;height:auto;overflow:visible}
.rs-fond{fill:none;stroke:var(--encre-3);stroke-width:1;stroke-dasharray:3 5;opacity:.35}
.rs-lien{fill:none;stroke:var(--encre-3);stroke-width:1.2;opacity:.55}
.rs-point{fill:var(--rouge)}
.rs-dessus{fill:var(--carte);stroke:var(--carte);stroke-width:6;stroke-linejoin:round}
.rs-gauche{fill:var(--carte-2);stroke:var(--carte-2);stroke-width:6;stroke-linejoin:round}
.rs-droite{fill:var(--filet);stroke:var(--filet);stroke-width:6;stroke-linejoin:round}
.rs-tuile,.rs-centre{filter:drop-shadow(0 12px 14px var(--ch-ombre))}
.rs-lueur{stroke:var(--rouge);stroke-width:5;stroke-linecap:round;opacity:.55;filter:url(#rs-flou)}
.reseau .ico{fill:none;stroke:var(--encre);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reseau .ico .plein{fill:var(--encre);stroke:none}
.rs-titre{font-family:var(--titre);font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;fill:var(--encre)}
.rs-sous{font-family:var(--texte);font-size:13px;fill:var(--encre-2)}
.heros-contact-devise{position:relative;align-self:end;margin:0 0 4px;font-size:.95rem;line-height:1.45;color:var(--encre-2)}
.heros-contact-devise-titre{display:block;font-family:var(--titre);font-size:.8rem;font-weight:600;letter-spacing:.2em;line-height:1.6;text-transform:uppercase;color:var(--encre)}
.heros-contact-devise .trait-court{width:34px;height:2px;margin:14px 0 14px}
/* Bande rouge en diagonale, qui monte du bas du héros vers la devise. */
.heros-contact-devise::before{content:"";position:absolute;left:-92px;bottom:-40px;width:34px;height:210px;background:linear-gradient(180deg,transparent 0%,var(--rouge) 100%);opacity:.75;transform:skewX(-28deg);transform-origin:bottom;pointer-events:none}
.contact-titre{font-size:1.5rem}
.contact-delais{display:flex;align-items:flex-start;gap:16px;margin:32px 0 0;padding-top:28px;border-top:1px solid var(--filet)}
.contact-delais svg{flex:0 0 auto;width:28px;height:28px;fill:none;stroke:var(--encre);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-delais p{margin:0;display:flex;flex-direction:column;gap:4px;color:var(--encre-2);font-size:.95rem;line-height:1.6}
.contact-delais strong{font-family:var(--titre);color:var(--encre);font-size:1rem}
@media (max-width:1360px){
  .heros-contact-grille{grid-template-columns:520px minmax(0,1fr)}
  .heros-contact-devise{display:none}
}
@media (max-width:1180px){
  .heros-contact-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .contact-atouts{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .heros-contact-devise{display:none}
}
@media (max-width:980px){
  .heros-contact-grille{grid-template-columns:1fr}
  .heros-contact-visuel{max-width:560px}
}
@media (max-width:620px){
  .contact-atouts{grid-template-columns:1fr;gap:16px}
  /* À cette largeur, les étiquettes du réseau tomberaient sous 8 px : il s'efface. */
  .heros-contact .heros-contact-visuel{display:none}
}

/* Coordonnées : une pastille par ligne, le texte aligné sur son haut. */
.coord{list-style:none;margin:0;padding:0;display:grid;gap:22px;color:var(--encre-2);font-size:1.05rem;line-height:1.6}
.coord li{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:center;margin:0}
.coord li:first-child{align-items:start}
.coord strong{color:var(--encre);font-family:var(--titre);font-size:1.12rem}
.coord .pastille{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--pastille-rouge);color:var(--rouge)}
.coord .pastille svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.coord-fort{color:var(--encre);font-family:var(--titre);font-weight:600;font-size:1.12rem}
.coord-fort:hover{color:var(--rouge-txt)}

/* ---------- pied de page ---------- */
.pied{background:var(--carte);border-top:1px solid var(--filet);padding:56px 0 28px;font-size:.93rem}
.pied-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px}
.pied-marque{max-width:34ch}
.pied-col a.pied-reseau{display:inline-flex;margin-top:8px;color:var(--encre)}
.pied-reseau svg{width:22px;height:22px;fill:currentColor}
.pied-col a.pied-reseau:hover{color:var(--rouge-txt)}
.pied-col h2{font-family:var(--titre);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);margin-bottom:14px}
.pied-col a,.pied-cols .pied-txt a{display:block;color:var(--encre-2);padding:5px 0}
.pied-col a:hover{color:var(--rouge-txt)}
.pied-txt{color:var(--encre-2);margin:0 0 12px}
.baseline{font-family:var(--titre);font-weight:600;font-size:.82rem;letter-spacing:.1em;color:var(--encre-3);margin:14px 0 10px}
.pied-bas{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:42px;padding-top:22px;border-top:1px solid var(--filet);color:var(--encre-3)}
.pied-bas p{margin:0}
.pied-legal{display:flex;gap:20px;flex-wrap:wrap}
.pied-legal a:hover,.pied-legal button:hover{color:var(--rouge-txt)}

/* ---------- bandeau cookies ---------- */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--carte);border-top:1px solid var(--filet);box-shadow:0 -8px 28px rgba(0,0,0,.12)}
.bandeau-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.bandeau-cookies p{margin:4px 0 0;font-size:.9rem;color:var(--encre-2);max-width:74ch}
.bandeau-cookies a{color:var(--rouge-txt);text-decoration:underline}
.bandeau-actions{display:flex;gap:12px}
.bandeau-actions .btn{min-height:44px;padding:0 20px}

/* ---------- contenu éditorial (pages légales) ---------- */
.prose{max-width:76ch}
.prose h3{margin-top:30px;font-size:1.1rem}
.prose p,.prose li{color:var(--encre-2)}

/* ---------- 404 ---------- */
.err{padding:110px 0;text-align:center}
.err .actions{justify-content:center}

/* ---------- apparition au défilement ---------- */
:root.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
:root.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}

/* ---------- adaptatif ---------- */
@media (max-width:1100px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:14px 24px 22px;background:var(--carte);border-bottom:1px solid var(--filet);box-shadow:var(--ombre)}
  .nav.ouvert{display:flex}
  .burger{display:inline-flex}
  .nav-tools{margin:10px 0 0}
  .dd-m{position:static;display:flex;box-shadow:none;border:0;padding:2px 0 8px 12px;min-width:0}
  .g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .heros-grille,.sombre-grille,.contact-grille,.detail{grid-template-columns:1fr}
  .heros{padding:64px 0 56px}
  .sec{padding:58px 0}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied-cols{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:700px){
  /* Les sélecteurs reprennent le parent : « .chaine svg » porte déjà un
     display, et l'emporterait sur une classe seule. */
  .chaine .chaine-large{display:none}
  .chaine .chaine-compacte{display:block;max-width:340px;margin-inline:auto}
}
@media (max-width:620px){
  .wrap,.topin{padding:0 20px}
  .g2,.g3,.g4,.g5,.form .duo{grid-template-columns:1fr}
  .pied-cols{grid-template-columns:1fr}
  .sec-tete{row-gap:14px}
  .bandeau-actions{width:100%}
  .bandeau-actions .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root.js .rv{opacity:1;transform:none;transition:none}
  .ch-flux{opacity:0}
  .ch-halo{opacity:0}
  :root.js .chaine.en-vue .ch-flux,
  :root.js .chaine.en-vue .ch-station .ch-port-halo,
  :root.js .cycle-cercle .cc-flux,:root.js .cycle-cercle .cs-station .cs-halo,
  :root.js .rv.in .cs-station .cs-halo,:root.js .cycle-services .cs-station .cs-halo,:root.js .cycle-services .ch-flux,
  :root.js .chaine.en-vue .ch-station .ch-halo,
  :root.js .chaine.en-vue .ch-station .ch-noeud,
  :root.js .chaine.en-vue .ch-station .ch-titre{animation:none}
  a.card:hover{transform:none}
}