/* ==========================================================================
   Appel Malade - feuille unique
   Tokens et composants issus de data/strategie/08-DESIGN-SYSTEM.md
   Regle cardinale : le texte courant ne depasse jamais 68 caracteres par ligne.
   ========================================================================== */

:root{
  --bleu-600:#3E6779;
  --bleu-700:#2F5A6C;
  --bleu-500:#5C8AA2;
  --bleu-300:#A0D4EF;
  --bleu-050:#EDF2F5;
  --encre:#16212B;
  --encre-2:#3B4C57;
  --gris:#6B7C86;
  --ligne:#D8E1E5;
  --blanc:#FFFFFF;

  --vert:#2F7D57;
  --ambre:#B96E15;
  --rouge:#B0353B;

  --t-h1:clamp(30px,4.5vw,44px);
  --t-h2:26px;
  --t-h2-grand:33px;

  /* Icones en trace 1.6, jeu unique pour tout le site */
  --i-piece:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M4.9 6.3l2.9 2.9M16.2 14.8l2.9 2.9M3 12h4M17 12h4M4.9 17.7l2.9-2.9M16.2 9.2l2.9-2.9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  --i-panne:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
  --i-photo:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h3l1.5-2h9L18 8h3v11H3z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E");
  --i-delai:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
  --i-zone:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --i-outil:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a3.8 3.8 0 0 0 5 5l-8 8a2.5 2.5 0 0 1-3.5-3.5z'/%3E%3Cpath d='M14.5 6.5 18 3l3 3-3.5 3.5'/%3E%3C/svg%3E");
  --i-marque:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h9'/%3E%3C/svg%3E");
  --t-h3:20px;
  --t-h4:17px;
  --t-body:17px;
  --t-small:14.5px;
  --t-mono:15px;

  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px;
  --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px;

  --r:3px; --r-carte:6px; --r-pastille:999px;

  --texte-max:68ch;
  --contenu-max:1180px;
  --large:1400px;

  --titre:"Archivo","Segoe UI",Arial,sans-serif;
  --corps:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--corps);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--bleu-600);text-underline-offset:3px;}
a:hover{color:var(--encre);}
:focus-visible{outline:2px solid var(--bleu-500);outline-offset:2px;}

h1,h2,h3,h4{font-family:var(--titre);font-weight:600;line-height:1.15;text-wrap:balance;margin:0 0 var(--e3);}
h1{font-size:var(--t-h1);letter-spacing:-.01em;}
h2{font-size:var(--t-h2);margin-top:var(--e7);}
h3{font-size:var(--t-h3);margin-top:var(--e5);}
h4{font-size:var(--t-h4);}
p{margin:0 0 var(--e4);max-width:var(--texte-max);}
ul,ol{margin:0 0 var(--e4);padding-left:1.25em;max-width:var(--texte-max);}
li{margin-bottom:var(--e1);}

.wrap{width:100%;max-width:var(--contenu-max);margin:0 auto;padding:0 var(--e5);}
.wrap-large{max-width:var(--large);}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--e4);top:var(--e4);z-index:99;background:var(--blanc);padding:var(--e3) var(--e4);border:2px solid var(--bleu-500);}

/* --- Boutons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--titre);font-weight:600;font-size:15.5px;
  padding:12px 20px;border-radius:var(--r);text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
/* Contraste mesure a 3,74 avec --bleu-500, sous le minimum de 4,5. --bleu-600
   appartient a la meme palette de marque et monte a 6,14. */
.btn-primaire{background:var(--bleu-600);color:var(--blanc);border-color:var(--bleu-600);}
.btn-primaire:hover{background:var(--bleu-700);border-color:var(--bleu-700);color:var(--blanc);}
.btn-fantome{background:transparent;color:var(--bleu-600);border-color:var(--ligne);}
.btn-fantome:hover{border-color:var(--bleu-500);background:var(--bleu-050);color:var(--bleu-600);}

/* --- Bandeau et en-tete --- */
.bandeau{background:var(--bleu-600);color:#fff;font-size:13.5px;}
.bandeau .wrap{display:flex;gap:var(--e5);justify-content:center;padding-top:7px;padding-bottom:7px;}
.bandeau span{opacity:.92;}

.hd{position:sticky;top:0;z-index:50;background:var(--blanc);border-bottom:1px solid var(--ligne);}
.hd .wrap{display:flex;align-items:center;gap:var(--e5);min-height:74px;position:relative;}
.hd .logo{flex:0 0 auto;}
.hd .logo img{width:190px;height:auto;}

.mega{display:flex;align-items:center;gap:var(--e1);flex:1 1 auto;min-width:0;}
.mega > a,.mega .mt{
  display:inline-block;padding:10px 10px;text-decoration:none;
  font-family:var(--titre);font-weight:500;font-size:15.5px;color:var(--encre);border-radius:var(--r);
  /* Sans cela, le chevron se detache du libelle et tombe sur une 2e ligne
     des que la barre se resserre. */
  white-space:nowrap;
}
.mega > a:hover,.mega .mt:hover{background:var(--bleu-050);color:var(--bleu-600);}
.mega [aria-current="page"],.mega .mi.active > .mt{color:var(--bleu-600);}
.mi{position:static;}

/* Deux choses tiennent a la hauteur de l'onglet. Le panneau s'ouvre au bas de
   la barre alors que l'onglet ne faisait que la hauteur de son libelle : entre
   les deux il restait 19 px ou le pointeur n'etait sur aucun des deux, et le
   survol se perdait avant d'atteindre le panneau. Et le trait de section, pour
   se poser sur l'arete basse de la barre, a besoin que l'onglet y descende.
   Desktop seulement : en dessous de 961 px le menu s'ouvre au clic. */
@media (min-width:961px){
  .mega{align-self:stretch;align-items:stretch;}
  .mi{display:flex;align-items:center;border-bottom:3px solid transparent;}
  .mi.active{border-bottom-color:var(--bleu-500);}
}
.ar{font-size:10px;color:var(--gris);margin-left:2px;}

.mp{
  position:absolute;left:var(--e5);right:var(--e5);top:100%;
  transform:translateY(6px);background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r-carte);
  box-shadow:0 12px 32px rgba(22,33,43,.10);
  opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;z-index:60;
}
.mi:hover .mp,.mi:focus-within .mp{opacity:1;visibility:visible;transform:translateY(0);}
.mp-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--e5);padding:var(--e5);}
.mcol{display:flex;flex-direction:column;gap:2px;}
.mh{
  font-family:var(--titre);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:var(--e2);
}
.mcol a{
  display:block;padding:7px var(--e2);border-radius:var(--r);text-decoration:none;color:var(--encre);
}
.mcol a:hover{background:var(--bleu-050);}
/* La page ouverte se distingue dans le panneau, pas seulement sa section. */
.mp a[aria-current="page"]{background:var(--bleu-050);box-shadow:inset 3px 0 0 var(--bleu-500);}
.mp a[aria-current="page"] b{color:var(--bleu-600);font-weight:600;}
.mcol a b{display:block;font-family:var(--titre);font-weight:500;font-size:15px;}
.mcol a small{display:block;color:var(--gris);font-size:13px;line-height:1.35;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e3);}
.mgrid a{font-size:14.5px;}
.mlien{display:inline-block;margin-top:var(--e3);font-weight:600;font-family:var(--titre);font-size:14.5px;}

.mcta{
  display:block;margin-top:auto;padding:var(--e4);border-radius:var(--r-carte);
  background:var(--bleu-500);color:#fff !important;text-decoration:none;
}
.mcta:hover{background:var(--bleu-600);}
.mcta.alt{background:var(--bleu-050);color:var(--encre) !important;border:1px solid var(--ligne);}
.mcta.alt:hover{background:#e3ebef;}
.mcta-ey{display:block;font-size:12.5px;opacity:.9;margin-bottom:var(--e1);}
.mcta b{display:block;font-family:var(--titre);font-size:16px;}
.mcta-b{display:block;margin-top:var(--e2);font-size:13.5px;font-weight:600;}

/* La zone de droite doit ceder quand la barre se resserre : figee en
   flex:0 0 auto, elle poussait le bouton devis hors de l ecran. */
/* L ecart boite/contenu qui interdisait de la pousser a droite est explique
   et corrige plus bas, dans la regle .rech-hd : sa boite est de nouveau egale
   a son contenu, donc margin-left:auto la colle a droite sans rien faire
   sortir. Mesure a 1100 px : boite 347, contenu 347, bord droit 1076, qui est
   exactement le bord du contenu. */
.hd-r{display:flex;align-items:center;gap:var(--e3);flex:0 1 auto;min-width:0;
  margin-left:auto;}
.hd-r .tel{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--encre);font-size:15px;}
.hd-r .tel svg{width:15px;height:15px;color:var(--bleu-500);}
.burger{display:none;background:none;border:1px solid var(--ligne);border-radius:var(--r);font-size:20px;padding:4px 10px;cursor:pointer;}

/* --- Fil d'Ariane et titre de page --- */
.ariane{border-bottom:1px solid var(--ligne);background:var(--bleu-050);}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2);margin:0;padding:10px 0;max-width:none;font-size:13.5px;}
.ariane li{margin:0;color:var(--gris);}
.ariane li+li::before{content:"›";margin-right:var(--e2);color:var(--ligne);}
.ariane a{color:var(--encre-2);text-decoration:none;}
.ariane a:hover{color:var(--bleu-600);text-decoration:underline;}

.page-tete{padding:var(--e7) 0 var(--e5);}
.page-tete h1{margin-bottom:var(--e3);}
/* le chapo et la premiere section se touchent, sinon un trou de 96px */
.page-tete + .section{padding-top:var(--e6);}

/* --- Accueil : hero (H1 rendu par front-page.php) --- */
.hero{background:var(--bleu-050);border-bottom:1px solid var(--ligne);padding:var(--e8) 0 var(--e7);}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e8);align-items:stretch;}
.hero h1{margin-bottom:var(--e4);}
.hero-img{margin:0;display:flex;}
.hero-img img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center;
  border-radius:var(--r-carte);border:1px solid var(--ligne);}
.hero .chapo{margin:0 0 var(--e6);}
.hero-a{display:flex;gap:var(--e3);flex-wrap:wrap;}
.hero-a .btn-fantome{background:var(--blanc);}
.hero-reperes{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);margin:var(--e6) 0 0;padding:0;
  font-family:var(--mono);font-size:14px;color:var(--gris);letter-spacing:0;}
.hero-reperes span{display:inline-flex;align-items:center;}
.hero-reperes span+span::before{content:"";width:4px;height:4px;border-radius:var(--r-pastille);
  background:var(--bleu-300);margin-right:var(--e3);flex:none;}
.chapo{font-size:19px;line-height:1.55;color:var(--encre-2);max-width:var(--texte-max);}
.art-meta{display:flex;gap:var(--e4);font-size:var(--t-small);color:var(--gris);margin-bottom:var(--e3);}


/* --- Tete de section : eyebrow + titre + chapo sur deux colonnes ---
   Sans ca, le contenu reste plafonne a 68ch et laisse 700px de blanc a droite
   sur un ecran de 1440 : la page parait maigre alors qu'elle ne l'est pas. */
.tete{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e5) var(--e8);
  align-items:start;margin:0 0 var(--e7);}
.tete h2{margin:0;font-size:var(--t-h2-grand);}
.tete .ey{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bleu-500);margin:0 0 var(--e3);}
.tete p{margin:0;color:var(--encre-2);font-size:17.5px;max-width:62ch;}
.tete p+p{margin-top:var(--e3);}

/* Bandeau de reassurance, juste sous le hero */
.reassur{border-bottom:1px solid var(--ligne);background:var(--blanc);}
.reassur ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--e4) var(--e6);list-style:none;margin:0;padding:var(--e5) 0;max-width:none;}
.reassur li{display:flex;gap:var(--e3);align-items:flex-start;margin:0;font-size:15.5px;
  color:var(--encre-2);line-height:1.45;}
.reassur b{display:block;font-family:var(--titre);font-size:15.5px;color:var(--encre);}

/* Icones : en CSS et non dans le contenu, pour ne pas dependre du filtrage HTML
   de WordPress. Trace uniforme, 1.6px, jamais d'emoji. */
.ico{flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-carte);
  background:var(--bleu-050);border:1px solid var(--ligne);
  display:inline-block;position:relative;}
.ico::after{content:"";position:absolute;inset:8px;background:var(--bleu-600);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;}
.ico-piece::after{-webkit-mask-image:var(--i-piece);mask-image:var(--i-piece);}
.ico-panne::after{-webkit-mask-image:var(--i-panne);mask-image:var(--i-panne);}
.ico-photo::after{-webkit-mask-image:var(--i-photo);mask-image:var(--i-photo);}
.ico-delai::after{-webkit-mask-image:var(--i-delai);mask-image:var(--i-delai);}
.ico-zone::after{-webkit-mask-image:var(--i-zone);mask-image:var(--i-zone);}
.ico-outil::after{-webkit-mask-image:var(--i-outil);mask-image:var(--i-outil);}
.ico-marque::after{-webkit-mask-image:var(--i-marque);mask-image:var(--i-marque);}

/* Fleche d'action sur les cartes qui sont des liens */
.carte-lien-i{position:relative;}
.carte-lien-i .go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e3);
  font-family:var(--titre);font-weight:600;font-size:14.5px;color:var(--bleu-600);}
.carte-lien-i .go::after{content:"→";display:inline-block;transition:transform .15s;}
.carte-lien-i:has(a):hover .go::after{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.carte-lien-i .go::after{transition:none;}}

/* --- Le corps des pages --- */
.section{padding:var(--e8) 0;}
@media (min-width:1200px){.section{padding:var(--e8) 0;}
  .section+.section-alt,.section-alt+.section{padding-top:var(--e9);}}
.section-alt{background:var(--bleu-050);}
.wrap > h2:first-child,.section .wrap > h2:first-child{margin-top:0;}

/* Reponse directe : le composant AEO central, 40 a 60 mots */
.reponse{
  font-size:18px;line-height:1.55;color:var(--encre);
  border-left:3px solid var(--bleu-500);background:var(--bleu-050);
  padding:var(--e4) var(--e5);border-radius:0 var(--r-carte) var(--r-carte) 0;
  margin:0 0 var(--e5);max-width:var(--texte-max);
}
.reponse p:last-child{margin-bottom:0;}

/* Encadre technique */
.encadre{
  background:var(--bleu-050);border-left:3px solid var(--bleu-500);
  padding:var(--e4) var(--e5);border-radius:0 var(--r-carte) var(--r-carte) 0;
  margin:var(--e5) 0;max-width:var(--texte-max);
}
.encadre b{font-family:var(--titre);}
.encadre p:last-child{margin-bottom:0;}

/* Une boite teintee est un BLOC : elle s'arretait a 68 caracteres alors que le
   sommaire juste dessous allait au bord du conteneur. Meme axe gauche mais deux
   bords droits sur deux boites de meme nature, ce qui se lit comme un defaut.
   Les boites prennent donc la largeur du conteneur ; c'est leur TEXTE qui garde
   la mesure de lecture. Un paragraphe nu, lui, reste borne par --texte-max. */
.encadre,.reponse,.statut{max-width:none;}
.encadre > *,.reponse > *{max-width:var(--texte-max);}

/* Encadre statut : uniquement pour un etat reel */
.statut{
  display:flex;gap:var(--e3);align-items:flex-start;
  padding:var(--e3) var(--e4);border-radius:var(--r-carte);
  border:1px solid var(--ligne);margin:var(--e4) 0;max-width:var(--texte-max);
  font-size:15.5px;
}
.statut::before{font-weight:700;font-family:var(--titre);flex:0 0 auto;}
.statut-ok{border-color:#bfe0cd;background:#f2f9f5;color:#1d5c3e;}
.statut-ok::before{content:"Disponible";color:var(--vert);}
.statut-attention{border-color:#eed8b6;background:#fdf7ee;color:#7a4a0d;}
.statut-attention::before{content:"A verifier";color:var(--ambre);}
.statut-arret{border-color:#eec6c8;background:#fdf2f3;color:#7d2429;}
.statut-arret::before{content:"Arretee";color:var(--rouge);}
/* Variante neutre, hors catalogue : le meme encart sans etiquette de stock. */
.statut-note{border-color:#bfe0cd;background:#f2f9f5;color:#1d5c3e;max-width:none;}
.statut-note::before{content:none;}

/* Bloc reference : la reference est toujours en monospace */
.bloc-ref{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4);
  background:var(--bleu-050);border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e4) var(--e5);margin:0 0 var(--e5);
}
.bloc-ref .ref{
  font-family:var(--mono);font-size:22px;font-weight:500;color:var(--encre);
  letter-spacing:.01em;user-select:all;
}
.bloc-ref .meta{display:flex;flex-direction:column;gap:2px;font-size:var(--t-small);color:var(--gris);}
.bloc-ref .meta b{color:var(--encre-2);font-family:var(--titre);font-size:15px;}
.bloc-ref .btn{margin-left:auto;}
code,.mono{font-family:var(--mono);font-size:var(--t-mono);background:var(--bleu-050);padding:1px 5px;border-radius:var(--r);}

/* Tableaux : overflow-x obligatoire */
/* L'ombre apparait du cote ou du contenu est cache et disparait en fin de
   course. Sans elle, un tableau coupe se lit comme du texte casse. */
.tableau:not(.tableau-index){overflow-x:auto;margin:var(--e5) 0;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--blanc) 30%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,var(--blanc) 30%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(22,33,43,.30),rgba(22,33,43,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(22,33,43,.30),rgba(22,33,43,0)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,24px 100%,24px 100%;
  background-attachment:local,local,scroll,scroll;}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px;}
th,td{text-align:left;padding:10px var(--e3);border-bottom:1px solid var(--ligne);vertical-align:top;}
/* La premiere colonne portait son padding gauche : son texte demarrait 13 px a droite
   de l'axe de la page, alors que titres, listes et paragraphes partent du bord. La
   derniere colonne perd le sien de la meme facon, pour que le tableau se cale sur la
   largeur du contenu et pas sur une boite un peu plus large. */
th:first-child,td:first-child{padding-left:0;}
th:last-child,td:last-child{padding-right:0;}
th{font-family:var(--titre);font-weight:600;font-size:14.5px;color:var(--encre-2);background:var(--bleu-050);}
tbody tr:hover{background:#fafcfd;}
td .mono,td code{background:none;padding:0;}

/* Pastilles de marque : reprises du site actuel */
.marques{display:flex;flex-wrap:wrap;gap:var(--e3);margin:var(--e5) 0;padding:0;list-style:none;max-width:none;}
.marques li{margin:0;}
.marques a,.marques span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:var(--r-pastille);background:var(--blanc);border:1px solid var(--ligne);white-space:nowrap;text-decoration:none;color:var(--encre-2);font-family:var(--titre);font-weight:600;font-size:15px;}
.marques a:hover{border-color:var(--bleu-500);color:var(--bleu-600);}
.marques img{max-width:66px;max-height:44px;object-fit:contain;}

/* Blocs chiffres */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e4);margin:var(--e5) 0;}
.chiffre{border:1px solid var(--ligne);border-radius:var(--r-carte);padding:var(--e4);background:var(--blanc);}
.chiffre b{display:block;font-family:var(--titre);font-size:32px;line-height:1.05;color:var(--bleu-600);}
.chiffre span{display:block;font-size:var(--t-small);color:var(--gris);margin-top:var(--e2);}
/* Sur telephone, minmax(180px) ne tient pas a deux dans 343 px : les 4 chiffres
   s'empilaient sur 4 rangees, soit 460 px de defilement pour quatre nombres.
   Mesure du 04/09 a 375 px. Deux colonnes, ils se lisent d'un coup d'oeil. */
@media (max-width:600px){
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3);}
  .chiffre{padding:var(--e3);}
  .chiffre b{font-size:27px;}
}

/* Sommaire ancre, obligatoire au-dela de 800 mots */
.sommaire{
  border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e4) var(--e5);margin:0 0 var(--e6);background:var(--blanc);
}
.sommaire b{display:block;font-family:var(--titre);font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris);margin-bottom:var(--e3);}
.sommaire ol{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--e6);max-width:none;}
.sommaire li{margin-bottom:6px;break-inside:avoid;}
.sommaire a{text-decoration:none;font-size:15.5px;}
.sommaire a:hover{text-decoration:underline;}

/* Grille de fiches et cartes de liens */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--e4);margin:var(--e5) 0;}
.fiche{
  border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;
  background:var(--blanc);display:flex;flex-direction:column;transition:border-color .15s;
}
.fiche:has(a):hover{border-color:var(--bleu-500);}
.fiche img{aspect-ratio:4/3;object-fit:contain;background:var(--bleu-050);padding:var(--e3);width:100%;}
.fiche-txt{padding:var(--e3) var(--e4) var(--e4);display:flex;flex-direction:column;gap:var(--e1);flex:1;}
.fiche-txt .ref{font-family:var(--mono);font-size:13.5px;color:var(--gris);}
.fiche-txt b{font-family:var(--titre);font-size:15.5px;font-weight:600;line-height:1.3;}
.fiche-txt b a{text-decoration:none;color:var(--encre);}
.fiche-txt b a:hover{color:var(--bleu-600);}
.fiche-txt .marque{font-size:13.5px;color:var(--gris);margin-top:auto;}

.cartes-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e4);margin:var(--e5) 0;}
/* Six entrees : en auto-fit elles tombent en 4 + 2, ce qui laisse deux cartes
   orphelines sur une ligne vide. On impose trois colonnes. */
.cartes-liens-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cartes-liens-6{grid-template-columns:repeat(3,minmax(0,1fr));}
.cartes-liens-4{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:640px){.cartes-liens-4{grid-template-columns:1fr;}}
@media (max-width:960px){.cartes-liens-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.cartes-liens-6{grid-template-columns:1fr;}}
@media (max-width:960px){.cartes-liens-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.cartes-liens-3{grid-template-columns:1fr;}}
.carte-lien-i{
  display:block;padding:var(--e4);border:1px solid var(--ligne);border-radius:var(--r-carte);
  text-decoration:none;color:var(--encre);background:var(--blanc);transition:border-color .15s;
}
.carte-lien-i:has(a):hover{border-color:var(--bleu-500);}
.carte-lien-i b{display:block;font-family:var(--titre);font-size:16px;margin-bottom:var(--e1);color:var(--bleu-600);}
.carte-lien-i span{display:block;font-size:14.5px;color:var(--gris);line-height:1.4;}

/* Bloc identification photo : le levier de conversion numero 1 */
.identif{
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e6);align-items:center;
  background:var(--bleu-050);border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e6);margin:var(--e6) 0;
}
.identif h2{margin-top:0;}
.identif .ident-pts{list-style:none;padding:0;margin:var(--e4) 0 0;}
.identif .ident-pts li{padding-left:26px;position:relative;margin-bottom:var(--e2);font-size:15.5px;}
.identif .ident-pts li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--bleu-500);}
.depot{
  border:2px dashed var(--bleu-300);border-radius:var(--r-carte);background:var(--blanc);
  padding:var(--e6) var(--e5);text-align:center;
}
.depot b{display:block;font-family:var(--titre);font-size:17px;margin-bottom:var(--e2);}
.depot span{display:block;color:var(--gris);font-size:var(--t-small);margin-bottom:var(--e4);}

/* FAQ */
.faq{margin:var(--e5) 0 0;max-width:none;
  columns:2;column-gap:var(--e8);}
.faq details{break-inside:avoid;-webkit-column-break-inside:avoid;
  border-bottom:1px solid var(--ligne);padding:var(--e4) 0;}
.faq details p{max-width:none;}
.faq details{border-bottom:1px solid var(--ligne);padding:var(--e4) 0;}
.faq summary{
  font-family:var(--titre);font-weight:600;font-size:17px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:var(--e4);align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--bleu-500);font-size:22px;line-height:1;flex:0 0 auto;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{margin-top:var(--e3);margin-bottom:0;color:var(--encre-2);}


/* Grille des familles du catalogue : la page d'accueil doit donner acces aux
   273 fiches en un coup d'oeil, pas se lire comme un article. */
.grille-fam{grid-template-columns:repeat(4,minmax(0,1fr));}
.grille-fam .fiche img{padding:0;background:var(--blanc);}
@media (max-width:1080px){.grille-fam{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){.grille-fam{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fiche img{transition:transform .2s;}
.fiche:has(b a:hover) img{transform:scale(1.03);}
.fiche-txt b{font-family:var(--titre);font-weight:600;font-size:15.5px;line-height:1.3;}
/* La chasse fixe est reservee aux CODES. Elle habillait aussi les phrases en clair
   des cartes (« la piece en main du resident »), ce qui donnait a une grille de photos
   l'air d'un listing technique. C'est une partie du « fourre-tout » vu par Karim. */
.fiche-txt .cpt{font-size:14px;line-height:1.45;color:var(--gris);}
.apres-grille{display:flex;flex-wrap:wrap;gap:var(--e3);max-width:none;margin-top:var(--e5);}
@media (prefers-reduced-motion:reduce){a.fiche img{transition:none;}
  a.fiche:hover img{transform:none;}}


/* --- Aiguillage : trois situations, chacune avec ses liens ---
   Le visiteur ne doit pas lire la page pour savoir ou aller. Il se reconnait
   dans une situation et part directement sur la bonne page. */
.voies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4);margin:var(--e6) 0 0;}
.voie{border:1px solid var(--ligne);border-radius:var(--r-carte);background:var(--blanc);
  padding:var(--e5);display:flex;flex-direction:column;gap:var(--e2);}
.voie .ico{margin-bottom:var(--e2);}
.voie b{font-family:var(--titre);font-size:18px;color:var(--encre);}
.voie > span{color:var(--gris);font-size:15px;line-height:1.45;}
.voie ul{list-style:none;padding:0;margin:var(--e3) 0 0;max-width:none;}
.voie li{margin:0;border-top:1px solid var(--ligne);}
.voie li a{display:block;padding:10px 0;text-decoration:none;color:var(--bleu-600);
  font-size:15.5px;line-height:1.35;}
.voie li a:hover{color:var(--encre);}
.voie li a::before{content:"→";margin-right:8px;color:var(--bleu-300);}

/* Meme composant en carte cliquable pour les types d'etablissement */
.voies-etab{grid-template-columns:repeat(3,minmax(0,1fr));}
a.voie{text-decoration:none;transition:border-color .15s;}
a.voie:hover{border-color:var(--bleu-500);}
a.voie .cpt{font-family:var(--mono);font-size:13.5px;color:var(--bleu-600);}
a.voie .go{margin-top:auto;padding-top:var(--e3);font-family:var(--titre);font-weight:600;
  font-size:14.5px;color:var(--bleu-600);}
a.voie .go::after{content:"→";margin-left:6px;display:inline-block;transition:transform .15s;}
a.voie:hover .go::after{transform:translateX(3px);}
.src{font-size:14px;color:var(--gris);margin-top:var(--e4);}
.villes a{font-size:14.5px;}
@media (prefers-reduced-motion:reduce){a.voie .go::after{transition:none;}}


/* Sommaire en barre : sur une page-hub, le bloc a deux colonnes fait pave. */
.sommaire-h{padding:var(--e3) var(--e4);margin:var(--e6) 0 0;display:flex;
  align-items:baseline;gap:var(--e4);flex-wrap:wrap;background:var(--bleu-050);border:none;}
.sommaire-h b{margin:0;flex:0 0 auto;}
.sommaire-h ol{columns:auto;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);counter-reset:none;}
.sommaire-h li{margin:0;}
.sommaire-h a{display:inline-block;font-size:14.5px;text-decoration:none;
  color:var(--bleu-600);background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r-pastille);padding:7px 14px;min-height:34px;}
.sommaire-h a:hover{border-color:var(--bleu-500);background:var(--bleu-500);color:var(--blanc);}


/* Introduction en deux colonnes : le schema du trajet de l'appel a droite.
   Seul, le paragraphe restait colle a gauche sur 68ch. */
.intro-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--e8);align-items:center;}
.schema{margin:0;}
.schema img{width:100%;height:auto;border-radius:var(--r-carte);border:1px solid var(--ligne);}

/* Une <figure> hors article n'avait AUCUNE regle : l'image sortait a la taille de son
   attribut width, soit 720 ou 800 px bruts, posee a nu dans la page. C'est ce que
   Karim a vu sur la page Ackermann le 31/08 (« desaxees et floues ») : une photo de
   720 px affichee a 720 px est molle des que l'ecran double les pixels, et elle ne
   s'aligne sur rien puisqu'elle ne remplit pas son cadre.
   La photo occupe donc un emplacement dimensionne, sur un fond blanc qui lui sert de
   plan, et le cadre garde son rapport pour que rien ne saute au chargement. */
/* Une carte .fiche posee SEULE, hors grille, s'etirait a toute la largeur du
   conteneur : la photo sortait en 1130 px depuis une source de 800, donc floue.
   Karim, 31/08 : « reduis les images, vu qu'elles sont floues ca denigre tout le
   reste du site ». Une photo produit ne doit jamais depasser sa taille source. */
.fiche:not(.grille .fiche):not(.grille-fam .fiche){
  max-width:360px;margin:var(--e6) 0;
}

.section figure{margin:var(--e6) 0;max-width:820px;}
/* Aucun rapport impose : les visuels vont du 4/3 des photos de famille au
   2,36:1 des photos d'ambiance. Un cadre unique en 4/3 laissait donc jusqu'a
   43 % de vide autour de l'image, mesure du 07/09 sur 131 emplacements. La
   hauteur se deduit maintenant du fichier, dont les balises portent les
   dimensions exactes depuis la meme date. */
.section figure > img{
  display:block;width:100%;height:auto;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e4);
}
/* Le suffixe ne suffisait pas : les schemas portent un ?v=2 de cache, donc
   aucun ne tombait dans cette regle et tous gardaient le cadre et la bordure. */
.section figure > img[src*=".svg"]{padding:0;border:0;}
.section figcaption{font-size:var(--t-small);color:var(--gris);margin-top:var(--e2);
  max-width:var(--texte-max);}

/* Logos des etablissements references, recuperes sur le site actuel
 *
 * Deux corrections du 04/09.
 *
 * 1. La grille etait en auto-fit : a 1280 px elle produisait 6 colonnes pour
 *    7 logos, donc un septieme seul sur sa ligne. En flex centre, le reste de
 *    la derniere ligne se centre au lieu de laisser un trou a droite.
 *
 * 2. `width:100%` etirait chaque logo a la largeur de sa case, quel que soit
 *    son rapport. Un logo carre comme la Croix-Rouge s'affichait donc a la
 *    meme largeur qu'un logo tres large comme Claudinon, et paraissait deux
 *    fois plus gros. On normalise sur la HAUTEUR, comme se fait une bande de
 *    logos : meme hauteur de capitale pour tous, largeur libre.
 *
 * Les fichiers ont ete recadres sur leur encre le meme jour : ils contenaient
 * jusqu'a 94 % de marge morte, et `object-fit:contain` ajustait cette marge
 * dans la case. */
.logos{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--e4);list-style:none;padding:0;margin:var(--e5) 0;max-width:none;}
.logos li{margin:0;display:flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e3);min-height:86px;flex:0 1 148px;}
.logos img{width:auto;max-width:100%;height:44px;object-fit:contain;
  mix-blend-mode:multiply;}

/* Icone en tete de carte-lien : les sections du bas etaient des cartes de texte nu */
.carte-lien-i .ico{margin-bottom:var(--e3);}

.logos-marques{max-width:760px;}
.logos-marques li{min-height:104px;padding:var(--e4);flex:0 1 190px;}
.logos-marques img{height:52px;max-width:170px;}

/* Section devis : formulaire a gauche, moyens de contact a droite */
.devis-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--e7);align-items:start;}
.formulaire{background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r-carte);padding:var(--e5) var(--e5) var(--e4);}
.formulaire p{max-width:none;margin:0 0 var(--e4);}
.formulaire label{display:block;font-family:var(--titre);font-weight:600;
  font-size:14.5px;color:var(--encre-2);}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],
.formulaire select,.formulaire textarea{
  width:100%;margin-top:6px;padding:11px var(--e3);font:inherit;font-size:15.5px;
  color:var(--encre);background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r);min-height:44px;}
.formulaire textarea{min-height:104px;resize:vertical;}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  outline:2px solid var(--bleu-500);outline-offset:1px;border-color:var(--bleu-500);}
.formulaire form{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e4);}
.formulaire form > p,.formulaire form > div{grid-column:1 / -1;}
.formulaire form > p.f-l{grid-column:auto;}
.formulaire .f-rgpd{font-size:14px;color:var(--gris);}
.formulaire .f-rgpd input{width:auto;min-height:0;margin-right:8px;}
.formulaire input[type=submit]{
  background:var(--bleu-500);color:var(--blanc);border:1px solid var(--bleu-500);
  border-radius:var(--r);padding:13px var(--e5);font-family:var(--titre);font-weight:600;
  font-size:15.5px;cursor:pointer;min-height:48px;width:auto;}
.formulaire input[type=submit]:hover{background:var(--bleu-600);border-color:var(--bleu-600);}
.formulaire .wpcf7-not-valid-tip{color:var(--rouge);font-size:13.5px;margin-top:4px;}
.formulaire .wpcf7-response-output{border:1px solid var(--ligne);border-radius:var(--r);
  padding:var(--e3) var(--e4);margin:var(--e4) 0 0;font-size:15px;}
.devis-a{background:var(--bleu-050);border-radius:var(--r-carte);padding:var(--e5);}
.devis-a b{display:block;font-family:var(--titre);font-size:15.5px;margin-bottom:var(--e2);}
.devis-a b+p{margin-bottom:var(--e5);}
.devis-a p:last-child{margin-bottom:0;}
.devis-a .s{color:var(--gris);font-size:14.5px;}
.tel-gros{font-family:var(--titre);font-size:24px;font-weight:600;text-decoration:none;
  color:var(--bleu-600);}


/* Hero plein cadre. La version en deux colonnes ressemblait a n'importe quel
   site de prestataire : l'image doit poser le lieu tout de suite.

   Trois defauts corriges le 31/08, tous les trois signales par Karim :
   1. le wrap etait a 980 px quand tout le reste du site est a 1180 : le H1 demarrait
      a 254 px et la bande de reassurance juste dessous a 154. Deux axes sur le
      premier ecran. Le hero prend maintenant le conteneur commun.
   2. le voile allait de 48 a 80 pour cent de noir, a plat : la photo devenait un
      aplat gris et le hero se lisait comme une page de service. Le voile est
      desormais DIRECTIONNEL, dense du cote du texte et presque nul du cote ou le
      couloir s'enfonce. Le texte garde son contraste, la photo existe.
   3. l'image faisait 940 px pour un cadre de 1440 et plus. */
.hero-plein{background-size:cover;background-position:center 62%;border-bottom:none;
  padding:var(--e9) 0;color:var(--blanc);min-height:min(78vh,620px);
  display:flex;align-items:center;}
/* 17ch cassait le H1 en cinq lignes : le titre est long parce qu'il porte le mot-cle,
   il faut donc lui donner de la largeur plutot que de le raccourcir et perdre le SEO. */
.hero-plein h1{color:var(--blanc);max-width:26ch;margin-bottom:var(--e4);
  text-wrap:balance;text-shadow:0 2px 30px rgba(10,18,25,.55);}
.hero-plein .chapo{color:#EEF4F7;max-width:52ch;margin-bottom:var(--e6);
  text-shadow:0 1px 18px rgba(10,18,25,.5);}
/* Sur une page interne le hero est plus bas que sur l'accueil : le fil d'Ariane vient
   d'occuper le haut de l'ecran, et le titre est plus long. */
.hero-page{min-height:min(52vh,420px);padding:var(--e8) 0;}
/* Point de contact dans la zone de flottaison. Sur une bande photo les boutons
   sont sur fond sombre, sur un en-tete typographique ils sont sur fond clair. */
.tete-cta{display:flex;gap:var(--e3);flex-wrap:wrap;margin:var(--e5) 0 0;max-width:none;}

/* Recherche des piliers documentaires : un technicien en panne cherche un mot, pas
   une rubrique. Les raccourcis dessous portent le maillage. */
/* Index de 272 lignes : il defile dans sa propre boite, sinon la page fait 9 metres. */
.tableau{overflow-x:auto;margin:var(--e5) 0;}
.tableau-index{max-height:620px;overflow-y:auto;border:1px solid var(--ligne);
  border-radius:var(--r-carte);background:var(--blanc);}
.tableau-index table{min-width:0;}
.tableau-index thead th{position:sticky;top:0;z-index:1;background:var(--bleu-050);}
.tableau-index caption{caption-side:bottom;text-align:left;padding:var(--e3) var(--e4) 0;}
.tableau-index td:first-child{white-space:nowrap;width:1%;}
.tableau-index th:first-child,.tableau-index td:first-child{padding-left:var(--e4);}
.tableau-index th:last-child,.tableau-index td:last-child{padding-right:var(--e4);}

.rech{margin:var(--e6) 0 0;max-width:640px;}
.rech-l{display:block;font-family:var(--titre);font-weight:600;font-size:15px;
  margin-bottom:var(--e2);color:var(--encre);}
.rech-in{display:flex;gap:8px;}
.rech input[type="search"]{flex:1;min-width:0;font:inherit;font-size:16px;
  min-height:48px;padding:0 var(--e4);border:1px solid var(--ligne);
  border-radius:var(--r);background:var(--blanc);color:var(--encre);}
.rech input[type="search"]:focus{outline:2px solid var(--bleu-500);outline-offset:1px;
  border-color:var(--bleu-500);}
.rech button{font:inherit;font-family:var(--titre);font-weight:600;font-size:15.5px;
  min-height:48px;padding:0 var(--e5);border:0;border-radius:var(--r);
  background:var(--bleu-500);color:#fff;cursor:pointer;white-space:nowrap;}
.rech button:hover{background:var(--bleu-600);}
.rech-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--e3);
  margin:var(--e3) 0 0;font-size:14.5px;max-width:none;}
.rech-r span{color:var(--gris);}
.rech-r a{color:var(--bleu-600);}
@media (max-width:520px){
  .rech-in{flex-wrap:wrap;}
  .rech button{width:100%;}
}
.tete-cta .btn{min-height:44px;display:inline-flex;align-items:center;}
.hero-page .tete-cta{margin-top:var(--e6);}
.hero-page .tete-cta .btn-fantome{color:#fff;border-color:rgba(255,255,255,.55);background:transparent;}
.hero-page .tete-cta .btn-fantome:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}
.hero-page h1{max-width:22ch;}
.hero-page .chapo{max-width:56ch;margin-bottom:0;}

.hero-ey{font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bleu-300);margin:0 0 var(--e4);}
.hero-plein .btn-fantome{color:var(--blanc);border-color:rgba(255,255,255,.55);background:transparent;}
.hero-plein .btn-fantome:hover{background:rgba(255,255,255,.12);color:var(--blanc);border-color:var(--blanc);}


/* Intro sans colonne de droite. Le catalogue ouvrait sur deux pavés et un tableau de
   codes ; le tableau est descendu dans la section qui l'explique, et la page ouvre
   maintenant sur les photos des huit familles. */
.intro-simple{max-width:var(--texte-max);}

/* Marques : une seule presentation. Melanger logos et pastilles faisait bancal. */
.marques-g{gap:var(--e3);}
.marques-g span{min-width:150px;padding:14px 22px;font-size:15.5px;}

/* Bloc d'expertise : ce sont des cartes sans lien, pas de fleche */
.cartes-eeat .carte-lien-i{cursor:default;}
.cartes-eeat .carte-lien-i:hover{border-color:var(--ligne);}
.mentions{font-size:14px;color:var(--gris);margin-top:var(--e5);max-width:none;}
.mentions a{color:var(--bleu-600);}


/* Signature de l'agence, dans la ligne de bas de page */
.ft-bas .sign{display:inline-block;margin-left:var(--e3);opacity:.72;}
.ft-bas .sign a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.ft-bas .sign a:hover{opacity:1;}
@media (max-width:640px){.ft-bas .sign{display:block;margin:var(--e2) 0 0;}}


/* Catalogue : references reelles sur les cartes et encart des formats */
.fiche-txt .refs{display:block;font-size:12.5px;color:var(--bleu-600);
  letter-spacing:-.01em;margin-top:var(--e1);}
.encadre-refs{max-width:none;margin:0;}
.encadre-refs b{display:block;font-family:var(--titre);font-size:16px;margin-bottom:var(--e2);}
.refs-liste{list-style:none;padding:0;margin:var(--e4) 0 0;max-width:none;}
.refs-liste li{display:flex;gap:var(--e4);align-items:baseline;padding:8px 0;
  border-top:1px solid var(--ligne);margin:0;}
.refs-liste code{font-family:var(--mono);font-size:14px;color:var(--encre);
  flex:0 0 128px;background:none;padding:0;}
.refs-liste span{font-size:14.5px;color:var(--encre-2);line-height:1.4;}
td.mono{font-family:var(--mono);font-size:13.5px;color:var(--bleu-600);}


/* Fiche reference : visuel a gauche, identite et conversion a droite */
.produit-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--e7);align-items:start;}
.produit-img{margin:0;}
/* Jamais agrandie au-dela de sa taille reelle : une photo de 303 px etiree
   a 820 px devient floue, et les petites photos n ont pas de variante 400w
   qui puisse les sauver. attr(width) lit la largeur naturelle deja presente
   dans le HTML ; le fallback vaut pour les navigateurs qui l ignorent. */
.produit-img img{width:100%;height:auto;border:1px solid var(--ligne);
  border-radius:var(--r-carte);background:var(--blanc);
  max-width:100%;}
.ref-bloc{border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:var(--e3) var(--e4);margin:0 0 var(--e4);background:var(--bleu-050);}
.ref-lib{display:block;font-family:var(--titre);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);}
.ref-code{display:block;font-family:var(--mono);font-size:26px;font-weight:500;
  color:var(--encre);user-select:all;line-height:1.2;}
.ref-alt{display:block;font-size:13.5px;color:var(--gris);}
.produit-a{display:flex;gap:var(--e3);flex-wrap:wrap;max-width:none;margin-bottom:var(--e3);}
@media (max-width:960px){.produit-g{grid-template-columns:1fr;gap:var(--e5);}}


/* Encart NAP des pages geo. Le composant .statut sert a un etat de stock et
   affichait "Disponible" au-dessus d'une adresse. */
.nap{border:1px solid var(--ligne);border-left:3px solid var(--bleu-500);
  border-radius:0 var(--r-carte) var(--r-carte) 0;background:var(--bleu-050);
  padding:var(--e4) var(--e5);margin:var(--e5) 0;max-width:var(--texte-max);}
.nap b{display:block;font-family:var(--titre);font-size:16px;margin-bottom:var(--e2);}
.nap p{margin:0 0 var(--e2);}
.nap p:last-child{margin-bottom:0;}
.nap .s{font-size:14.5px;color:var(--gris);}


/* Bloc de conversion de fin de page. Le pied de page en porte un, mais le moteur
   de controle exige des points de conversion DANS le corps, et il a raison : un
   visiteur arrive au bout d'une page doit trouver quoi faire sans remonter. */
.cta-bloc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e6);
  align-items:center;background:var(--bleu-050);border:1px solid var(--ligne);
  border-radius:var(--r-carte);padding:var(--e5) var(--e6);margin:var(--e6) 0 0;}
.cta-bloc b{display:block;font-family:var(--titre);font-size:19px;margin-bottom:var(--e2);}
.cta-bloc p{margin:0;color:var(--encre-2);max-width:62ch;}
.cta-bloc-a{display:flex;gap:var(--e3);flex-wrap:wrap;}
@media (max-width:860px){.cta-bloc{grid-template-columns:1fr;gap:var(--e4);}}


/* Les widgets d'article (.rk-*) sont styles dans le plugin
   rankit-widgets : site-build/wp-plugin/rankit-widgets/assets/.
   Le plugin injecte sa feuille en ligne dans le <head>, elle ecrase
   donc celle du theme. Une seule des deux doit porter ces regles. */

/* Bande CTA de bas de page */
.bande-cta{background:var(--bleu-600);color:#fff;padding:var(--e7) 0;margin-top:var(--e9);}
.bande-cta .wrap{display:flex;gap:var(--e6);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.bande-cta h2{margin:0 0 var(--e3);color:#fff;font-size:26px;}
.bande-cta p{margin:0;color:#dbe8ee;max-width:60ch;}
.bande-cta-a{display:flex;gap:var(--e3);flex-wrap:wrap;}
.bande-cta .btn-primaire{background:#fff;color:var(--bleu-600);border-color:#fff;}
.bande-cta .btn-primaire:hover{background:var(--bleu-050);color:var(--bleu-600);}
.bande-cta .btn-fantome{color:#fff;border-color:rgba(255,255,255,.45);}
.bande-cta .btn-fantome:hover{background:rgba(255,255,255,.10);color:#fff;border-color:#fff;}

/* Bloc auteur */
.auteur{max-width:var(--contenu-max);margin:var(--e7) auto 0;padding:0 var(--e5);}
.auteur-in{display:flex;gap:var(--e4);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:var(--e5);}
.auteur-img{
  border-radius:var(--r-pastille);flex:0 0 auto;align-self:flex-start;
  width:72px;height:72px;object-fit:cover;
}
.auteur-ey{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);}
.auteur b{font-family:var(--titre);font-size:17px;}
.auteur p{font-size:15.5px;color:var(--encre-2);margin:var(--e2) 0 var(--e3);}
.auteur-cta{font-weight:600;font-size:15px;}
.auteur-li{display:block;font-size:14.5px;margin-bottom:var(--e2);}

/* Pied de page */
.ft{background:var(--encre);color:#c9d4da;margin-top:0;padding:var(--e8) 0 0;font-size:15px;}
.ft-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:var(--e6);}
.ft-col{display:flex;flex-direction:column;gap:5px;}
.ft-col a{color:#c9d4da;text-decoration:none;}
.ft-col a:hover{color:#fff;text-decoration:underline;}
.ft-h{font-family:var(--titre);font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;margin-bottom:var(--e3);}
.ft-h2{margin-top:var(--e5);}
.ft-marque p{font-size:14.5px;line-height:1.55;color:#9fb0b9;max-width:38ch;}
.ft-marque img{filter:brightness(0) invert(1);opacity:.92;margin-bottom:var(--e4);}
.ft-nap{color:#c9d4da !important;}
.ft-nap a{text-decoration:underline;}
.ft-bas{border-top:1px solid #2a3946;margin-top:var(--e7);padding:var(--e4) 0;font-size:14px;}
.ft-bas .wrap{display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;}
.ft-bas nav{display:flex;gap:var(--e4);}
.ft-bas a{color:#9fb0b9;text-decoration:none;}
.ft-bas a:hover{color:#fff;}

/* CTA telephone mobile */
/* Barre de conversion permanente. L'ancienne n'existait qu'en mobile et n'offrait
   que le telephone : sur desktop, un visiteur arrive en bas de page n'avait plus
   aucun point de contact sous les yeux. Elle porte maintenant les DEUX chemins,
   ecrire et appeler, sur les deux tailles d'ecran. */
.barre-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--encre);color:#fff;
  box-shadow:0 -4px 20px rgba(16,26,35,.18);
}
.barre-cta .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);padding-top:11px;padding-bottom:11px;}
.barre-txt{margin:0;font-size:15px;line-height:1.4;max-width:none;color:#fff;}
.barre-txt b{font-family:var(--titre);font-weight:600;display:block;}
.barre-txt span{color:#B9C7D0;font-size:14px;}
.barre-actions{display:flex;gap:var(--e3);flex:0 0 auto;}
.barre-cta .btn{min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;}
/* Le primaire s'inverse sur fond sombre, comme dans .bande-cta. Sans cela il
   est a 2,66:1 contre la barre quand le secondaire est a 16,32:1. */
.barre-cta .btn-primaire{background:#fff;color:var(--bleu-700);border-color:#fff;}
.barre-cta .btn-primaire:hover{background:var(--bleu-050);color:var(--bleu-700);
  border-color:var(--bleu-050);}
.barre-cta .btn-fantome{color:#fff;border-color:rgba(255,255,255,.5);background:transparent;}
.barre-cta .btn-fantome:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
.barre-cta svg{width:17px;height:17px;flex:0 0 auto;}
/* La barre est fixe : sans cette reserve elle recouvre la derniere ligne du pied. */
body{padding-bottom:72px;}

/* Listes d'articles */
.liste-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--e5);padding-top:var(--e5);}
.carte-art{border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;background:var(--blanc);}
.carte-art img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.carte-txt{padding:var(--e4);}
.carte-txt h2{font-size:19px;margin:0 0 var(--e2);}
.carte-txt h2 a{text-decoration:none;color:var(--encre);}
.carte-txt p{font-size:15px;color:var(--gris);}
.carte-lien{font-weight:600;font-size:15px;}
.art-cover img{width:100%;max-height:460px;object-fit:cover;border-radius:var(--r-carte);}

.page-404{padding:var(--e9) 0;text-align:center;}
.page-404 p{margin-left:auto;margin-right:auto;}
.p404-liens{display:flex;gap:var(--e3);justify-content:center;flex-wrap:wrap;margin-top:var(--e5);}


/* --- Gabarit article : en-tete, corps de lecture, liste, archives --- */
.art-tete{padding-bottom:var(--e4);}
.art-cat{
  display:inline-block;margin-bottom:var(--e3);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bleu-600);background:var(--bleu-050);border:1px solid var(--ligne);
  border-radius:var(--r-pastille);padding:5px 12px;text-decoration:none;
}
.art-cat:hover{background:var(--bleu-300);color:var(--encre);}
/* La tete d'article s'aligne sur la colonne de lecture : sinon le H1 flottait a
   gauche d'une pleine largeur pendant que le corps restait centre. */
/* La colonne de lecture d'un article est plus etroite que le reste du site, mais elle
   part du MEME bord gauche. Centree, elle placait le H1 a 294 px quand le fil d'Ariane
   juste au-dessus etait a 130 : deux axes pour la meme page.
   On garde donc le conteneur standard et on bride ce qu'il contient : le bord gauche
   reste celui de tout le site, seule la longueur de ligne change. */
.art-tete > .wrap > *,.corps-art > *,.auteur-in{max-width:820px;}
/* Le texte suit ses propres regles : a 820 px la ligne faisait 96 caracteres, la
   lecture decroche au-dela de 80. Les figures, les widgets et le sommaire gardent
   les 820 px : ils se lisent d'un coup d'oeil, pas ligne a ligne. Un seul bord
   gauche pour tout, deux longueurs de ligne selon ce qu'on regarde. */
.corps-art > p,.corps-art > ul,.corps-art > ol,.corps-art > blockquote,
.art-tete .chapo{max-width:680px;}
.art-tete h1{max-width:none;}
.art-tete .chapo{max-width:680px;}
.art-meta{margin-top:var(--e4);margin-bottom:0;flex-wrap:wrap;}
.art-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;
  border-radius:50%;background:var(--ligne);vertical-align:middle;margin:0 10px 3px 0;}
.art-cover{margin:var(--e5) 0 0;}

/* Colonne de lecture, alignee sur celle des pages : une tete a 900 et un corps a 800
   creaient un decrochage de 50 px entre le H1 et le premier paragraphe. */
.corps-art{padding-top:var(--e7);padding-bottom:var(--e8);}
.corps-art > h2{
  margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--ligne);
  font-size:var(--t-h2);scroll-margin-top:96px;
}
.corps-art > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
/* Le sommaire est rendu par le theme, avant le contenu : il ouvre la colonne. */
.corps-art .sommaire{margin:0 0 var(--e7);columns:auto;}
.corps-art .sommaire + h2{margin-top:0;padding-top:0;border-top:0;}
.corps-art > h3{scroll-margin-top:96px;}
/* 900 px de colonne feraient 94 caracteres par ligne. La lecture decroche au-dela
   de 80 : le texte s'arrete la, les widgets et les figures prennent la colonne. */
/* Mesure de lecture unique : voir le bridage a 820 px ci-dessus. */
.corps-art > p > a{font-weight:600;}
.corps-art > ul li,.corps-art > ol li{margin-bottom:var(--e2);}
.corps-art figure{margin:var(--e6) 0;}
/* Les photos du catalogue sont detourees sur fond blanc : servies pleine largeur
   dans la colonne de lecture, elles creaient un trou vertical de 500 px autour d'un
   objet minuscule. On les borne en hauteur et on les pose sur le fond de section. */
.corps-art figure img{
  border-radius:var(--r-carte);border:1px solid var(--ligne);background:var(--blanc);
  width:auto;max-width:100%;margin:0 auto;
}
/* Les schemas sont dessines a la largeur de la colonne et portent deja leur cadre. */
.corps-art figure img[src$=".svg"]{width:100%;border:0;}
.corps-art figcaption{font-size:var(--t-small);color:var(--gris);margin-top:var(--e2);}
.corps-art blockquote{
  margin:var(--e6) 0;padding:var(--e2) 0 var(--e2) var(--e5);
  border-left:2px solid var(--bleu-500);color:var(--encre-2);font-size:19px;
}
.corps-art .rk-widget{margin:var(--e6) 0;}

/* Rangee de categories, au-dessus de la liste et des archives */
.filtres{border-bottom:1px solid var(--ligne);padding:var(--e4) 0;}
.filtres .wrap{display:flex;gap:var(--e2);flex-wrap:wrap;}
.filtre{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border:1px solid var(--ligne);border-radius:var(--r-pastille);
  font-size:15px;font-weight:600;text-decoration:none;color:var(--encre-2);background:var(--blanc);
  min-height:44px;
}
.filtre:hover{border-color:var(--bleu-500);background:var(--bleu-050);color:var(--bleu-600);}
.filtre span{font-family:var(--mono);font-size:12.5px;color:var(--gris);}
.filtre.actif{background:var(--bleu-600);border-color:var(--bleu-600);color:var(--blanc);}
.filtre.actif span{color:#C9DCE4;}

/* Cartes d'article */
.liste-articles{padding-bottom:var(--e8);}
.carte-art{display:flex;flex-direction:column;transition:border-color .15s ease;}
.carte-art:hover{border-color:var(--bleu-500);}
.carte-txt{display:flex;flex-direction:column;flex:1 1 auto;}
.carte-cat{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bleu-600);display:block;margin-bottom:var(--e2);
}
.carte-txt p{flex:1 1 auto;}
.carte-lien{font-weight:600;font-size:15px;color:var(--bleu-600);margin-top:auto;}
.carte-art:hover .carte-lien{color:var(--encre);}
.carte-art{position:relative;}
.carte-txt h2 a::after{content:"";position:absolute;inset:0;}

.lies .liste-articles{padding-bottom:0;}
.nav-links{display:flex;gap:var(--e2);justify-content:center;padding:0 var(--e5) var(--e8);}
.nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 14px;border:1px solid var(--ligne);border-radius:var(--r);
  text-decoration:none;color:var(--encre-2);font-weight:600;
}
.nav-links .page-numbers.current{background:var(--bleu-600);border-color:var(--bleu-600);color:var(--blanc);}

/* ==========================================================================
   PASSE VISUELLE DU 2026-08-29
   Corrections issues d'un audit automatise des 19 URL en desktop et en mobile
   (scratch/audit-visuel/). Chaque regle repare un ecart mesure, pas une impression.
   ========================================================================== */

/* Le chevron de separation restait seul en debut de ligne quand le fil passait a la
   ligne : il appartient au maillon qui suit, pas a la ligne. */
.ariane li{display:inline;}
.ariane li+li::before{white-space:nowrap;}

/* Ligne legale de bas de section : elle courait sur 1132 px, soit 162 caracteres. */
.mentions{max-width:62ch;}

/* Champs photo du formulaire. Le bouton natif ne dit ni ce qu'on attend ni ce qui a
   ete choisi : on l'habille comme les autres champs, et on annonce ce qu'on veut. */
.f-photos{margin-bottom:var(--e2);}
.f-photos b{display:block;font-family:var(--titre);font-size:15.5px;margin-bottom:4px;}
.f-photos .f-aide{display:block;font-size:14px;color:var(--gris);line-height:1.45;}
.formulaire input[type="file"]{
  width:100%;font:inherit;font-size:14.5px;color:var(--encre-2);
  border:1px dashed var(--ligne);border-radius:var(--r);
  padding:10px var(--e3);background:var(--bleu-050);min-height:44px;cursor:pointer;
}
.formulaire input[type="file"]:hover{border-color:var(--bleu-500);}
.formulaire input[type="file"]::file-selector-button{
  font:inherit;font-family:var(--titre);font-weight:600;font-size:14px;
  border:1px solid var(--ligne);border-radius:var(--r);background:var(--blanc);
  color:var(--bleu-600);padding:7px 14px;margin-right:var(--e3);cursor:pointer;
}
.formulaire input[type="file"]::file-selector-button:hover{
  border-color:var(--bleu-500);background:var(--bleu-500);color:var(--blanc);
}

/* Les logos restent alignes a gauche comme tout le reste de la page. Une derniere
   ligne incomplete est le comportement normal d'une grille, pas un defaut. */
.logos li{flex:0 1 160px;}

/* Cibles tactiles : les questions de FAQ sortaient a 27 px de haut en mobile, et les
   deux liens de conversion du pied de page a 32. Ce sont des cibles, pas du texte. */
.faq summary,.rk-faq[data-rk] summary{min-height:44px;align-items:center;}
.ft-nap a[href^="tel:"],.ft-nap a[href^="mailto:"]{min-height:44px;
  display:inline-flex;align-items:center;}

/* Cibles tactiles. Mesure mobile : le burger sortait a 40 x 37, les pastilles de
   sommaire a 39 px de haut, les liens de pied de page a 24. Deux passes successives
   avaient ecrit deux fois la meme regle avec deux valeurs, la seconde annulant la
   premiere : les liens de colonne restaient a 34 px. Une seule regle, valeur mesuree. */
.burger{min-width:44px;min-height:44px;line-height:1;}
.sommaire-h a{min-height:44px;display:inline-flex;align-items:center;}
.ft-col a,.ft-bas a,.ft-nap a{display:inline-flex;align-items:center;min-height:44px;}
/* Liens ajoutes le 31/08 pour le maillage et la recherche : ils sortaient a 23 px
   de haut au doigt. Un lien de maillage qu'on rate est un lien perdu. */
.carte-lien-i .go,.fiche .go,.rech-r a{min-height:44px;display:inline-flex;align-items:center;}
/* Sur le gabarit article, la pastille de categorie et le lien LinkedIn de l'auteur
   sont deux liens a part entiere : 32 et 31 px de haut au doigt. */
.art-cat,.auteur-li{min-height:44px;display:inline-flex;align-items:center;}
/* Un lien par ligne, avec un ecart : colles, les deux se lisaient comme une phrase. */
.auteur-liens{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  margin-top:var(--e2);}
.auteur-li{font-size:14.5px;margin-bottom:var(--e2);}

/* --- Responsive --- */
@media (max-width:1080px){
  .ft-cols{grid-template-columns:1fr 1fr 1fr;}
  .ft-marque{grid-column:1 / -1;}
}
@media (max-width:960px){
  .faq{columns:1;}
  .intro-g,.devis-g{grid-template-columns:1fr;gap:var(--e6);}
  .formulaire form{grid-template-columns:1fr;}
  .voies,.voies-etab{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tete{grid-template-columns:1fr;gap:var(--e4);}
  :root{--t-h2-grand:28px;}
  .hero-g{grid-template-columns:1fr;gap:var(--e6);}
  .hero-img img{min-height:0;}
  .bandeau{display:none;}
  .burger{display:block;}
  .mega{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    padding:var(--e3);max-height:78vh;overflow:auto;
  }
  .mega.ouvert{display:flex;}
  .mp{position:static;left:auto;right:auto;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:none;border-left:2px solid var(--bleu-050);border-radius:0;
    display:none;margin:0 0 var(--e3) var(--e3);}
  .mi.ouvert .mp{display:block;}
  .mp-in{grid-template-columns:1fr;gap:var(--e4);padding:var(--e3) 0 var(--e3) var(--e3);}
  .hd-r .tel{display:none;}
  .identif{grid-template-columns:1fr;gap:var(--e5);padding:var(--e5);}
  .sommaire ol{columns:1;}
  /* En mobile la phrase disparait : il ne reste que les deux boutons, cote a cote. */
  .barre-cta .wrap{gap:var(--e3);padding-left:var(--e3);padding-right:var(--e3);}
  .barre-txt{display:none;}
  .barre-actions{flex:1;}
  .barre-cta .btn{flex:1;padding-left:0;padding-right:0;}
  .barre-num{display:none;}
  .barre-tel::after{content:"Appeler";}
  body{padding-bottom:76px;}
}
@media (max-width:640px){
  .corps-art{padding-top:var(--e6);}
  .art-tete h1{max-width:none;}
  .filtres{overflow-x:auto;}
  .filtres .wrap{flex-wrap:nowrap;}
  .filtre{white-space:nowrap;}
  .voies,.voies-etab{grid-template-columns:1fr;}
  :root{--t-h2:23px;--t-h3:19px;--t-body:16.5px;}
  .wrap{padding:0 var(--e4);}
  .page-tete{padding:var(--e5) 0 var(--e4);}
  .hero{padding:var(--e6) 0 var(--e5);}
  .hero-plein{padding:var(--e8) 0 var(--e7);}
  .hero-plein h1{max-width:none;}
  .hero h1{max-width:none;}
  .chapo{font-size:17.5px;}
  .ft-cols{grid-template-columns:1fr;gap:var(--e5);}
  .bande-cta .wrap{flex-direction:column;align-items:flex-start;}
  .bloc-ref{flex-direction:column;align-items:flex-start;gap:var(--e3);}
  .bloc-ref .btn{margin-left:0;width:100%;}
  .marques a,.marques span{padding:9px 16px;font-size:14px;}
  .hd .wrap{gap:var(--e3);}
  .hd .logo img{width:140px;}
  .hd-r{gap:var(--e2);min-width:0;}
  .hd-r .btn{padding:9px 12px;font-size:14px;white-space:nowrap;}
  /* Sous 420px, logo + bouton devis + burger ne tiennent plus : le devis reste
     accessible par le hero et par la barre d'appel fixe. */
  .hd-r .btn-primaire{display:none;}
  .hero-reperes{flex-direction:column;align-items:flex-start;gap:var(--e2);}
  .hero-reperes span+span::before{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

@media print{
  .hd,.bandeau,.bande-cta,.barre-cta,.ft-bas nav{display:none;}
  body{font-size:12pt;}
}

/* Relance en milieu de page. Volontairement plus discrete que .bande-cta du pied
   de page : deux bandeaux bleus pleine largeur sur une meme page, c'est du bruit. */
.relance{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--e5);align-items:start;
  margin:var(--e7) 0;background:var(--bleu-050);
  border:1px solid var(--ligne);border-left:3px solid var(--bleu-600);
  border-radius:var(--r-carte);padding:var(--e5);}
.relance > div{min-width:0;}
.relance b{display:block;font-family:var(--titre);font-size:20px;line-height:1.25;
  color:var(--encre);margin-bottom:var(--e3);text-wrap:balance;}
.relance p{margin:0 0 var(--e3);max-width:46ch;font-size:16px;line-height:1.5;color:var(--encre-2);}
.relance .formulaire{margin:0;}
.relance-a{display:flex;gap:var(--e3);flex-wrap:wrap;}
.relance-a .btn{min-height:44px;display:inline-flex;align-items:center;}
.relance-faits{margin:var(--e4) 0 0;}
.relance-faits dt{font-weight:600;font-size:14px;color:var(--encre);margin-top:var(--e3);}
.relance-faits dd{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--encre-2);}
@media (max-width:820px){.relance{grid-template-columns:1fr;}}

/* Bande services : une section de page ordinaire, posee par le theme.
   Elle n'a pas de style propre, elle herite de .section-alt et .cartes-liens. */
.bande-services{border-top:1px solid var(--ligne);}
.bande-services .tete{margin-bottom:var(--e5);}

/* ------------------------------------------------------------------
   Correctifs de rendu du 04/09, mesures en navigation reelle.
   ------------------------------------------------------------------ */

/* Ancres : l'en-tete colle a 74 px, la barre le complete. Sans marge, le titre
   vise se retrouve entierement masque et la page s'ouvre au milieu d'une
   phrase. La regle existait pour les articles seulement. */
:target{scroll-margin-top:100px;}
h2[id],h3[id],section[id],div[id]{scroll-margin-top:100px;}

/* Champs de formulaire : a 768 px ils gardaient leur largeur desktop, laissant
   252 px de vide dans leur cadre. */
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=tel],
.formulaire input[type=file],.formulaire select,.formulaire textarea{
  width:100%;max-width:100%;box-sizing:border-box;}

/* Colonne de libelles collee au bord pendant le defilement horizontal. Sans
   elle, on lit la valeur sans savoir de quelle ligne elle vient. */
@media (max-width:620px){
  .tableau:not(.tableau-index) table{position:relative;}
  .tableau:not(.tableau-index) th:first-child,
  .tableau:not(.tableau-index) td:first-child{
    position:sticky;left:0;z-index:2;background:var(--blanc);
    box-shadow:1px 0 0 var(--ligne);}
  .tableau:not(.tableau-index) thead th:first-child{background:var(--bleu-050);}
}

/* Bandeau qui confirme au visiteur que sa reference a bien suivi jusqu'au
   formulaire. Sans lui, rien ne le lui dit. */
.ref-portee{margin:0 0 var(--e4);padding:var(--e3) var(--e4);
  background:var(--bleu-050);border-left:3px solid var(--bleu-600);
  border-radius:var(--r-carte);font-size:15px;line-height:1.5;color:var(--encre);}
.ref-portee b{font-family:var(--mono,inherit);}

/* Recherche dans l'en-tete. Elle n'existait que sur /produit/, alors que la
   premiere cible du site arrive avec un code de reference en main. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Le champ cede en premier : c est le seul element de la barre qui supporte
   de retrecir sans perdre son sens. */
/* Repliee a la taille de son icone : l'en-tete est plafonne a 1180 px et le
   menu y demande deja 631 px. Ouverte, elle se pose PAR-DESSUS le menu sans
   rien deplacer, ce qui est le comportement attendu d'une recherche d'en-tete. */
.rech-hd{display:flex;align-items:center;justify-content:flex-end;
  flex:0 0 44px;width:44px;position:relative;
  border:1px solid transparent;border-radius:var(--r);background:transparent;
  transition:border-color .15s,background .15s;}
.rech-hd:focus-within{flex-basis:44px;border-color:var(--bleu-600);
  background:var(--blanc);}
.rech-hd input{position:absolute;right:38px;width:0;opacity:0;padding:0;
  border:0;background:transparent;font-size:15px;color:var(--encre);
  pointer-events:none;transition:width .18s,opacity .18s,padding .18s;}
.rech-hd:focus-within input{width:230px;opacity:1;padding:9px var(--e3);
  pointer-events:auto;background:var(--blanc);
  border:1px solid var(--bleu-600);border-radius:var(--r);}
.rech-hd input:focus{outline:0;}
.rech-hd button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;min-height:38px;border:0;background:transparent;cursor:pointer;
  color:var(--bleu-600);border-radius:var(--r);}
.rech-hd button:hover{background:var(--bleu-050);}
.rech-hd svg{width:17px;height:17px;}
/* Le panneau mobile porte sa propre version, en premier element. */
.rech-mob{display:none;}
/* Cette regle ne redefinissait que flex-basis et laissait width:44px. Le
   navigateur posait donc le formulaire a 170 px mais calculait la taille
   intrinseque de .hd-r avec 44 : une boite de 347 px pour 473 px de contenu,
   soit les 126 px d ecart = 170 - 44. Deuxieme degat : au focus,
   .rech-hd:focus-within ramenait flex-basis a 44 px, la barre se reorganisait
   sous le curseur et le champ s ouvrait a x=13, par-dessus le logo.
   La recherche reste l icone de 44 px a toutes les largeurs, comme au-dessus
   de 1181 px ou le site l expedie deja. */
@media (max-width:1180px){.rech-hd{flex-basis:44px;}}
@media (max-width:960px){
  .rech-hd{display:none;}
  .rech-mob{display:flex;gap:var(--e2);padding:var(--e3) var(--e4);
    border-bottom:1px solid var(--ligne);}
  .rech-mob input{flex:1 1 auto;min-width:0;border:1px solid var(--ligne);
    border-radius:var(--r);padding:11px var(--e3);font-size:16px;}
  .rech-mob button{flex:0 0 auto;border:0;border-radius:var(--r);
    background:var(--bleu-600);color:var(--blanc);padding:0 var(--e4);
    min-height:44px;cursor:pointer;font-size:15px;}
}

/* --- bascule de l en-tete, distincte de celle du reste du site -------------
   L'en-tete porte logo + 5 entrees de menu + recherche + telephone + bouton.
   Mesure a 1440 : le menu demande 631 px et n'en recoit que 470, donc son
   contenu debordait de 137 px SOUS la zone de droite. La bascule etait a
   960 px, calculee avant que le champ de recherche existe. */
@media (max-width:1249px){
  .burger{display:block;}
  .hd-r .tel{display:none;}
  .mega{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanc);border-bottom:1px solid var(--ligne);
    padding:var(--e3);max-height:78vh;overflow:auto;z-index:60;
  }
  .mega.ouvert{display:flex;}
  .mp{position:static;left:auto;right:auto;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:none;border-left:2px solid var(--bleu-050);border-radius:0;
    display:none;margin:0 0 var(--e3) var(--e3);}
  .mi.ouvert .mp{display:block;}
  .mp-in{grid-template-columns:1fr;gap:var(--e4);padding:var(--e3) 0 var(--e3) var(--e3);}
  /* Le champ d'en-tete reste visible tant qu'il y a la place ; sous 960 px il
     cede au champ du panneau, comme avant. */
  .rech-mob{display:flex;gap:var(--e2);padding:var(--e3) var(--e4);
    border-bottom:1px solid var(--ligne);}
  .rech-mob input{flex:1 1 auto;min-width:0;border:1px solid var(--ligne);
    border-radius:var(--r);padding:11px var(--e3);font-size:16px;}
  .rech-mob button{flex:0 0 auto;border:0;border-radius:var(--r);
    background:var(--bleu-600);color:var(--blanc);padding:0 var(--e4);
    min-height:44px;cursor:pointer;font-size:15px;}
}

/* Le telephone et le bouton de la zone hd-r ne se replient jamais : comprimes,
   ils cassaient le numero sur 2 lignes et le libelle du bouton sur 2 aussi. */
.hd-r .tel,.hd-r .btn{white-space:nowrap;flex:0 0 auto;}
.hd-r .tel b{white-space:nowrap;}

/* --- Paysage sur telephone -----------------------------------------------
   Mesure : en 844 x 390, l en-tete collant 85 px plus la barre fixe 73 px
   occupent 40,5 pour cent de la hauteur, laissant 232 px de contenu. En
   paysage sur ecran court, l en-tete cesse de coller et la barre se compacte.
   Les 2 chemins de contact restent la, ils cessent de manger l ecran. */
@media (orientation:landscape) and (max-height:480px){
  .hd{position:static;}
  .barre-cta .wrap{padding-top:6px;padding-bottom:6px;}
  .barre-txt{display:none;}
  .barre-cta .btn{min-height:38px;padding-top:6px;padding-bottom:6px;font-size:14px;}
  .barre-cta .wrap{justify-content:flex-end;}
}

/* Carte de piece dans les resultats de recherche. Elle se distingue d'une carte
   d'article par sa zone visuelle : la photo quand elle est propre a la
   reference, sinon la reference elle-meme, en chasse fixe. */
.carte-piece .piece-vis{display:flex;align-items:center;justify-content:center;
  min-height:150px;padding:var(--e4);background:var(--bleu-050);
  border-bottom:1px solid var(--ligne);text-decoration:none;}
/* .carte-art img impose 16/10 + cover : une poire d'appel y serait recadree
   en haut et en bas. Une vignette de piece se montre entiere. */
.carte-piece .piece-vis img{aspect-ratio:auto;object-fit:contain;
  max-width:100%;max-height:132px;width:auto;height:auto;mix-blend-mode:multiply;}
.carte-piece .piece-ref{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,
  Consolas,monospace);font-size:26px;font-weight:600;letter-spacing:.04em;
  color:var(--bleu-700);word-break:break-all;text-align:center;line-height:1.2;}
.carte-piece .carte-cat{color:var(--bleu-700);}

/* Mention « (obligatoire) » posee par le script sur les champs qui le sont.
   Discrete mais lisible : elle informe avant l'envoi, elle n'alarme pas. */
.oblig{color:var(--gris);font-weight:400;font-size:0.92em;}

/* Sur telephone l'en-tete ne portait que le logo et le burger : aucun moyen de
   contact au premier ecran. C'est sans effet sur la plupart des pages, ou la
   barre fixe du bas rattrape, mais elle est retiree sur /devis/ et /contact/,
   et sur /devis/ le formulaire n'arrive qu'a 2 433 px.
   Le telephone revient, en icone seule : 191 px etaient libres a 375 px. */
@media (max-width:1179px){
  .hd-r .tel{display:inline-flex;align-items:center;justify-content:center;
    width:44px;min-height:44px;border:1px solid var(--ligne);border-radius:var(--r);
    color:var(--bleu-700);flex:0 0 auto;}
  .hd-r .tel b{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;}
  .hd-r .tel svg{width:19px;height:19px;}
  .hd-r .tel:hover{background:var(--bleu-050);}
}

/* --- Cartes : la carte est cliquable, l'ancre ne porte que le titre ---------
 *
 * Mesure du 04/09 : 692 ancres depassaient 10 mots, parce que le `<a>` avalait
 * le titre, la description ET le libelle du bouton. Un lecteur d'ecran qui
 * liste les liens d'une page entendait 25 mots par carte, et le texte d'ancre
 * lu par un moteur ne designait plus rien.
 *
 * Les 733 cartes sont donc devenues des `div` dont seul le titre est un lien,
 * et le `::after` ci-dessous rend la surface entiere cliquable. La convention
 * existait deja ici pour `.fiche-txt b a` : on la generalise au lieu d'en
 * inventer une seconde.
 *
 * `:has()` porte le survol et le focus de l'ancre jusqu'a la carte. Sans lui,
 * la carte ne reagirait plus au survol et le focus clavier ne dessinerait un
 * anneau que sur le titre, pas sur ce qu'on va reellement activer. */
.carte-lien-i,.fiche,.voie{position:relative;}
.carte-lien-i b a,.fiche b a,.voie b a{text-decoration:none;color:inherit;}
.carte-lien-i b a::after,.fiche b a::after,.voie b a::after{
  content:"";position:absolute;inset:0;border-radius:inherit;}
.carte-lien-i:has(b a:hover),.fiche:has(b a:hover),.voie:has(b a:hover){
  border-color:var(--bleu-500);}
.fiche:has(b a:hover){box-shadow:0 2px 14px rgba(22,33,43,.07);}
.carte-lien-i:has(b a:focus-visible),.fiche:has(b a:focus-visible),.voie:has(b a:focus-visible){
  outline:2px solid var(--bleu-600);outline-offset:2px;}
/* On n'enleve l'anneau du titre que la ou celui de la carte est garanti : meme
   condition, meme feuille. Si :has() ne s'appliquait pas, aucune des deux
   regles ne s'applique et l'anneau du navigateur reste. Un focus supprime sans
   remplacant est une regression d'accessibilite, pas un detail visuel. */
.carte-lien-i:has(b a:focus-visible) b a,
.fiche:has(b a:focus-visible) b a,
.voie:has(b a:focus-visible) b a{outline:0;}
.carte-lien-i:has(b a:hover) .go::after{transform:translateX(3px);}