/* site.css — mise en page uniquement. Aucun texte, aucune couleur en dur :
   tout vient des variables produites par lib/theme.js. */

*{box-sizing:border-box;margin:0;padding:0}
/* L'attribut `hidden` doit gagner sur tout (livraison 212). Une règle de mise en page
   (`display:grid`, `display:flex`) passait devant lui : les formulaires de l'espace membre
   restaient affichés sous le « Bonjour » d'un visiteur déjà connecté. Chaque endroit qui cachait
   quelque chose compensait dans son coin ; la règle est posée une fois pour toutes ici. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--papier);color:var(--encre);
  font-family:var(--police-corps);font-size:var(--taille-base);line-height:var(--corps-interligne,1.7);
  font-weight:var(--corps-graisse,400);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--titres-couleur,inherit);font-family:var(--police-titres);font-weight:var(--titres-graisse,700);line-height:var(--titres-interligne,1.25);
  font-style:var(--titres-style,normal);letter-spacing:var(--titres-espacement,0);
  text-transform:var(--titres-casse,none);font-variant:var(--titres-variante,normal)}
h1{font-size:calc(clamp(30px,4vw,46px) * var(--echelle-h1,1) * var(--echelle-bloc,1));font-weight:calc(var(--titres-graisse,700) + 100)}
h2{font-size:calc(clamp(23px,2.6vw,32px) * var(--echelle-h2,1) * var(--echelle-bloc,1))}
h3{font-size:calc(clamp(17px,1.7vw,20px) * var(--echelle-h3,1) * var(--echelle-bloc,1))}
h4{font-size:calc(16px * var(--echelle-bloc,1))}
a{color:var(--lien,var(--marque))}
img{max-width:100%;display:block}

.cadre{max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:72px 0;font-size:calc(var(--taille-base) * var(--echelle-bloc,1))}
/* Taille de police par bloc : une échelle, héritée par tout le texte de la section. */
.taille-petite{--echelle-bloc:.88}
.taille-grande{--echelle-bloc:1.15}
.section-alt{background:var(--papier-2)}
.tete{max-width:760px;margin-bottom:34px}
.tete-centree{margin-left:auto;margin-right:auto;text-align:center}

.surtitre{
  display:inline-flex;align-items:center;gap:8px;
  font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:700;color:var(--secondaire,var(--marque));margin-bottom:10px;
}
.surtitre::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--secondaire,var(--marque))}
/* La couleur secondaire (livraison 194) : posée dans Apparence → Couleurs libres, elle prend les
   accents — surtitres, étiquettes, prix, autocollant du bandeau, filtre actif. Absente, chaque
   règle retombe sur ce qu'elle faisait avant. Sur une section à fond sombre, sa version éclaircie. */
.fond-sombre .surtitre{color:var(--secondaire-clair,var(--marque))} .fond-sombre .surtitre::before{background:var(--secondaire-clair,var(--marque))}
.chapo{font-size:calc(clamp(16px,1.6vw,18.5px) * var(--echelle-chapo,1));color:var(--encre-douce);max-width:64ch;margin-top:12px}

.btn{
  display:inline-block;font-weight:600;font-size:calc(15px * var(--echelle-bloc,1));text-decoration:none;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;transition:.15s;
}
.btn-plein{background:var(--bouton,var(--marque));background-image:var(--bouton-metal,none);color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff));border-color:var(--bouton,var(--marque))}
.btn-plein:hover{background:var(--bouton-2,var(--marque-2));border-color:var(--bouton-2,var(--marque-2))}
.btn-clair{background:transparent;color:var(--encre);border-color:var(--trait-2)}
.btn-clair:hover{border-color:var(--encre-douce)}
.btn-petit{padding:9px 16px;font-size:calc(14px * var(--echelle-bloc,1))}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--marque);outline-offset:2px;border-radius:6px;
}

/* barre de navigation */
.barre{position:sticky;top:0;z-index:20;background:var(--voile);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.barre-grille{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:calc(17px * var(--echelle-bloc,1));white-space:nowrap;
  color:var(--encre);text-decoration:none;font-family:var(--police-titres);flex-shrink:0;min-width:0;max-width:100%}
.logo b{color:var(--marque);font-weight:700}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--marque)}
.barre ul{list-style:none;display:flex;gap:18px;margin-left:auto;flex-wrap:nowrap}
.barre ul li{white-space:nowrap}
.barre ul a{color:var(--encre-douce);text-decoration:none;font-size:calc(14.5px * var(--echelle-bloc,1))}
.barre ul a:hover{color:var(--marque)}
/* Taille du menu et du pied de page, tout d'un coup (livraison 80) : un facteur sur l'échelle des blocs. */
.barre.barre-petite{--echelle-bloc:0.9} .barre.barre-grande{--echelle-bloc:1.15}
/* Place du logo et des liens (livraison 87) : quatre dispositions, pas de réglage au pixel. */
.barre.barre-logo-gauche-liens-centres .cadre-barre,.barre.barre-logo-gauche-liens-centres>.cadre{position:relative}
.barre.barre-logo-gauche-liens-centres ul{margin:0 auto}
.barre.barre-logo-centre>*,.barre.barre-tout-centre>*{flex-wrap:wrap}
.barre.barre-logo-centre .logo,.barre.barre-tout-centre .logo{flex:1 1 100%;justify-content:center;margin-bottom:6px}
.barre.barre-logo-centre ul,.barre.barre-tout-centre ul{margin:0 auto}
.barre.barre-tout-centre .btn{margin:0 auto}
/* Retrait du menu (livraison 88) : le cadre du menu se resserre ou s'élargit d'un cran. */
.barre.barre-marge-bord>.cadre,.barre.barre-marge-bord .cadre{max-width:none;padding-left:14px;padding-right:14px}
.barre.barre-marge-serree>.cadre,.barre.barre-marge-serree .cadre{max-width:min(1400px,96vw)}
.barre.barre-marge-large>.cadre,.barre.barre-marge-large .cadre{max-width:min(1040px,88vw)}
.barre.barre-grande .btn{padding:12px 20px} .barre.barre-petite .btn{padding:7px 13px}
.pied.pied-petite{--echelle-bloc:0.9;font-size:.92em} .pied.pied-grande{--echelle-bloc:1.15;font-size:1.12em}
/* Alignement du pied et de la ligne du créateur (livraison 92) : les lignes seules, pas les colonnes. */
.pied.pied-ali-centre .pied-base,.pied.pied-ali-centre .pied-bas,.pied.pied-ali-centre .pied-credit{text-align:center} .pied.pied-ali-centre .pied-logo{margin-inline:auto}
.pied.pied-ali-droite .pied-base,.pied.pied-ali-droite .pied-bas,.pied.pied-ali-droite .pied-credit{text-align:right} .pied.pied-ali-droite .pied-logo{margin-left:auto}
.pied .pied-credit.ali-gauche{text-align:left} .pied .pied-credit.ali-centre{text-align:center} .pied .pied-credit.ali-droite{text-align:right}
/* Les logos de la ligne du créateur (livraison 107) : petits, alignés avec le texte. */
.credit-logos{list-style:none;display:flex;align-items:center;gap:12px;margin:0;padding:0;flex-wrap:wrap}
.credit-logo{height:26px;width:auto;display:block;object-fit:contain}
.credit-logo.logo-h-petite{height:18px} .credit-logo.logo-h-grande{height:36px}
.pied-credit.credit-apres,.pied-credit.credit-avant{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pied-credit.credit-avant{flex-direction:row-reverse;justify-content:flex-end}
.pied-credit.credit-dessous{display:flex;flex-direction:column;gap:8px}
.pied-credit.ali-centre{align-items:center;justify-content:center}
.pied-credit.ali-droite{align-items:flex-end;justify-content:flex-end}
.pied-credit p{margin:0}
.pied-credit{margin-top:8px;font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-faible)} .pied-credit a{color:var(--encre-douce);text-decoration:underline;text-underline-offset:2px}
.bascule-theme{background:none;border:1px solid transparent;border-radius:9px;padding:7px;
  cursor:pointer;color:var(--encre-douce);line-height:0;flex-shrink:0}
.bascule-theme:hover{border-color:var(--trait-2);color:var(--marque)}
.bascule-theme svg{width:19px;height:19px}

/* hero */
.hero{font-size:calc(var(--taille-base) * var(--echelle-bloc,1));padding:56px 0 64px;background:var(--hero-fond,linear-gradient(180deg,var(--marque-claire),var(--papier)))}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;align-items:start}
.hero h1{margin:10px 0 16px}
.boutons{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.rassurance{margin-top:18px;font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.coche{color:var(--marque);font-weight:700}

/* simulateur */
.simu{background:var(--carte);border:1px solid var(--trait);border-radius:16px;
  box-shadow:var(--ombre);overflow:hidden}
.simu-tete{display:flex;justify-content:space-between;align-items:center;
  padding:13px 17px;border-bottom:1px solid var(--trait);font-size:calc(14px * var(--echelle-bloc,1));font-weight:600}
.simu-direct{font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;color:var(--marque);text-transform:uppercase;letter-spacing:.07em}
.simu-corps{padding:17px}
.simu-curseur{display:flex;justify-content:space-between;font-size:calc(13.5px * var(--echelle-bloc,1));
  color:var(--encre-douce);margin-bottom:8px}
.simu-curseur output{font-weight:700;color:var(--encre)}
.simu-corps input[type=range]{width:100%;accent-color:var(--marque);margin-bottom:18px}
.simu-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.simu-col{border:1px solid var(--trait);border-radius:12px;padding:13px}
.simu-apres{background:var(--marque-claire);border-color:transparent}
.simu-k{font-size:calc(10.5px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-douce);margin-bottom:10px}
.simu-col ul{list-style:none;font-size:calc(12.5px * var(--echelle-bloc,1))}
.simu-col li{display:flex;justify-content:space-between;gap:9px;padding:4px 0;color:var(--encre-douce)}
.simu-col li b{color:var(--encre);white-space:nowrap}
.simu-plus li{display:list-item;list-style:disc;margin-left:16px;padding:3px 0}
.simu-total{display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--trait);font-size:calc(13px * var(--echelle-bloc,1))}
.simu-total b{font-size:calc(15px * var(--echelle-bloc,1))}
.simu-prix b{font-size:calc(38px * var(--echelle-bloc,1));font-weight:800;color:var(--marque);display:block;line-height:1.1}
.simu-prix span{font-size:calc(12px * var(--echelle-bloc,1));color:var(--encre-douce)}
.simu-note{margin-top:13px;padding:11px 13px;background:var(--marque-claire);
  border-radius:10px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre)}

/* comparaison */
.etats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.etat{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:20px;
  border-top:3px solid var(--trait-2)}
.etat-avant{border-top-color:#D97A0B}
.etat-apres{border-top-color:var(--marque)}
.etat-surtout{border-top-color:#7A3EA8}
.etat-avant .jeton{background:#FDF1E1;color:#8A4D06}
.etat-surtout .jeton{background:#F1E9F8;color:#5F2E85}
.etat h3{margin:11px 0 9px}
.etat p{font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.jeton{display:inline-block;font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;padding:4px 10px;border-radius:999px;
  background:var(--marque-claire);color:var(--marque-2)}
.jalon{margin-top:15px;padding:10px 13px;background:var(--papier-2);border-radius:9px;
  font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.atout{padding:18px;background:var(--carte);border:1px solid var(--trait);border-radius:14px}
.atout-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--marque-claire);color:var(--marque);margin-bottom:11px}
.atout-ic svg{width:18px;height:18px}
.atout p{font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce);margin-top:6px}

/* vidéo */
.video-cadre{max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;border:1px solid var(--trait);background:var(--papier-2)}
.video-cadre iframe{width:100%;height:100%;border:0}
.video-vide{display:grid;place-items:center;background:var(--video-fond,var(--papier-2));color:var(--encre-douce);font-size:calc(14.5px * var(--echelle-bloc,1))}

/* briques */
.briques{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.brique{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:19px}
.brique-tete{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.brique-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--marque-claire);color:var(--marque);flex-shrink:0}
.brique-ic svg{width:18px;height:18px}
.brique h3{font-size:calc(13px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.brique ul{list-style:none;font-size:calc(14px * var(--echelle-bloc,1))}
.brique li{padding:7px 0;border-bottom:1px solid var(--trait);color:var(--encre-douce)}
.brique li:last-child{border-bottom:0}
.brique li.cle{color:var(--encre);font-weight:600;padding-left:17px;position:relative}
.brique li.cle::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  border-radius:50%;background:var(--marque)}
.brique li:not(.cle){padding-left:17px;position:relative}
.brique li:not(.cle)::before{content:"";position:absolute;left:3px;top:16px;width:4px;height:4px;
  border-radius:50%;background:var(--trait-2)}
.brique .detail{display:block;font-weight:400;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);margin-top:3px}

/* tarifs */
.grille-tarifs{width:100%;border-collapse:collapse;margin-bottom:26px}
.grille-tarifs th{text-align:left;font-size:calc(11.5px * var(--echelle-bloc,1));text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-douce);padding:0 12px 11px;border-bottom:1px solid var(--trait-2)}
.grille-tarifs td{padding:13px 12px;border-bottom:1px solid var(--trait);font-size:calc(15px * var(--echelle-bloc,1))}
.grille-tarifs .tp b{color:var(--marque);font-size:calc(19px * var(--echelle-bloc,1))}
.grille-tarifs .tz-detail{display:block;margin-top:3px;font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce);font-weight:400}
.grille-tarifs .unite{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.inclus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inclus-col h3,.inclus-col h2{font-size:calc(16px * var(--echelle-bloc,1))}
.inclus-col{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:18px}
.inclus-col ul{list-style:none;margin-top:10px;font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.inclus-col li{padding:5px 0 5px 18px;position:relative}
.inclus-col li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--marque)}
.mention{margin-top:22px;padding:15px 18px;background:var(--marque-claire);border-radius:12px;
  font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);line-height:1.65}

/* contact */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
.ct-titre{margin:24px 0 12px}
.coordonnees{display:grid;gap:11px}
.coord{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--carte);
  border:1px solid var(--trait);border-radius:11px}
.coord-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--marque-claire);color:var(--marque);flex-shrink:0}
/* Couleur de l'icône ou des logos (livraison 194) : la classe c-* ou un code posent `color`, et le
   fond de la pastille suit en transparence. */
.coord-ic[class*=" c-"],.coord-ic.c-libre{background:color-mix(in srgb, currentColor 14%, transparent)}
.contact-reseaux[class*=" c-"] a,.contact-reseaux.c-libre a{color:inherit;border-color:currentColor}
.coord-ic svg{width:16px;height:16px}
.coord-lib{font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--encre-douce)}
.formulaire{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:22px}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600;margin-bottom:6px}
.champ input,.champ textarea{width:100%;font:inherit;font-size:calc(15px * var(--echelle-bloc,1));padding:11px 13px;
  border:1px solid var(--trait-2);border-radius:9px;background:var(--papier);color:var(--encre)}
.rgpd{margin-top:14px;font-size:calc(12px * var(--echelle-bloc,1));color:var(--encre-douce);line-height:1.6}

/* galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.galerie figure{border:1px solid var(--trait);border-radius:12px;overflow:hidden;background:var(--carte)}
.galerie figcaption{padding:9px 12px;font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce)}

/* pied de page */
.pied{background:var(--papier-2);border-top:1px solid var(--trait);padding:44px 0 30px;
  font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.pied-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin:22px 0}
.pied-cols h2{color:var(--pied-titres,var(--encre));margin-bottom:9px;font-size:calc(16px * var(--echelle-bloc,1))}
/* Les titres du pied de page sont des h2 pour ne pas sauter de niveau
   depuis le h1 d'une page intérieure. Leur taille reste celle d'un h4. */
.pied-cols ul{list-style:none}
.pied-cols li{padding:3px 0}
.pied-cols a{color:var(--pied-liens,var(--encre-douce));text-decoration:none}
.pied-cols a:hover{color:var(--marque)}
/* Livraison 195 — les couleurs du pied : texte courant, logos des réseaux (les titres et les liens
   sont réglés juste au-dessus). Un pied sans réglage ne change pas. */
.pied-colore .pied-base,.pied-colore .pied-bas,.pied-colore .pied-note{color:var(--pied-texte,inherit)}
.pied-colore .pied-reseaux a{color:var(--pied-reseaux,inherit)}
.pied-colore .pied-reseaux-logos a{border-color:var(--pied-reseaux,var(--trait-2,var(--trait)))}
.pied-colore .pied-cols a:hover{color:var(--pied-liens,var(--marque));text-decoration:underline}
.pied-bas{padding-top:18px;border-top:1px solid var(--trait);font-size:calc(12.5px * var(--echelle-bloc,1))}

/* bandeau d'aperçu */
body[data-apercu]::before{
  content:"Aperçu du brouillon — ce contenu n’est pas encore en ligne";
  display:block;background:#D97A0B;color:#fff;text-align:center;
  padding:9px;font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600;
}
/* Une page programmée (livraison 223) : le bandeau dit la date, et il change de couleur — ce
   n'est pas un oubli à rattraper, c'est une parution qui vient. Et une section encore à venir
   s'affiche dans l'aperçu, précédée du même mot. */
body[data-apercu="programmee"]::before{
  content:"Cette page n’est pas encore en ligne — elle paraîtra " attr(data-quand);
  background:#6B46A8;
}
.ruban-programme{
  background:#F1EAFB;color:#4A2F78;border-left:4px solid #6B46A8;
  padding:9px 13px;margin:0;font-size:calc(13px * var(--echelle-bloc,1));font-weight:600;
}
/* Une section masquée, montrée le temps qu'on la règle (livraison 244) : hachurée sur les bords,
   pour qu'on n'oublie pas une seconde que le visiteur, lui, ne la voit pas. */
.studio-masquee{position:relative;outline:2px dashed #6B46A8;outline-offset:-2px}

@media(max-width:900px){
  .hero-grille,.contact-grille{grid-template-columns:1fr}
  .etats,.atouts,.inclus,.simu-cols{grid-template-columns:1fr}
  .barre ul{display:none}
  .barre .menu-mobile{display:inline-flex}
  .barre.ouvert .tiroir-menu{display:block}
  .section{padding:52px 0}

  /* ---- Garde-fous du bandeau sur téléphone (livraison 110) ----
     Mesuré avant correction : logo « très grand » + nom en texte = un bloc de 434 px sur un écran
     de 390, le bouton de menu rejeté à 553 px, hors écran, et toute la page qui déborde. Trois
     règles écrites pour l'ordinateur se contredisaient : le logo ne pouvait ni rétrécir ni revenir
     à la ligne, et le bouton était poussé à droite sans borne. Le bandeau se plie maintenant, quels
     que soient les réglages : aucun nom, aucune taille de logo ne peut plus faire sortir le menu. */
  .barre-grille{flex-wrap:wrap;column-gap:10px;row-gap:6px}
  .logo{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .logo .logo-nom{display:block;min-width:0;overflow-wrap:anywhere}
  /* La hauteur du bandeau est bornée : il est collant, donc chaque pixel est pris à la page pour
     toujours. Mesuré à 146 px sur un écran de 568 — un quart de l'écran. Les tailles de logo
     restent relatives entre elles, mais plafonnées. */
  .barre-grille{padding-top:9px;padding-bottom:9px}
  .logo-img{max-width:min(46vw,200px);height:auto;max-height:40px}
  .logo.logo-grand .logo-img{max-height:46px}
  .logo.logo-tres-grand .logo-img{max-height:52px}
  .logo{font-size:calc(15px * var(--echelle-bloc,1))}
  .logo.nom-t-tres-grande .logo-nom{font-size:1.25em}
  .logo.nom-t-grande .logo-nom{font-size:1.1em}
  /* Le bouton de menu passe avant tout le reste : il ne se laisse ni rétrécir ni repousser. */
  .barre .menu-mobile{flex:0 0 auto;margin-left:auto}
  /* Le bouton d'appel du bandeau tenait sur trois lignes (« Faire / un / don ») et faisait à lui
     seul la hauteur du bandeau : il reste sur une ligne, en plus compact. */
  .barre .btn{max-width:46vw;white-space:nowrap;padding:10px 13px;font-size:.92em;min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto}}

/* galerie */
.gal-bascule{display:inline-flex;gap:6px;margin-top:18px;padding:5px;background:var(--papier-2);
  border:1px solid var(--trait);border-radius:11px}
.gal-bascule button{font:inherit;font-size:calc(14px * var(--echelle-bloc,1));font-weight:600;padding:9px 16px;border:0;
  border-radius:8px;background:transparent;color:var(--encre-douce);cursor:pointer}
.gal-bascule button.on{background:var(--marque);color:#fff}
.gal-bascule button:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
.gal-compte{margin-top:11px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-faible)}
.gal-vignette{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.galerie figure[hidden]{display:none}
/* Disposition de la galerie (livraison 57). Mosaïque : colonnes, les photos s'emboîtent sans vide,
   chacune à ses proportions. Uniforme : même format pour toutes, recadrées. */
.galerie.gal-mosaique{display:block;columns:3 240px;column-gap:14px}
.galerie.gal-mosaique figure{break-inside:avoid;display:block;width:100%;margin:0 0 14px}
.galerie.gal-mosaique figure[hidden]{display:none}
.galerie.gal-uniforme .gal-vignette{display:block;width:100%;aspect-ratio:4/3}
.galerie.gal-uniforme .gal-vignette img{width:100%;height:100%;object-fit:cover}
.galerie.gal-uniforme-portrait .gal-vignette{display:block;width:100%;aspect-ratio:3/4}
.galerie.gal-uniforme-portrait .gal-vignette img{width:100%;height:100%;object-fit:cover}
/* Rangée incomplète centrée : la grille devient une ligne souple, mêmes largeurs. */
.galerie.gal-centre:not(.gal-mosaique){display:flex;flex-wrap:wrap;justify-content:center}
.galerie.gal-centre:not(.gal-mosaique) figure{flex:0 1 calc((100% - 28px) / 3);min-width:220px}
@media (max-width:760px){.galerie.gal-centre:not(.gal-mosaique) figure{flex-basis:calc(50% - 7px);min-width:0}}
@media (max-width:760px){.galerie.gal-mosaique{columns:2 150px}}

.visionneuse{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:94vh}
.visionneuse::backdrop{background:rgba(8,12,20,.86)}
.visionneuse img{max-width:100%;max-height:78vh;border-radius:12px;margin:0 auto}
.vis-legende{text-align:center;color:#E8EDF4;font-size:calc(13.5px * var(--echelle-bloc,1));margin-top:12px}
.visionneuse button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;
  border-radius:50%;width:44px;height:44px;font-size:calc(24px * var(--echelle-bloc,1));line-height:1;cursor:pointer}
.vis-fermer{top:6px;right:6px}
.vis-prec{left:6px;top:50%;transform:translateY(-50%)}
.vis-suiv{right:6px;top:50%;transform:translateY(-50%)}
.visionneuse button:hover{background:rgba(255,255,255,.24)}

/* apparition progressive — n'agit que si le JavaScript tourne */
html.js-reveal .reveal{opacity:0;transform:translateY(14px)}
html.js-reveal .reveal.vu{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  html.js-reveal .reveal{opacity:1 !important;transform:none !important}
}

/* formulaire de contact */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Une case à cocher se lit « la case, puis ce qu'elle engage » : elle passe donc devant son
   libellé, et le libellé reste cliquable sur toute sa longueur. L'étoile d'un champ obligatoire
   est décorative — le lecteur d'écran, lui, entend « champ obligatoire » par aria-required. */
.formulaire .champ-case{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.formulaire .champ-case input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  accent-color:var(--marque)}
.formulaire .champ-case label{font-weight:400;line-height:1.5;cursor:pointer}
.formulaire .oblig{color:var(--marque)}
.formulaire select{width:100%;font:inherit;padding:11px 12px;border-radius:9px;
  border:1px solid var(--trait);background:var(--papier);color:var(--encre)}

/* L'inscription à la lettre, dans une coordonnée : la case d'accord ouvre le champ e-mail.
   L'ouverture se fait sans JavaScript (:has) ; le script pose en plus « ouverte » pour les
   navigateurs qui ne le savent pas encore. Le corps replié reste dans la page pour les
   technologies d'assistance : c'est un repli visuel, pas un secret. */
.coord-inscription>div{flex:1;min-width:0}
.form-inscription{margin-top:8px}
.form-inscription .insc-case{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:calc(13.5px * var(--echelle-bloc,1));line-height:1.5}
.form-inscription .insc-case input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  accent-color:var(--marque)}
.form-inscription .insc-corps{display:none;margin-top:9px}
.form-inscription:has(input:checked) .insc-corps,
.form-inscription.ouverte .insc-corps{display:block}
.form-inscription .insc-corps label{display:block;font-size:calc(12.5px * var(--echelle-bloc,1));
  font-weight:600;margin-bottom:4px}
.form-inscription .insc-corps input[type=email],.form-inscription .insc-corps input[type=text],
.form-inscription .insc-corps input[type=tel]{width:100%;font:inherit;padding:9px 11px;
  border-radius:9px;border:1px solid var(--trait);background:var(--papier);color:var(--encre)}
.form-inscription .insc-corps button{margin-top:8px}
.form-inscription .retour-form{margin-top:8px;padding:8px 10px}
.retour-form{margin-top:12px;padding:11px 13px;border-radius:9px;font-size:calc(13.5px * var(--echelle-bloc,1));
  background:var(--papier-2);color:var(--encre-douce)}
.retour-form.ok{background:rgba(15,123,84,.12);color:#0F7B54}
.retour-form.ko{background:rgba(179,64,47,.12);color:#B3402F}

/* ---- Fonds de section ----
   Le voile et l'image sont des variables posées par le rendu : la feuille de
   style ne connaît ni la photo ni la luminance, seulement comment les afficher. */
.a-fond{position:relative;isolation:isolate}
.fond-photo{background-image:var(--fond-image);background-size:var(--fond-taille,cover);
  background-position:var(--fond-position,center);background-repeat:no-repeat}
.fond-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,var(--fond-voile,0));backdrop-filter:blur(var(--fond-flou,0))}
.fond-sombre{color:#fff}
.fond-sombre .surtitre,.fond-sombre .chapo,.fond-sombre .aide{color:rgba(255,255,255,.82)}
.fond-sombre a{color:#fff}
@media (prefers-reduced-motion:reduce){.fond-photo::before{backdrop-filter:none}}

/* ---- Page de texte ---- */
.cadre-etroit{max-width:760px}
.section-texte .texte-section{margin-top:32px}
.section-texte .texte-section h2,.section-texte .texte-section h3{margin-bottom:10px}
.section-texte p+p{margin-top:12px}

/* ---- Horaires et réseaux, pied de page ---- */
.pied-horaires table{border-collapse:collapse;font-size:calc(14px * var(--echelle-bloc,1))}
.pied-horaires th{text-align:left;font-weight:600;padding:2px 14px 2px 0}
.pied-horaires td{padding:2px 0}
.pied-note{font-size:calc(13px * var(--echelle-bloc,1));margin-top:6px;opacity:.8}
.pied-reseaux ul{list-style:none;padding:0;margin:0}
/* La porte du propriétaire (livraison 206) : discrète, tout en bas, et jamais un formulaire —
   elle mène à l'espace où l'on se connecte, elle ne demande rien elle-même. */
.pied-admin{margin-top:8px;font-size:calc(12px * var(--echelle-bloc,1));opacity:.6}
.pied-admin a{color:inherit;text-decoration:underline}

/* =====================================================================
   Modèles de mise en page.
   Duo ne pose aucune de ces classes : ce qui suit ne s'applique qu'aux
   neuf autres modèles. Aucune règle ici ne touche au contenu ni à l'ordre
   des blocs : colonnes, alignements, densité, largeur, ornements.
   ===================================================================== */

/* ---- densité, largeur, titres ---- */
.densite-compacte .section{padding:44px 0}
.densite-aeree .section{padding:104px 0}
.largeur-etroite .cadre{max-width:880px}
.largeur-large .cadre{max-width:1360px}
.titres-grands h1{font-size:clamp(36px,5vw,58px)}
.titres-grands h2{font-size:clamp(26px,3vw,38px)}
.titres-immenses h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.02em;line-height:1.05}
.titres-immenses h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.01em}
.titres-immenses .chapo{font-size:clamp(18px,1.9vw,22px)}

/* ---- sections ---- */
.section-filet+.section-filet{border-top:1px solid var(--trait)}

/* ---- hero ---- */
.hero-centre .hero-grille{grid-template-columns:1fr;justify-items:center}
.hero-centre .hero-grille>div:first-child{max-width:820px}
.hero-centre-texte .hero-grille>div:first-child{text-align:center}
.hero-centre-texte .boutons{justify-content:center}
.hero-centre-texte .surtitre{justify-content:center}
.hero-centre-texte .rassurance{justify-content:center}
.panneau-dessous .hero-grille{grid-template-columns:1fr}
.panneau-gauche .hero-grille>div:first-child{order:2}
.hero-asymetrique .hero-grille{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center}
.hero-asymetrique .hero-grille>div:first-child{padding-right:6vw}
.hero-sur-image{padding:120px 0 128px;background:var(--marque);color:#fff}
.hero-sur-image .hero-grille{grid-template-columns:1fr;justify-items:center}
.hero-sur-image .hero-grille>div:first-child{text-align:center;max-width:820px}
.hero-sur-image .chapo,.hero-sur-image .rassurance{color:rgba(255,255,255,.85)}
.hero-sur-image .surtitre{color:rgba(255,255,255,.75)}
.hero-sur-image .surtitre::before{background:#fff}
.hero-sur-image .btn-clair{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.hero-sur-image .btn-plein{background:#fff;color:var(--marque)}
.hero-sur-image .boutons,.hero-sur-image .rassurance{justify-content:center}

/* ---- grilles ---- */
.briques.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.briques.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.briques-filets{gap:0}
body.f-cartes-ecart .briques-filets,.f-cartes-ecart .briques-filets{gap:var(--cartes-ecart,18px)}
.briques-filets .brique{background:none;border:0;border-top:1px solid var(--trait);padding:22px 18px 22px 0}
body:not(.f-cartes-rayon) .briques-filets .brique{border-radius:0}
.briques-tuiles{grid-auto-flow:dense;gap:12px}
.briques-tuiles .brique:first-child{grid-column:span 2;grid-row:span 2}
.briques-tuiles .brique:nth-child(4n){grid-column:span 2}
@media (max-width:900px){.briques.col-4,.briques.col-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .briques-tuiles .brique{grid-column:span 1 !important;grid-row:span 1 !important}}

/* ---- tarifs ---- */
.tarifs-cartes table{display:block}
.tarifs-cartes thead{display:none}
.tarifs-cartes tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tarifs-cartes tr{display:flex;flex-direction:column;gap:6px;background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:18px}
.tarifs-cartes td{padding:0;border:0}
.tarifs-cartes td:first-child{font-weight:700;font-size:calc(15px * var(--echelle-bloc,1))}
.tarifs-cartes td.tp{font-size:calc(26px * var(--echelle-bloc,1));font-weight:800;color:var(--marque)}
.tarifs-filets table{border-collapse:collapse}
.tarifs-filets th,.tarifs-filets td{border:0;border-bottom:1px solid var(--trait);background:none}

/* ---- contact ---- */
.contact-empile .contact-grille{grid-template-columns:1fr}

/* ---- galerie ---- */
.galerie.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie.col-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.galerie.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.galerie.gal-pleine .gal-vignette img{width:100%;height:auto}
@media (max-width:760px){.galerie.col-4{grid-template-columns:repeat(2,minmax(0,1fr))}.galerie.gal-pleine.col-2{grid-template-columns:1fr}}
@media (max-width:760px){.galerie.col-2,.galerie.col-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* ---- ornements ---- */
.orne-halo .hero{position:relative;overflow:hidden}
.orne-halo .hero::before{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  max-width:760px;max-height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--marque-claire),transparent 70%);filter:blur(40px);opacity:.9}
.orne-bandeau-defilant .hero:not(.rass-reglee) .rassurance{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%}
/* Le bandeau défilant ne doit jamais élargir le bandeau d'accueil (livraison 353) : en `nowrap`, sa
   largeur intrinsèque tirait la colonne de la grille (« 1fr » = minmax(auto, 1fr)) au-delà de
   l'écran d'un téléphone, et le titre, le chapeau et les boutons partaient hors cadre. La colonne
   ne peut plus être plus large que le bandeau, et le texte défilant est coupé à 100 %, comme prévu. */
.orne-bandeau-defilant .hero .hero-grille{grid-template-columns:minmax(0,1fr)}
.orne-bandeau-defilant .hero .hero-grille>*{min-width:0;max-width:100%}
.orne-bandeau-defilant .hero:not(.rass-reglee) .rassurance{display:block;width:0;min-width:100%;box-sizing:border-box}
.orne-bandeau-defilant .hero:not(.rass-reglee) .rassurance>*{display:inline-block;animation:defile 18s linear infinite}
@keyframes defile{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.orne-bandeau-defilant .hero:not(.rass-reglee) .rassurance>*{animation:none}.orne-halo .hero::before{filter:none}}

/* ---- Journal ---- */
.articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.article-carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.article-carte img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-corps{padding:18px 20px 20px}
.article-carte time,.article-date time{font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);letter-spacing:.02em}
.article-carte h2,.article-carte h3{font-size:calc(19px * var(--echelle-bloc,1));margin:6px 0 8px}
.article-carte h2 a,.article-carte h3 a{color:inherit;text-decoration:none}
.article-carte h2 a:hover,.article-carte h3 a:hover{color:var(--marque)}
.article-carte p{font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.article-date{padding-top:28px;margin-bottom:-40px}
/* 385 : la ligne du haut d'une fiche (date, prix, « Ajouter au panier ») remonte sous la section qui suit
   (marge négative) : sans ceci, la section la recouvrait et le bouton ne se cliquait pas. */
.article-date{position:relative;z-index:3}
/* Livraison 319 : les cartes d’articles en filets ne restent des lignes que si AUCUN style de
   cartes n’est choisi — c’était déjà la règle des briques (295), mais celle-ci, plus précise
   (trois classes), passait devant et leur retirait fond, bordure ET coins. Sur un site en verre,
   « Coins des cartes » ne bougeait rien : voilà pourquoi. */
body:not(.cartes-verre):not(.cartes-plates):not(.cartes-ombrees) .briques-filets.articles .article-carte{border:0;border-top:1px solid var(--trait);background:none}
body:not(.f-cartes-rayon) .briques-filets.articles .article-carte{border-radius:0}


/* =====================================================================
   Styles graphiques.
   Sobre ne pose aucune classe : ce qui suit ne s'applique qu'aux cinq
   autres. Un style ne touche qu'à la manière — rayons, ombres, bordures,
   dégradés — jamais au contenu ni à l'ordre des blocs.
   ===================================================================== */

/* Moderne : grands rayons, ombres douces, dégradés discrets */
.style-moderne .btn{border-radius:999px;padding:14px 26px}
.style-moderne .brique,.style-moderne .simu,.style-moderne .article-carte,.style-moderne .simu-col,
.style-moderne .coord,.style-moderne .formulaire{border-radius:22px;border-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.04),0 18px 40px -20px rgba(0,0,0,.18)}
.style-moderne .brique:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.05),0 28px 48px -22px rgba(0,0,0,.24)}
.style-moderne .brique{transition:transform .2s,box-shadow .2s}
.style-moderne .hero{background:radial-gradient(120% 90% at 10% 0%,var(--marque-claire),var(--papier) 70%)}
.style-moderne .galerie img{border-radius:18px}

/* Classique : angles droits, filets, aucun relief */
.style-classique .btn,.style-classique .brique,.style-classique .simu,.style-classique .simu-col,
.style-classique .article-carte,.style-classique .coord,.style-classique .formulaire,
.style-classique .galerie img,.style-classique input,.style-classique textarea{border-radius:0}
.style-classique .brique,.style-classique .article-carte,.style-classique .simu{box-shadow:none;border:1px solid var(--trait-2)}
.style-classique .hero{background:var(--papier);border-bottom:1px solid var(--trait-2)}
.style-classique .section+.section{border-top:1px solid var(--trait)}
.style-classique h1,.style-classique h2{letter-spacing:.01em}
.style-classique .surtitre::before{border-radius:0;width:18px;height:2px}

/* Cartoon : bordures épaisses, ombres décalées, tout arrondi */
.style-cartoon .btn{border-radius:14px;border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);font-weight:800}
.style-cartoon .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)}
.style-cartoon .btn-plein{color:var(--texte-sur-marque,#fff)}
.style-cartoon .brique,.style-cartoon .simu,.style-cartoon .article-carte,.style-cartoon .coord,
.style-cartoon .formulaire,.style-cartoon .simu-col{border:3px solid var(--encre);border-radius:18px;box-shadow:6px 6px 0 var(--marque)}
.style-cartoon .galerie img{border:3px solid var(--encre);border-radius:14px}
.style-cartoon h1{letter-spacing:-.01em;font-weight:900}
.style-cartoon .surtitre::before{width:10px;height:10px;border:2px solid var(--encre)}
.style-cartoon .hero{background:var(--marque-claire)}

/* Nature : rayons organiques, tons adoucis, papier texturé */
.style-nature .btn{border-radius:18px 8px 18px 8px}
.style-nature .brique,.style-nature .article-carte,.style-nature .simu,.style-nature .coord,
.style-nature .formulaire{border-radius:26px 10px 26px 10px;border-color:var(--trait);box-shadow:0 10px 30px -18px rgba(40,60,40,.25)}
.style-nature .galerie img{border-radius:22px 8px 22px 8px}
.style-nature .hero{background:linear-gradient(160deg,var(--marque-claire) 0%,var(--papier) 60%)}
.style-nature body,.style-nature{background-image:radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px);background-size:6px 6px}
.style-nature .section-alt{background:var(--papier-2)}

/* Gloss : reflets, dégradés brillants, ombres portées */
.style-gloss .btn-plein{background:linear-gradient(180deg,var(--marque) 0%,var(--marque-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px var(--marque-2);border:0}
.style-gloss .btn-plein:hover{filter:brightness(1.06)}
.style-gloss .brique,.style-gloss .simu,.style-gloss .article-carte,.style-gloss .coord,.style-gloss .formulaire{
  background:linear-gradient(180deg,var(--carte) 0%,var(--papier-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 28px -14px rgba(0,0,0,.28);border-color:var(--trait-2)}
.style-gloss .hero{background:linear-gradient(180deg,var(--marque-claire) 0%,var(--papier) 100%);
  box-shadow:inset 0 -40px 60px -50px var(--marque)}
.style-gloss .galerie img{box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.style-gloss h1{text-shadow:0 1px 0 rgba(255,255,255,.6)}

@media (prefers-reduced-motion:reduce){
  .style-moderne .brique,.style-cartoon .btn{transition:none}
  .style-moderne .brique:hover,.style-cartoon .btn:hover{transform:none}
}


/* ---- Mise en valeur : ce que devient le texte entre crochets ----
   Gras par défaut. Le mode vient d'une variable posée par le thème ; comme le
   CSS ne branche pas sur une variable, chaque mode est une classe sur le corps. */
.mev-surligne b{font-weight:inherit;background:linear-gradient(transparent 55%,var(--mev-fond) 55%);padding:0 .1em;border-radius:2px}
.mev-couleur b{font-weight:inherit;color:var(--mev-couleur)}
.mev-souligne b{font-weight:inherit;text-decoration:underline;text-decoration-color:var(--mev-couleur);text-decoration-thickness:.12em;text-underline-offset:.15em}

/* ---- Matière : intensité du gloss, force des ombres, rayons ---- */
.style-gloss .btn-plein{box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.5 * var(--gloss,.6))),0 6px 14px -6px var(--marque-2)}
.style-gloss .brique,.style-gloss .simu,.style-gloss .article-carte,.style-gloss .coord,.style-gloss .formulaire{
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.9 * var(--gloss,.6))),0 12px 28px -14px rgba(0,0,0,calc(.28 * var(--ombres,.5) * 2))}
.style-gloss h1{text-shadow:0 1px 0 rgba(255,255,255,calc(.8 * var(--gloss,.6)))}
.style-moderne .brique,.style-moderne .simu,.style-moderne .article-carte{
  box-shadow:0 2px 6px rgba(0,0,0,calc(.04 * var(--ombres,.5) * 2)),0 18px 40px -20px rgba(0,0,0,calc(.18 * var(--ombres,.5) * 2))}
.btn{border-radius:calc(10px * var(--rayons,1))}
.brique,.article-carte,.coord,.formulaire{border-radius:calc(14px * var(--rayons,1))}
.simu{border-radius:calc(16px * var(--rayons,1))}
.style-moderne .btn{border-radius:calc(999px * min(var(--rayons,1),1))}


/* ---- Section libre : une grille déclarée, qui s'empile sur mobile ---- */
.section-libre .rangee{display:grid;grid-template-columns:var(--colonnes,1fr);gap:28px;align-items:start;margin-top:28px}
.section-libre .rangee:first-child{margin-top:0}
.section-libre .rangee-centre{align-items:center}
.section-libre .rangee-bas{align-items:end}
.section-libre .cellule{min-width:0}
.section-libre .cellule-chiffre b{display:block;font-family:var(--police-titres);font-weight:var(--titres-graisse,700);font-size:calc(2.6rem*var(--echelle-h2,1));line-height:1;color:var(--marque)}
.section-libre .cellule-chiffre span{display:block;margin-top:8px;color:var(--encre-douce)}
/* Livraison 195 — une cellule « demande » : la même case qui engage que la carte d'inscription,
   posée dans une section libre. Les champs se déplient sous la case. */
.section-libre .cellule-demande{max-width:520px}
.section-libre .cellule-demande.ali-centre{margin-left:auto;margin-right:auto}
.section-libre .cellule-demande.ali-droite{margin-left:auto}
.section-libre .cellule-demande .form-inscription{margin-top:0}
.section-libre .cellule-demande .insc-corps input{margin-bottom:8px}
.section-libre .cellule p+p{margin-top:12px}
.section-libre .cellule img{width:100%;height:auto;display:block}
.section-libre .ali-centre{text-align:center}
.section-libre .ali-centre .btn{margin:0 auto}
.section-libre .ali-droite{text-align:right} .section-libre .ali-droite .btn{margin-left:auto}
.section-libre .ali-justifie p{text-align:justify;hyphens:auto}
.section-libre .ali-droite{text-align:right}
.section-libre .ali-justifie{text-align:justify;hyphens:auto}
.section-texte.texte-centre .texte-corps{text-align:center} .section-texte.texte-centre .texte-corps .btn{margin:0 auto}
.section-texte.texte-justifie .texte-corps p{text-align:justify;hyphens:auto}
.section-texte.texte-droite .texte-corps{text-align:right} .section-texte.texte-droite .texte-corps .btn{margin-left:auto}
mark{background:var(--mev-fond,var(--marque-claire));color:inherit;padding:0 .15em;border-radius:3px}
/* Couleur d'un passage ou d'un bouton, à part de la charte (livraison 76). Palette fermée, lisible sur
   papier clair comme sur papier de nuit ; le blanc sur ces fonds passe le contraste. */
:root{--c-rouge:#B3402F;--c-orange:#B85C00;--c-vert:#0F7B54;--c-encre:#243B4A}
/* --------------------------------------------------------------------------
   DEUX VARIABLES DÉRIVÉES (livraison 232), pour que les blocs récents suivent l'apparence
   GLOBALE comme les anciens. Le reproche était juste : agenda et rendez-vous sont arrivés après,
   et se réglaient à coups d'opacités et de rayons en dur — donc un changement de couleur de
   marque ou de forme ne les traversait pas. Elles se DÉRIVENT du réglage global : rien de
   nouveau à régler, et rien à oublier au prochain bloc ajouté.
   -------------------------------------------------------------------------- */
:root{
  /* Un fond très léger de la couleur de marque : pour l'état choisi d'un créneau, d'une
     prestation, d'une case de calendrier. Suit la marque du site, quelle qu'elle soit. */
  --marque-claire:color-mix(in srgb, var(--marque, #2C5C8E) 12%, transparent);
  /* Le petit rayon, dérivé du rayon du site : si le client passe ses formes en carré, les
     créneaux et les cases suivent au lieu de rester arrondis dans leur coin. */
  --r-petit:calc(var(--r, 12px) * 0.7);
}

html[data-theme="sombre"]{--c-rouge:#F0836F;--c-orange:#F0A34B;--c-vert:#5CC79A;--c-encre:#E8EDF4}
.c-marque{color:var(--marque)} .c-secondaire{color:var(--secondaire,var(--marque))} .fond-sombre .c-secondaire{color:var(--secondaire-clair,var(--marque))} .c-titres{color:var(--titres-couleur,var(--encre))} .c-liens{color:var(--lien,var(--marque))} .c-rouge{color:var(--c-rouge)} .c-orange{color:var(--c-orange)} .c-vert{color:var(--c-vert)} .c-encre{color:var(--encre)}
.k-maj{text-transform:uppercase;letter-spacing:.02em} .k-min{text-transform:lowercase} .k-caps{font-variant-caps:small-caps;text-transform:lowercase;letter-spacing:.04em}
/* La taille d'un passage (livraison 247). En « em » : relative à l'endroit où le passage se
   trouve, donc elle suit la taille du site, celle de la section et celle du téléphone. C'est ce
   qui permet de rapetisser un titre dimensionné par sa place — un titre de colonne du pied de
   page — sans toucher à tous les autres. Interligne redonné : un mot en 1,5 em dans un
   paragraphe ne doit pas écarter ses lignes. */
.t-mini{font-size:.62em;line-height:1.15} .t-petit{font-size:.8em;line-height:1.2}
.t-grand{font-size:1.28em;line-height:1.15} .t-geant{font-size:1.6em;line-height:1.1}
.btn.btn-plein.btn-c-rouge{background:var(--c-rouge);border-color:var(--c-rouge);color:#fff}
/* Couleur d'un bouton (livraison 194) : la secondaire du site, ou une couleur à soi (variables en style). */
.btn.btn-plein.btn-c-secondaire{background:var(--secondaire,var(--marque));border-color:var(--secondaire,var(--marque));color:var(--texte-sur-secondaire,#fff)}
.btn.btn-clair.btn-c-secondaire{color:var(--secondaire,var(--marque));border-color:var(--secondaire,var(--marque))} .btn.btn-lien.btn-c-secondaire{color:var(--secondaire,var(--marque))}
.btn.btn-clair.btn-c-libre{color:var(--bouton);border-color:var(--bouton)} .btn.btn-lien.btn-c-libre{color:var(--bouton)}
.btn.btn-plein.btn-c-titres{background:var(--titres-couleur,var(--encre));border-color:var(--titres-couleur,var(--encre));color:var(--papier,#fff)} .btn.btn-plein.btn-c-liens{background:var(--lien,var(--marque));border-color:var(--lien,var(--marque));color:#fff}
.btn.btn-clair.btn-c-titres{color:var(--titres-couleur,var(--encre));border-color:var(--titres-couleur,var(--encre))} .btn.btn-clair.btn-c-liens{color:var(--lien,var(--marque));border-color:var(--lien,var(--marque))} .btn.btn-lien.btn-c-titres{color:var(--titres-couleur,var(--encre))} .btn.btn-lien.btn-c-liens{color:var(--lien,var(--marque))}
.boutons-colores .btn-clair{color:var(--bouton);border-color:var(--bouton)} .boutons-colores .btn-lien{color:var(--bouton)}
/* Les petits repères suivent les boutons de leur section (livraison 298) : le point devant le
   surtitre, les puces des colonnes « inclus », la coche de réassurance et l'icône des cartes prennent
   la couleur des boutons — et le dégradé quand c'est un métal. Sans couleur de boutons, rien ne change. */
.boutons-colores:not(.hero-sur-image) .surtitre::before,.boutons-colores .inclus-col li::before{background:var(--bouton);background-image:var(--bouton-metal,none)}
.boutons-colores .brique-ic{color:var(--bouton);background:color-mix(in srgb,var(--bouton) 16%,transparent)}
.boutons-colores:not(.hero-sur-image) .coche{color:var(--bouton)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .boutons-colores:not(.hero-sur-image) .coche{background-image:var(--bouton-metal,none);-webkit-background-clip:text;background-clip:text;color:var(--bouton-encre,var(--bouton))}
}
.btn.btn-plein.btn-c-orange{background:var(--c-orange);border-color:var(--c-orange);color:#fff}
.btn.btn-plein.btn-c-vert{background:var(--c-vert);border-color:var(--c-vert);color:#fff}
.btn.btn-plein.btn-c-encre{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.btn.btn-clair.btn-c-rouge{color:var(--c-rouge);border-color:var(--c-rouge)}
.btn.btn-clair.btn-c-orange{color:var(--c-orange);border-color:var(--c-orange)}
.btn.btn-clair.btn-c-vert{color:var(--c-vert);border-color:var(--c-vert)}
.btn.btn-clair.btn-c-encre{color:var(--encre);border-color:var(--encre)}
/* Style tertiaire (livraison 77) : un lien, sans fond ni bord — le troisième niveau d'appel. */
.btn.btn-lien{background:transparent;border-color:transparent;padding-left:0;padding-right:0;color:var(--lien,var(--marque));box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.btn.btn-lien:hover{transform:none;text-decoration-thickness:2px}
.btn.btn-lien.btn-c-rouge{color:var(--c-rouge)} .btn.btn-lien.btn-c-orange{color:var(--c-orange)} .btn.btn-lien.btn-c-vert{color:var(--c-vert)} .btn.btn-lien.btn-c-encre{color:var(--encre)}
html[data-theme="sombre"] .btn.btn-plein.btn-c-rouge,html[data-theme="sombre"] .btn.btn-plein.btn-c-orange,html[data-theme="sombre"] .btn.btn-plein.btn-c-vert{color:#111}
/* Briques « texte » : des cartes de présentation — titre, paragraphes, un lien. */
.briques-texte .brique{padding:26px 24px;display:flex;flex-direction:column}
.briques-texte .brique h3,.briques-texte .brique h2{text-transform:none;letter-spacing:0;font-family:var(--police-titres);font-weight:var(--titres-graisse,600);font-size:calc(21px * var(--echelle-bloc,1))}
.briques-texte .brique ul{font-size:calc(15px * var(--echelle-bloc,1));line-height:1.6;flex:1}
.briques-texte .brique li,.briques-texte .brique li.cle,.briques-texte .brique li:not(.cle){padding:0 0 10px;border:0;color:var(--encre-douce);font-weight:400}
.briques-texte .brique li.cle::before,.briques-texte .brique li:not(.cle)::before{display:none}

.briques-texte .brique .detail{font-size:inherit;color:inherit;margin-top:0;display:inline}
.briques-texte .brique-bouton{margin-top:auto;padding-top:14px}
.briques-texte .brique-bouton .btn{background:transparent;border:0;padding:0;color:var(--lien,var(--marque));font-weight:700;box-shadow:none}
.briques-texte .brique-bouton .btn:hover{text-decoration:underline;transform:none}
.briques-texte .brique-avant li,.briques-texte .brique-avant li.cle,.briques-texte .brique-avant li:not(.cle),.briques-texte .brique-avant .detail{color:inherit}
.briques-texte .brique-avant .brique-bouton .btn{color:#fff}
.briques.briques-texte{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.briques.briques-texte{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.briques.briques-texte{grid-template-columns:1fr}}
.section-libre .ali-droite .btn{margin-left:auto}
.section-libre .btn{display:inline-flex}
.cadre-etroite{max-width:820px}
.cadre-pleine{max-width:none;padding:0 32px}
.esp-serre .rangee{gap:14px;margin-top:14px}
.esp-aere .rangee{gap:44px;margin-top:48px}
/* Les formes d'image : cinq, fermées. */
.forme-carre{border-radius:0}
.forme-arrondi{border-radius:calc(18px * var(--rayons,1))}
/* Cadrage d'une photo recadrée (livraison 92) : sept paliers, jamais de glissement au pixel.
   La classe est portée par l'image elle-même, et vaut partout où le cadre recoupe la photo. */
.cad-haut{object-position:50% 0%!important} .cad-un-peu-haut{object-position:50% 25%!important}
.cad-centre{object-position:50% 50%!important} .cad-un-peu-bas{object-position:50% 75%!important}
.cad-bas{object-position:50% 100%!important} .cad-gauche{object-position:0% 50%!important}
.cad-droite{object-position:100% 50%!important}
/* Cadrage libre (livraison 190) : un point à garder et un zoom, posés en variables sur l'image.
   Le point est l'origine du zoom : on s'approche de ce qu'on a désigné. Là où l'image n'est pas
   dans un cadre qui coupe (une cellule, une vignette de galerie), le parent coupe pour elle,
   et prend la forme de l'image pour que l'arrondi tienne. */
.cad-libre{object-position:var(--cad-x,50%) var(--cad-y,50%)!important;transform:scale(var(--cad-z,1));transform-origin:var(--cad-x,50%) var(--cad-y,50%)}
/* Sous 100 % on recule (livraison 192) : la photo est contenue, puis ramenée à l'échelle du
   remplissage par --cad-k (mesuré par site.js) et multipliée par le zoom. À 100 % × k, c'est
   exactement l'image remplie ; à 1/k, la photo entière tient dans le cadre. Le cadre garde son
   fond derrière les bandes. */
.cad-libre.cad-dezoom{object-fit:contain!important;transform:scale(calc(var(--cad-z,1) * var(--cad-k,1)))}
.gal-vignette:has(>.cad-libre),.section-libre .cellule:has(>.cad-libre){overflow:hidden}
.section-libre .cellule:has(>.cad-libre.forme-arrondi){border-radius:calc(18px * var(--rayons,1))}
.section-libre .cellule:has(>.cad-libre.forme-rond),.section-libre .cellule:has(>.cad-libre.forme-ovale){border-radius:50%}
.section-libre .cellule:has(>.cad-libre.forme-biseau){clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.section-libre .cellule:has(>.cad-libre.forme-biseau) .cad-libre{clip-path:none}
.forme-rond{border-radius:50%;aspect-ratio:1;object-fit:cover}
.forme-ovale{border-radius:50%;aspect-ratio:4/5;object-fit:cover}
.forme-biseau{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
@media (max-width:760px){
  /* Deux colonnes plutôt qu'une pile (livraison 110) : quatre chiffres clés empilés, c'est un
     écran entier pour « 127 animaux sauvés, 71 adoptés » — on ne voit plus qu'ils vont ensemble.
     Les cellules qui portent un vrai contenu (texte, image) restent, elles, sur une colonne. */
  .section-libre .rangee{grid-template-columns:1fr !important;gap:18px}
  .section-libre .rangee:has(.cellule-chiffre){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px 10px}
  .section-libre .cellule-vide{display:none}
  .section-libre .ali-droite{text-align:left}
}
@supports not (selector(:has(*))){
  /* Vieux Safari (avant 15.4) : pas de :has(). Les chiffres restent empilés, ce qui reste lisible. */
  @media (max-width:760px){ .section-libre .rangee{grid-template-columns:1fr !important} }
}

/* ---- Cibles tactiles (livraison 110, WCAG 2.2 critère 2.5.8) ----
   Mesuré : 37 liens de 21 px de haut par page — les titres des cartes d'animaux, les liens du pied,
   les filtres. Le minimum exigé est 24 px, 44 px recommandés sur un écran tactile. On agrandit la
   zone touchable sans agrandir le texte : la mise en page ne bouge pas. */
@media (hover:none),(pointer:coarse){
  .article-carte h2 a,.article-carte h3 a,.pied-cols a,.tiroir-menu li a,.filtre,
  .coord a,.credit-logos a,.pied-credit a,.contact-reseaux a,.pied-reseaux a{
    min-height:44px;display:inline-flex;align-items:center}
  .pied-cols li{padding:0}
  .filtre{padding-inline:16px}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ── Une image dans tout bloc (livraison 19) ── */
.hero-image{margin:0;align-self:center;overflow:hidden;box-shadow:var(--ombre)}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}
.hero.avec-image .hero-grille{align-items:center}
.hero.image-gauche .hero-grille>div:first-child{order:2}
.hero.a-fond{background:var(--papier)}
.hero.fond-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fond-image) var(--fond-position,center) / var(--fond-taille,cover) no-repeat}
.hero.fond-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,22,32,var(--fond-voile,.45))}
.hero.fond-photo{position:relative;isolation:isolate;color:#fff}
.hero.fond-photo .surtitre,.hero.fond-photo .chapo,.hero.fond-photo .rassurance{color:rgba(255,255,255,.88)}
.texte-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.section-texte.image-gauche .texte-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.texte-image{margin:0;overflow:hidden;position:sticky;top:calc(var(--barre-hauteur,0px) + 24px);box-shadow:var(--ombre)}
.texte-image img{width:100%;height:100%;object-fit:cover;display:block}
.section-texte.image-dessus .texte-image{margin:0 0 28px;max-height:420px}
.forme-carre{aspect-ratio:1/1;border-radius:6px} .forme-arrondi{aspect-ratio:4/3;border-radius:18px} .forme-rond{aspect-ratio:1/1;border-radius:50%}
.forme-portrait{aspect-ratio:3/4;border-radius:12px} .forme-paysage{aspect-ratio:16/10;border-radius:12px} .forme-large{aspect-ratio:21/9;border-radius:12px}
.brique-image{margin:-4px -4px 12px;overflow:hidden;border-radius:10px 10px 0 0;aspect-ratio:16/9}
.brique-image img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.texte-grille,.section-texte.image-gauche .texte-grille{grid-template-columns:1fr}.texte-image{position:static}.hero.image-gauche .hero-grille>div:first-child{order:0}}

/* ── Briques : bouton en bas, carte mise en avant (livraison 22) ── */
.brique{display:flex;flex-direction:column}
.brique ul{flex:1}
.brique-bouton{margin:14px 0 0}
.brique-avant{background:var(--bouton,var(--marque));border-color:var(--bouton,var(--marque));color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff))}
.brique-avant h2,.brique-avant h3,.brique-avant li,.brique-avant .detail{color:inherit}
/* `.brique li.cle` porte une couleur d'encre et gagnait en specificite sur la regle
   ci-dessus : sur une brique en avant a fond de marque, le texte restait brun sur
   magenta — 2,1 mesure le 14 septembre 2026 sur la page « Nous aider ». */
.brique-avant li.cle{color:inherit}
.brique-avant li::before{background:currentColor;opacity:.7}
.brique-avant .btn-plein{background:#fff;color:var(--bouton,var(--marque));border-color:#fff}
.brique-avant .btn-clair{color:inherit;border-color:currentColor}
.brique-avant .brique-ic{background:rgba(255,255,255,.18);color:inherit}
p a,li a,.chapo a{color:var(--lien,var(--marque));text-decoration:underline;text-underline-offset:2px}

/* Un bandeau avec photo à côté : deux colonnes, quel que soit le modèle (centré, panneau dessous…). */
.hero.avec-image .hero-grille,.hero.avec-image.hero-centre .hero-grille,.hero.avec-image.panneau-dessous .hero-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);justify-items:stretch}
.hero.avec-image.hero-centre .hero-grille>div:first-child{max-width:none}
.hero.avec-image .hero-image{width:100%;max-width:560px;justify-self:end}
.hero.avec-image.image-gauche .hero-image{justify-self:start}
.hero.avec-image.image-gauche.panneau-gauche .hero-grille>div:first-child,.hero.avec-image.image-gauche .hero-grille>div:first-child{order:2}
.hero.avec-image:not(.image-gauche) .hero-grille>div:first-child{order:0}
@media (max-width:760px){.hero.avec-image .hero-grille,.hero.avec-image.hero-centre .hero-grille{grid-template-columns:1fr}.hero.avec-image .hero-image{justify-self:stretch;max-width:none}}
/* Aperçu : la section survolée se signale, pour dire qu'on peut cliquer dessus. */
body[data-apercu].studio-encadre [data-bloc]{cursor:pointer;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
body[data-apercu].studio-encadre [data-bloc]:hover{outline-color:var(--marque)}

/* Réseaux sociaux : logos ronds dans le pied (livraison 23). */
.pied-reseaux-logos ul{display:flex;flex-wrap:wrap;gap:8px}
.pied-reseaux-logos a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--trait-2,var(--trait));color:inherit;text-decoration:none}
.pied-reseaux-logos a:hover{background:var(--marque);color:var(--texte-sur-marque,#fff);border-color:var(--marque)}
.pied-reseaux-logos-et-noms a{display:inline-flex;align-items:center;gap:8px}
.pied-reseaux-logos-et-noms li{margin-bottom:6px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body[data-apercu] .studio-cible{outline:3px solid var(--marque);outline-offset:-3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--marque) 22%,transparent)}
body[data-apercu] .studio-tel-alerte{outline:3px solid #B4530A!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(180,83,10,.22)!important;border-radius:4px}

/* Rangée centrée ou à droite : la colonne de vide se place devant. */
.cellule-vide{min-height:1px}
@media (max-width:760px){.cellule-vide{display:none}}

body[data-apercu].studio-encadre .galerie figure{cursor:grab}
/* Aperçu (livraison 59) : les éléments se désignent, chaque section porte sa barre. Rien sur le site public. */
body[data-apercu].studio-encadre [data-el]{cursor:pointer;transition:box-shadow .12s}
/* 373 : le petit arrondi du cadre de survol ne vaut QUE pour ce qui n'a pas le sien. Posé tel quel,
   il l'emportait sur les coins d'une carte qui est elle-même un élément cliquable (réalisation,
   avis, champ de formulaire) : dans l'aperçu de Studio, ces cartes paraissaient carrées. */
:where(body[data-apercu].studio-encadre [data-el]){border-radius:4px}
body[data-apercu].studio-encadre [data-el]:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--marque) 55%,transparent)}
body[data-apercu].studio-encadre [data-el].studio-el{box-shadow:0 0 0 2px var(--marque)}
body[data-apercu] [data-bloc]{position:relative !important}
body[data-apercu] .studio-barre{position:absolute;top:8px;right:10px;z-index:40;display:none;gap:2px;align-items:center;padding:3px;border-radius:9px;background:#fff;color:#243B4A;border:1px solid #CED9E0;box-shadow:0 8px 24px -12px rgba(15,26,22,.35);font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;text-transform:none;letter-spacing:0}
body[data-apercu].studio-encadre [data-bloc]:hover>.studio-barre,body[data-apercu].studio-encadre .studio-cible>.studio-barre{display:flex}
body[data-apercu] .studio-nom{padding:4px 8px;font-weight:700;color:#2C5C8E;border-right:1px solid #E4EAEF;margin-right:3px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-apercu] .studio-nom:empty{display:none}
body[data-apercu] .studio-bt{font:inherit;border:0;background:none;padding:4px 8px;border-radius:6px;cursor:pointer;color:#243B4A;line-height:1.2}
body[data-apercu] .studio-bt:hover{background:#E7EFF8;color:#2C5C8E}
body[data-apercu] .studio-bt-retirer:hover{background:#FBEAE7;color:#B3402F}
body[data-apercu] .studio-bt-modele{display:none} body[data-apercu].studio-fin .studio-bt-modele{display:inline-block}
body[data-apercu] .studio-ajouter{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:41;display:none;font:700 12px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#2C5C8E;color:#fff;border:0;border-radius:999px;padding:6px 13px;cursor:pointer;box-shadow:0 8px 24px -12px rgba(15,26,22,.35);text-transform:none;letter-spacing:0}
body[data-apercu].studio-encadre [data-bloc]:hover>.studio-ajouter,body[data-apercu].studio-encadre .studio-cible>.studio-ajouter{display:block}
body[data-apercu].studio-encadre .studio-touche>.studio-barre{display:flex} body[data-apercu].studio-encadre .studio-touche>.studio-ajouter{display:block}
/* Au doigt et sur petit écran : la barre s'étale sur la largeur de la section, gros boutons. */
@media (hover: none), (max-width: 700px){
  body[data-apercu].studio-encadre .studio-barre{left:6px;right:6px;top:6px;flex-wrap:wrap;justify-content:flex-end;gap:4px}
  body[data-apercu].studio-encadre .studio-nom{flex:1 1 100%;border-right:0;margin:0 0 2px;max-width:none;font-size:12px}
  body[data-apercu].studio-encadre .studio-bt{padding:8px 10px;min-width:40px;font-size:15px}
  body[data-apercu].studio-encadre .studio-ajouter{padding:9px 16px;font-size:13px}
  body[data-apercu].studio-encadre [data-el]:hover{box-shadow:none}
}
body[data-apercu] .studio-ajouter:hover{background:#224A73}
/* Côte à côte (239) : sur les bords, à mi-hauteur, écrit de haut en bas pour ne pas manger la
   section. DEDANS, pas dehors : posés à -14 px ils débordaient de la section et le bord de
   l'aperçu les coupait — illisibles (corrigé le 18 septembre au soir). */
body[data-apercu] .studio-ajouter-cote{left:auto;right:auto;bottom:auto;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:13px 6px}
body[data-apercu] .studio-ajouter-gauche{left:8px}
body[data-apercu] .studio-ajouter-droite{right:8px;transform:translateY(-50%) rotate(180deg)}
body[data-apercu].studio-encadre [data-bloc]:hover>.studio-ajouter-cote,body[data-apercu].studio-encadre .studio-cible>.studio-ajouter-cote{display:block}
body[data-apercu] .cote-a-cote>[data-bloc]>.studio-ajouter-cote{display:none !important}
body[data-apercu] .galerie figure.studio-glisse{opacity:.5}
body[data-apercu] .galerie figure.studio-cible-depot{outline:3px dashed var(--marque);outline-offset:-3px}

/* Vidéos : lecteur natif, façade cliquable, grille de plusieurs (livraison 30) */
.videos{max-width:820px;margin:0 auto} .videos-grille{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.video-item{margin:0} .video-item figcaption{padding:8px 4px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);text-align:center}
.video-cadre video{width:100%;height:100%;display:block;background:#000}
.video-facade{display:grid;place-items:center;width:100%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--marque),var(--marque-2,var(--marque))) center/cover no-repeat;color:#fff;position:relative}
.video-item:nth-child(3n+2) .video-facade{background:linear-gradient(135deg,var(--marque) 0%,color-mix(in srgb,var(--marque) 40%,#fff) 100%)} .video-item:nth-child(3n) .video-facade{background:linear-gradient(135deg,var(--marque-2,var(--marque)) 0%,#0f1117 100%)}
.video-facade .video-lecture{width:72px;height:72px;border-radius:50%;background:var(--marque);color:var(--texte-sur-marque,#fff);display:grid;place-items:center;font-size:28px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.video-facade .video-titre{position:absolute;left:14px;bottom:12px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.video-facade:hover .video-lecture{transform:scale(1.06)}

body[data-apercu] .studio-depot{outline:3px dashed var(--marque);outline-offset:-3px;background-color:color-mix(in srgb,var(--marque) 10%,transparent)}

/* Galerie libre : dès qu'une photo a une largeur ou une forme, la grille passe à 12 colonnes
   et chaque photo prend sa part, comme une cellule de section libre. */
.galerie.galerie-libre{grid-template-columns:repeat(12,minmax(0,1fr))}
.galerie.galerie-libre figure{grid-column:span var(--span,3)}
.galerie.galerie-libre figure[class*="forme-"] .gal-vignette img{width:100%;height:100%;object-fit:cover}
.galerie.galerie-libre figure[class*="forme-"] .gal-vignette{display:block;width:100%}
.galerie.galerie-libre figure.forme-carre .gal-vignette{aspect-ratio:1/1} .galerie.galerie-libre figure.forme-arrondi .gal-vignette{aspect-ratio:4/3}
.galerie.galerie-libre figure.forme-rond{border-radius:50%} .galerie.galerie-libre figure.forme-rond .gal-vignette{aspect-ratio:1/1}
.galerie.galerie-libre figure.forme-portrait .gal-vignette{aspect-ratio:3/4} .galerie.galerie-libre figure.forme-paysage .gal-vignette{aspect-ratio:16/10} .galerie.galerie-libre figure.forme-large .gal-vignette{aspect-ratio:21/9}
@media (max-width:760px){.galerie.galerie-libre{grid-template-columns:repeat(2,minmax(0,1fr))}.galerie.galerie-libre figure{grid-column:span 1}.galerie.galerie-libre figure[style*="--span:12"],.galerie.galerie-libre figure[style*="--span:9"],.galerie.galerie-libre figure[style*="--span:8"]{grid-column:span 2}}

/* ── Logo, éventail, boutique, filtres, réseaux du contact, style Case (livraison 35) ── */
.logo-img{height:44px;width:auto;display:block;max-width:220px;object-fit:contain}
/* Taille du logo (livraison 75) : par paliers, le menu suit. */
.logo.logo-petit .logo-img{height:36px}
.logo.logo-grand .logo-img{height:64px;max-width:300px}
.logo.logo-tres-grand .logo-img{height:88px;max-width:360px}
.logo .logo-nom{font-weight:700}
/* Le nom à côté du logo (livraison 106) : couleur de la charte, taille, place et alignement. */
.logo.nom-c-marque .logo-nom{color:var(--marque)}
.logo.nom-c-titres .logo-nom{color:var(--titres-couleur,var(--encre))}
.logo.nom-c-liens .logo-nom{color:var(--lien,var(--marque))}
.logo.nom-c-rouge .logo-nom{color:var(--c-rouge)}
.logo.nom-c-orange .logo-nom{color:var(--c-orange)}
.logo.nom-c-vert .logo-nom{color:var(--c-vert)}
/* Le nom en métal (livraison 297) : la couleur plate en repli, le dégradé dans les lettres. */
.logo.nom-c-or .logo-nom{color:var(--or)} .logo.nom-c-argent .logo-nom{color:var(--argent)} .logo.nom-c-cuivre .logo-nom{color:var(--cuivre)} .logo.nom-c-bronze .logo-nom{color:var(--bronze)} .logo.nom-c-orrose .logo-nom{color:var(--orrose)} .logo.nom-c-platine .logo-nom{color:var(--platine)} .logo.nom-c-champagne .logo-nom{color:var(--champagne)} .logo.nom-c-metal .logo-nom{color:var(--metal,var(--or))}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .logo.nom-c-or .logo-nom,.logo.nom-c-argent .logo-nom,.logo.nom-c-cuivre .logo-nom,.logo.nom-c-bronze .logo-nom,.logo.nom-c-orrose .logo-nom,.logo.nom-c-platine .logo-nom,.logo.nom-c-champagne .logo-nom,.logo.nom-c-metal .logo-nom{-webkit-background-clip:text;background-clip:text;color:transparent}
  .logo.nom-c-or .logo-nom{background-image:var(--metal-or)} .logo.nom-c-argent .logo-nom{background-image:var(--metal-argent)} .logo.nom-c-cuivre .logo-nom{background-image:var(--metal-cuivre)} .logo.nom-c-bronze .logo-nom{background-image:var(--metal-bronze)} .logo.nom-c-orrose .logo-nom{background-image:var(--metal-orrose)} .logo.nom-c-platine .logo-nom{background-image:var(--metal-platine)} .logo.nom-c-champagne .logo-nom{background-image:var(--metal-champagne)} .logo.nom-c-metal .logo-nom{background-image:var(--metal-metal,var(--metal-or))}
}
.logo.nom-t-petite .logo-nom{font-size:.85em}
.logo.nom-t-grande .logo-nom{font-size:1.25em}
.logo.nom-t-tres-grande .logo-nom{font-size:1.55em;line-height:1.15}
.logo.nom-p-gauche{flex-direction:row-reverse}
.logo.nom-p-dessous{flex-direction:column;align-items:flex-start;gap:4px;white-space:normal}
.logo.nom-p-dessus{flex-direction:column-reverse;align-items:flex-start;gap:4px;white-space:normal}
.logo.nom-p-dessous.nom-a-centre,.logo.nom-p-dessus.nom-a-centre{align-items:center;text-align:center}
.logo.nom-p-dessous.nom-a-droite,.logo.nom-p-dessus.nom-a-droite{align-items:flex-end;text-align:right}
.logo.nom-p-dessous.nom-a-gauche,.logo.nom-p-dessus.nom-a-gauche{align-items:flex-start;text-align:left}
@media (max-width:760px){.logo.logo-grand .logo-img{height:52px}.logo.logo-tres-grand .logo-img{height:60px}}
.pied-logo{height:36px;width:auto;margin-bottom:10px;display:block;object-fit:contain}
.hero-eventail{position:relative;margin:0;min-height:380px;width:100%}
.hero-eventail img{position:absolute;width:44%;top:8%;left:2%;border:4px solid #fff;box-shadow:8px 8px 0 rgba(0,0,0,.55);transform:rotate(-6deg);background:#fff}
.hero-eventail img.carte-2{left:29%;top:0;transform:rotate(3deg);z-index:2}
.hero-eventail img.carte-3{left:56%;top:12%;transform:rotate(9deg)}
.hero-eventail.n1 img{width:60%;left:20%} .hero-eventail.n2 img.carte-1{left:8%} .hero-eventail.n2 img.carte-2{left:46%}
.hero-badge{position:absolute;left:6%;bottom:2%;z-index:3;background:var(--secondaire,var(--bouton,var(--marque)));color:var(--texte-sur-secondaire,var(--texte-sur-bouton,var(--texte-sur-marque,#fff)));font-family:var(--police-titres);font-size:calc(22px * var(--echelle-bloc,1));padding:8px 16px;border:3px solid #111;transform:rotate(-4deg);box-shadow:5px 5px 0 rgba(0,0,0,.5);letter-spacing:.02em}
.hero.avec-eventail .hero-grille{align-items:center}
@media (max-width:760px){.hero-eventail{min-height:260px}.hero-eventail img{width:48%}}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filtre{font:inherit;font-weight:700;font-size:calc(14px * var(--echelle-bloc,1));padding:8px 14px;border:2px solid var(--encre);background:var(--papier);color:var(--encre);border-radius:8px;cursor:pointer}
.filtre.actif{background:var(--filtre,var(--secondaire,var(--encre)));color:var(--texte-sur-filtre,var(--texte-sur-secondaire,var(--papier)));border-color:var(--filtre,var(--secondaire,var(--encre)))}
.article-carte.masque{display:none}
.articles-couvertures{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.articles-couvertures .article-carte img{aspect-ratio:3/4;object-fit:cover;width:100%;display:block}
.etiquette{display:inline-block;font-size:calc(12.5px * var(--echelle-bloc,1));font-weight:700;color:var(--etiquette,var(--secondaire,var(--lien,var(--marque))));margin-bottom:4px}
.fond-sombre .etiquette{color:var(--etiquette,var(--secondaire-clair,var(--lien,var(--marque))))}
/* Livraison 196 — la seconde étiquette a sa couleur, sinon celle de la première (plus de voile à
   78 % : deux étiquettes, deux teintes franches). La taille se règle par section. */
.etiquette.etiquette-2{color:var(--etiquette-2,var(--etiquette,var(--secondaire,var(--lien,var(--marque)))))}
.fond-sombre .etiquette.etiquette-2{color:var(--etiquette-2,var(--etiquette,var(--secondaire-clair,var(--lien,var(--marque)))))}
.etiquettes-petite .etiquette{font-size:calc(11px * var(--echelle-bloc,1))}
.etiquettes-grande .etiquette{font-size:calc(15px * var(--echelle-bloc,1))}
.studio-manque{display:block;margin-top:6px;font-size:12.5px;color:var(--c-orange);font-weight:700}
.etiquettes{display:inline-block;margin-bottom:4px} .etiquettes .etiquette{margin-bottom:0} .etiquette-2{font-weight:600} .etiquette-sep{color:var(--encre-faible)}
.article-achat{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.article-achat .prix{font-weight:800;font-size:calc(20px * var(--echelle-bloc,1));color:var(--secondaire,inherit)}
.article-date .prix{font-weight:800;margin-left:10px} .article-date .etiquette{margin-left:8px}
.contact-reseaux{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:10px}
.contact-reseaux a{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--encre);border-radius:8px;color:inherit}
.contact-reseaux a:hover{background:var(--marque);color:var(--texte-sur-marque,#fff);border-color:var(--marque)}
/* Style Case BD : traits noirs, ombres dures, angles vifs, titres en capitales serrées */
.style-case{--r-carte:6px}
.style-case h1,.style-case h2{text-transform:uppercase;letter-spacing:.03em}
.style-case .fond-sombre h1,.style-case .hero.fond-sombre h1,.style-case .hero.a-fond h1{color:#fff;text-shadow:5px 5px 0 var(--marque)}
.style-case .hero h1{font-size:calc(clamp(44px,7vw,104px) * var(--echelle-bloc,1));line-height:.95}
.style-case .btn{border-radius:4px;border:3px solid #111;box-shadow:4px 4px 0 #111;font-weight:800}
.style-case .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}
.style-case .brique,.style-case .article-carte,.style-case .coord,.style-case .formulaire,.style-case .simu,.style-case .simu-col,.style-case .video-cadre,.style-case .filtre{border:3px solid #111;border-radius:4px;box-shadow:6px 6px 0 #111}
.style-case .article-carte{overflow:hidden;background:var(--papier)}
.style-case .galerie img,.style-case .texte-image,.style-case .hero-image,.style-case .brique-image{border:3px solid #111;border-radius:4px;box-shadow:6px 6px 0 #111}
.style-case .formulaire input,.style-case .formulaire textarea{border:3px solid #111;border-radius:4px}
.style-case .barre{border-bottom:4px solid var(--marque)} .style-case .pied{border-top:4px solid var(--marque)}
.style-case .filtre.actif{background:var(--filtre,var(--secondaire,#111));color:var(--texte-sur-filtre,var(--texte-sur-secondaire,#fff));border-color:#111}
html[data-theme="sombre"] .style-case .btn,html[data-theme="sombre"] .style-case .brique,html[data-theme="sombre"] .style-case .article-carte,html[data-theme="sombre"] .style-case .filtre{border-color:#fff;box-shadow:6px 6px 0 rgba(255,255,255,.35)}

/* ── Panier (livraison 37) ── */
.lien-panier{position:relative;display:grid;place-items:center;width:38px;height:38px;color:var(--encre);border-radius:10px}
.lien-panier:hover{background:var(--papier-2)} .lien-panier svg{width:22px;height:22px}
.panier-compte{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--marque);color:var(--texte-sur-marque,#fff);font-size:11px;font-weight:800;display:grid;place-items:center}
.panier-lignes{width:100%;border-collapse:collapse;margin:0 0 18px}
.panier-lignes th{text-align:left;font-size:calc(12px * var(--echelle-bloc,1));text-transform:uppercase;letter-spacing:.06em;color:var(--encre-faible);padding:0 8px 10px}
.panier-lignes td{padding:10px 8px;border-top:1px solid var(--trait);vertical-align:middle}
.panier-article{display:flex;align-items:center;gap:12px} .panier-article img{width:48px;height:64px;object-fit:cover;border-radius:6px}
.panier-qte{display:inline-flex;align-items:center;gap:8px} .panier-qte button{width:28px;height:28px;border:1px solid var(--trait-2,var(--trait));background:var(--papier);border-radius:6px;cursor:pointer;font-size:16px}
.panier-retirer{border:0;background:none;cursor:pointer;color:var(--encre-faible);font-size:16px}
.panier-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:8px 0 16px} .panier-total b{font-size:calc(22px * var(--echelle-bloc,1))} .panier-total small{flex-basis:100%;color:var(--encre-douce)}
.panier-actions{display:flex;gap:10px;flex-wrap:wrap} .panier-retour{margin:12px 0 0;color:var(--encre-douce)} .panier-secours a{margin:0 2px}
.ajouter-panier.ajoute{background:#0F7B54;border-color:#0F7B54;color:#fff}
.panier-mention{margin-top:20px}

/* ── Motif de texture par-dessus un fond (livraison 39) ── */
.a-motif{position:relative;isolation:isolate}
.a-motif::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--motif);background-size:var(--motif-taille,auto);background-position:var(--motif-position,0 0);background-repeat:repeat}
.fond-photo.a-motif::after{z-index:0}
.fond-photo.a-motif>*{position:relative;z-index:1}

/* Menu et pied avec un fond propre : les couleurs du fond l'emportent sur celles de la barre. */
.barre.a-fond{background-color:transparent} .barre.a-fond.fond-sombre a:not(.btn),.barre.a-fond.fond-sombre .logo,.barre.a-fond.fond-sombre .bascule-theme,.barre.a-fond.fond-sombre .lien-panier{color:#fff}
.pied.a-fond{background-color:transparent}

/* Cartes d'articles : taille des vignettes, prix qui ne se casse pas (livraison 47) */
.articles-couvertures{justify-content:center}
.articles.vignettes-petites{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.articles.vignettes-moyennes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.articles.vignettes-grandes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.articles.vignettes-tres-grandes{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.article-achat{flex-wrap:wrap}
.article-achat .prix{white-space:nowrap;flex:0 0 auto}
.article-achat .btn{flex:1 1 auto;text-align:center;white-space:nowrap}
.articles.titres-minuscules h2,.articles.titres-minuscules h3{text-transform:none;letter-spacing:0}
.articles.vignettes-petites .article-corps{padding:10px} .articles.vignettes-petites .article-achat .btn{font-size:calc(12.5px * var(--echelle-bloc,1));padding:6px 8px}

/* ── Interactions au survol (réglages fins → Interactions) ── */
.btn,.barre ul a,p a,li a{transition:color var(--survol-duree,180ms),background-color var(--survol-duree,180ms),border-color var(--survol-duree,180ms),transform var(--survol-duree,180ms),box-shadow var(--survol-duree,180ms)}
.menu-soulignement .barre ul a{position:relative}
.menu-soulignement .barre ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--survol-couleur,var(--marque));transform:scaleX(0);transform-origin:left;transition:transform var(--survol-duree,180ms)}
.menu-soulignement .barre ul a:hover::after,.menu-soulignement .barre ul a[aria-current]::after{transform:scaleX(1)}
.menu-fond .barre ul a{padding:6px 10px;border-radius:8px} .menu-fond .barre ul a:hover{background:color-mix(in srgb,var(--survol-couleur,var(--marque)) 14%,transparent)}
.menu-aucun .barre ul a:hover{color:inherit}
.boutons-soulever .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.boutons-pousser .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.boutons-agrandir .btn:hover{transform:scale(1.04)}
.boutons-aucun .btn:hover{transform:none;filter:none;background:var(--bouton,var(--marque));box-shadow:inherit}
.liens-couleur p a,.liens-couleur li a{text-decoration:none} .liens-couleur p a:hover,.liens-couleur li a:hover{color:var(--survol-couleur,var(--marque))}
.liens-aucun p a,.liens-aucun li a{text-decoration:none;color:inherit}
@media (prefers-reduced-motion:reduce){.btn,.barre ul a{transition:none}}

.barre ul a:hover{color:var(--survol-couleur,var(--marque))}
.menu-soulignement .barre ul a:hover{color:inherit}
/* L'icône du panier et la bascule clair/sombre réagissent comme les liens du menu. */
.barre .lien-panier:hover,.barre .bascule-theme:hover{background:transparent;color:var(--survol-couleur,var(--marque))}
.menu-fond .barre .lien-panier:hover,.menu-fond .barre .bascule-theme:hover{background:color-mix(in srgb,var(--survol-couleur,var(--marque)) 14%,transparent)}
.menu-soulignement .barre .lien-panier{position:relative} .menu-soulignement .barre .lien-panier::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;background:var(--survol-couleur,var(--marque));transform:scaleX(0);transform-origin:left;transition:transform var(--survol-duree,180ms)}
.menu-soulignement .barre .lien-panier:hover::after{transform:scaleX(1)} .menu-soulignement .barre .lien-panier:hover{color:inherit}
.barre .lien-panier,.barre .bascule-theme{transition:color var(--survol-duree,180ms),background-color var(--survol-duree,180ms)}

/* ── Mode sombre : les fonds clairs des sections s'assombrissent (réglages fins → Mode sombre) ──
   La couleur d'une section est posée en style inline par le rendu (background-color, background-image) ;
   seule une déclaration !important passe devant un style inline. C'est le seul endroit où on s'en sert. */
html[data-theme="sombre"] body:not(.sombre-garde) .a-fond.fond-clair{background-color:color-mix(in srgb,var(--fond-base,var(--papier)) var(--sombre-teinte,14%),var(--papier)) !important;background-image:none !important}
/* Fonds clairs gardés : la section reste claire, son texte doit donc rester sombre. */
html[data-theme="sombre"] body.sombre-garde .a-fond.fond-clair{--encre:#141414;--encre-douce:#4A4A4A;--encre-faible:#6F6F6F;--carte:#FFFFFF;--papier-2:#F4F4F4;--trait:#E4EAEF;--trait-2:#CED9E0;--voile:rgba(255,255,255,.94);color-scheme:light}
html[data-theme="sombre"] body:not(.sombre-garde) .a-fond.fond-clair .hero-badge{border-color:var(--trait-2)}
html[data-theme="sombre"] .style-case .btn,html[data-theme="sombre"] .style-case .filtre,html[data-theme="sombre"] .style-case .brique,html[data-theme="sombre"] .style-case .article-carte,html[data-theme="sombre"] .style-case .coord,html[data-theme="sombre"] .style-case .formulaire,html[data-theme="sombre"] .style-case .video-cadre{border-color:var(--trait-2);box-shadow:6px 6px 0 rgba(0,0,0,.6)}
html[data-theme="sombre"] .style-case .formulaire input,html[data-theme="sombre"] .style-case .formulaire textarea{border-color:var(--trait-2);background:var(--papier-2);color:var(--encre)}
html[data-theme="sombre"] .style-case .barre,html[data-theme="sombre"] .style-case .pied{border-color:var(--marque)}
html[data-theme="sombre"] .style-case .fond-sombre h1,html[data-theme="sombre"] .style-case .hero h1{text-shadow:5px 5px 0 var(--marque-2,var(--marque))}
html[data-theme="sombre"] .logo-img,html[data-theme="sombre"] .pied-logo{filter:none}
html[data-theme="sombre"] .contact-reseaux a,html[data-theme="sombre"] .filtre{border-color:var(--trait-2)}

/* ---- Planchers d'accessibilité (livraison 111) ----
   Ces valeurs ne se règlent pas : elles bornent tous les réglages, sur tous les sites, y compris
   ceux enregistrés avant que ces bornes existent. Un site ne doit pas pouvoir devenir illisible
   parce qu'on a poussé un curseur. Sur écran tactile, le texte courant ne descend jamais sous
   16 px — en dessous, iOS zoome de force dès qu'on touche un champ, et la page saute. */
@media (hover:none),(pointer:coarse){
  body{font-size:max(16px,var(--taille-base,16.5px))}
  input,select,textarea{font-size:max(16px,1em)}
  p,li,dd,dt,figcaption{line-height:max(1.5,var(--corps-interligne,1.6))}
  .note,.aide,time,.pied-bas,.pied-credit,small{font-size:max(13px,.82em)}
}

/* ---- Aucun débordement horizontal (livraison 110) ----
   Mesuré : le site des Ailes d'Ava débordait déjà de 4 px à 320 px de large, sans même le nom à
   côté du logo. Un débordement horizontal, sur téléphone, se voit tout de suite : la page glisse
   de côté au moindre balayage. Deux verrous : plus rien ne dépasse de la fenêtre, et les mots
   trop longs (adresses, noms composés) se coupent au lieu de pousser leur conteneur. */
/* 372 : « clip » et non « hidden ». Posé sur html ET body, « hidden » faisait de body une boîte qui
   défile (overflow-y devient auto) : le menu `position:sticky` collait à body, qui ne défile jamais,
   et partait donc avec la page — le menu « fixe » ne restait pas en haut. « clip » coupe pareil
   sans créer de boîte qui défile ; les navigateurs trop anciens pour lui gardent « hidden » sur
   html seul, qui passe à la fenêtre et laisse le menu coller. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
/* 372 : le menu reste en haut — une ancre (#contact) ne doit pas atterrir dessous. */
html{scroll-padding-top:calc(var(--barre-hauteur,0px) + 12px)}
@media (max-width:900px){
  .cadre{max-width:100%}
  h1,h2,h3,.chapo,.coord,.pied-cols li{overflow-wrap:anywhere}
  table{display:block;max-width:100%;overflow-x:auto}
}

/* ---- Le menu sur téléphone (livraison 88) : un bouton, un tiroir, et une barre de raccourcis. ---- */
.menu-mobile{display:none;align-items:center;justify-content:center;margin-left:auto;order:9;
  width:42px;height:42px;border:1px solid var(--trait-2);border-radius:10px;background:var(--papier);
  color:var(--encre);cursor:pointer;font:inherit;font-weight:600}
.menu-mobile.menu-mobile-gauche{order:-1;margin-left:0;margin-right:auto}
.menu-mobile svg{width:22px;height:22px;fill:currentColor}
.menu-mobile[aria-expanded="true"]{background:var(--marque);color:var(--papier);border-color:var(--marque)}
.tiroir-menu{display:none;padding:10px 16px 18px;border-top:1px solid var(--trait)}
.tiroir-menu ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:2px}
.tiroir-menu li a{display:block;padding:13px 6px;color:var(--encre);text-decoration:none;font-size:17px;border-bottom:1px solid var(--trait)}
.tiroir-menu .btn{width:100%;text-align:center}
.barre-bas{display:none}
@supports not (selector(:has(*))){ @media(max-width:900px){ .pied{padding-bottom:86px} } }
@media(max-width:900px){
  .barre-bas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--voile,var(--papier));
    border-top:1px solid var(--trait);backdrop-filter:blur(8px);padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  .barre-bas a{flex:1;display:grid;justify-items:center;gap:2px;padding:7px 2px;color:var(--encre-douce);
    text-decoration:none;font-size:11px;line-height:1.2;text-align:center}
  .barre-bas a[aria-current="page"],.barre-bas a:active{color:var(--marque)}
  .barre-bas svg{width:22px;height:22px}
  body:has(.barre-bas) .pied{padding-bottom:86px}
  /* Sans :has() (Safari avant 15.4), le pied passait sous la barre de raccourcis : on réserve la
     place sur la barre elle-même, ce qui marche partout (livraison 110). */
  .barre-bas::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:0}
}


/* Lien d'evitement (RGAA 12.7 / WCAG 2.4.1). Onze tabulations separaient le haut de page du
   contenu : logo, huit liens de menu, bascule de theme, bouton d'appel. Chaque page, chaque
   fois. Le lien reste hors de l'ecran jusqu'a ce qu'il recoive le focus. */
.lien-evitement{position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--papier);color:var(--encre);border:2px solid var(--marque);
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.lien-evitement:focus{left:0}
/* Le contenu principal recoit le focus au saut : sans cela, la tabulation suivante repart du
   haut de page dans plusieurs navigateurs. Il ne doit pas pour autant afficher un contour. */
main:focus{outline:none}

/* ==========================================================================================
   Livraison 199 — cinq options, toutes éteintes par défaut. Aucun sélecteur ci-dessous ne
   s'applique à un site qui ne les a pas réglées : le rendu des sites existants ne bouge pas.
   ========================================================================================== */

/* 1. Apparition au défilement : « aucune », « discrète » (l'existant), « en cascade ». */
html.js-reveal .mouvement-cascade .reveal{transform:translateY(22px);transition-delay:calc(var(--i,0) * 70ms)}
html.js-reveal .mouvement-cascade .reveal.vu{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
html.js-reveal .mouvement-lente .reveal.vu{transition-duration:.9s}
html.js-reveal .mouvement-vive .reveal.vu{transition-duration:.35s}
html.js-reveal .mouvement-vive .mouvement-cascade .reveal,html.js-reveal .mouvement-cascade.mouvement-vive .reveal{transition-delay:calc(var(--i,0) * 40ms)}
html.js-reveal .mouvement-aucune .reveal{opacity:1 !important;transform:none !important;transition:none !important}
/* Le temps d'une mesure (le calage des titres côte à côte) : la page telle qu'elle sera, sans
   l'apparition en cours. Posée et retirée dans la même image par site.js. */
html.mesure-titres .reveal{transform:none !important;transition:none !important}
/* Et rien ne bouge non plus du côté des sections pendant qu'on les mesure : une transition
   ajoutée un jour par un thème remettrait le défaut ci-dessus en place sans prévenir. */
html.mesure-titres .cote-a-cote>.section{transition:none !important;animation:none !important}

/* 1 bis. « En relief » (livraison 241) : l'élément arrive de loin en zoomant, et repart en
   dézoomant quand il sort — en descendant comme en remontant, comme sur le site OFAD.
   La perspective est portée par la transformation elle-même : aucun parent à modifier, donc
   aucune section existante ne change de rendu. La profondeur se règle (--rel-z, --rel-sc). */
html.js-reveal .mouvement-relief .reveal{--rel-z:-180px;--rel-sc:.88;
  transform:perspective(1100px) translateZ(var(--rel-z)) translateY(18px) scale(var(--rel-sc));
  transition-delay:calc(var(--i,0) * 45ms)}
html.js-reveal .mouvement-relief .reveal.vu{opacity:1;
  transform:perspective(1100px) translateZ(0) translateY(0) scale(1);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay:calc(var(--i,0) * 45ms)}
html.js-reveal .mouvement-relief.relief-douce .reveal{--rel-z:-90px;--rel-sc:.95}
html.js-reveal .mouvement-relief.relief-forte .reveal{--rel-z:-320px;--rel-sc:.78}
html.js-reveal .mouvement-relief.mouvement-lente .reveal.vu{transition-duration:1s}
html.js-reveal .mouvement-relief.mouvement-vive .reveal.vu{transition-duration:.42s}

/* 2a. Galerie en bande défilante : une piste, doublée par site.js, qui glisse sans fin. */
.galerie.gal-bande{display:block;overflow:hidden;position:relative;--bande-h:200px}
.galerie.gal-bande.bande-petite{--bande-h:140px}
.galerie.gal-bande.bande-grande{--bande-h:280px}
.galerie.gal-bande .bande-piste{display:flex;gap:14px;width:max-content;animation:bande-defile var(--bande-duree,30s) linear infinite}
.galerie.gal-bande.bande-droite .bande-piste{animation-direction:reverse}
.galerie.gal-bande:hover .bande-piste,.galerie.gal-bande:focus-within .bande-piste{animation-play-state:paused}
.galerie.gal-bande figure{margin:0;flex:none;width:auto}
.galerie.gal-bande .gal-vignette{display:block;height:var(--bande-h);width:auto}
.galerie.gal-bande .gal-vignette img{height:var(--bande-h);width:auto;max-width:none;display:block;border-radius:10px}
.galerie.gal-bande figcaption{display:none}
.galerie.gal-bande.bande-fondue::before,.galerie.gal-bande.bande-fondue::after{content:"";position:absolute;top:0;bottom:0;width:72px;z-index:1;pointer-events:none}
.galerie.gal-bande.bande-fondue::before{left:0;background:linear-gradient(90deg,var(--fond-de-bande,var(--papier)),transparent)}
.galerie.gal-bande.bande-fondue::after{right:0;background:linear-gradient(270deg,var(--fond-de-bande,var(--papier)),transparent)}
.section-alt .galerie.gal-bande{--fond-de-bande:var(--papier-2)}
.a-fond .galerie.gal-bande{--fond-de-bande:transparent}
/* Sans JavaScript (pas de doublage) : la bande se fait défiler au doigt. */
html:not(.js-reveal) .galerie.gal-bande{overflow-x:auto}
html:not(.js-reveal) .galerie.gal-bande .bande-piste{animation:none}
@keyframes bande-defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.galerie.gal-bande{overflow-x:auto}.galerie.gal-bande .bande-piste{animation:none}.galerie.gal-bande .bande-piste [data-double]{display:none}}

/* 2b. Bandeau d'accueil : des colonnes d'images qui défilent (HeroMarquee d'OFAD). */
.hero-colonnes{position:relative;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:440px;overflow:hidden;--col-duree:26s}
.hero-colonnes::before,.hero-colonnes::after{content:"";position:absolute;left:0;right:0;height:70px;z-index:2;pointer-events:none}
.hero-colonnes::before{top:0;background:linear-gradient(var(--fond-du-hero,var(--papier)),transparent)}
.hero-colonnes::after{bottom:0;background:linear-gradient(transparent,var(--fond-du-hero,var(--papier)))}
.hero.fond-sombre .hero-colonnes,.hero.a-fond .hero-colonnes{--fond-du-hero:transparent}
.hero-col{display:flex;flex-direction:column;gap:10px;animation:colonne-defile var(--col-duree) linear infinite}
.hero-col-2{animation-direction:reverse;animation-duration:calc(var(--col-duree) * 1.2)}
.hero-col-3{animation-duration:calc(var(--col-duree) * 1.45)}
.hero-col img{width:100%;height:auto;border-radius:8px;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.25);display:block}
.hero-colonnes .hero-badge{left:auto;right:6%;bottom:6%}
.hero.avec-colonnes .hero-grille{align-items:center}
/* Sans doublage (pas de JavaScript ou moins de mouvement) : les colonnes sont fixes. */
html:not(.js-reveal) .hero-col{animation:none}
@keyframes colonne-defile{to{transform:translateY(-50%)}}
@media (max-width:700px){
  .hero-colonnes{display:flex;height:170px;gap:0;overflow:hidden}
  .hero-col{flex-direction:row;flex:none;animation:bande-defile var(--col-duree) linear infinite;padding-right:10px}
  .hero-col img{width:auto;height:170px}
  .hero-colonnes::before,.hero-colonnes::after{top:0;bottom:0;height:auto;width:50px}
  .hero-colonnes::before{background:linear-gradient(90deg,var(--fond-du-hero,var(--papier)),transparent)}
  .hero-colonnes::after{left:auto;right:0;background:linear-gradient(270deg,var(--fond-du-hero,var(--papier)),transparent)}
}
@media (prefers-reduced-motion:reduce){.hero-col{animation:none}.hero-col [data-double]{display:none}}

/* 3. Fond image plein site + surfaces en verre ou transparentes. */
body.fond-site{background:transparent;position:relative;z-index:0}
body.fond-site::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--fond-site) var(--fond-site-position,center center) / cover no-repeat;filter:blur(var(--fond-site-flou,0px));transform:scale(1.03)}
body.fond-site::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(10,12,18,var(--fond-site-voile,.45))}
body.fond-site .section:not(.a-fond),body.fond-site .pied:not(.a-fond){background:var(--papier)}
body.fond-site .section-alt:not(.a-fond){background:var(--papier-2)}
body.fond-site .section-alt{background:var(--papier-2)}
body.fond-site.surfaces-transparentes .section:not(.a-fond),body.fond-site.surfaces-transparentes .hero:not(.a-fond),body.fond-site.surfaces-transparentes .pied:not(.a-fond),body.fond-site.surfaces-transparentes .section-alt:not(.a-fond){background:transparent;color:#fff;--encre:#fff;--encre-douce:rgba(255,255,255,.82);--encre-faible:rgba(255,255,255,.7);--titres-couleur:#fff}
body.fond-site.surfaces-verre .section:not(.a-fond),body.fond-site.surfaces-verre .hero:not(.a-fond),body.fond-site.surfaces-verre .section-alt:not(.a-fond){background:color-mix(in srgb,var(--papier) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.fond-site.surfaces-verre .pied:not(.a-fond){background:color-mix(in srgb,var(--papier-2) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.fond-site.surfaces-verre .barre:not(.a-fond){background:color-mix(in srgb,var(--papier) 85%,transparent)}
body.fond-site.surfaces-verre .section,body.fond-site.surfaces-verre .hero{margin:18px auto;max-width:min(1180px,calc(100% - 32px));border-radius:18px;border:1px solid color-mix(in srgb,var(--encre) 12%,transparent)}
@supports not (backdrop-filter:blur(1px)){body.fond-site.surfaces-verre .section:not(.a-fond),body.fond-site.surfaces-verre .hero:not(.a-fond){background:var(--papier)}}

/* 4. Le style des cartes : plates, ombrées, ou en verre (utile sur un fond photo plein site). */
.cartes-plates .avis-carte,.cartes-plates .rea-carte,.cartes-plates .article-carte,.cartes-plates .brique,.cartes-plates .atout,.cartes-plates .coord{box-shadow:none;border:1px solid var(--trait)}
.cartes-ombrees .avis-carte,.cartes-ombrees .rea-carte,.cartes-ombrees .article-carte,.cartes-ombrees .brique,.cartes-ombrees .atout,.cartes-ombrees .coord{box-shadow:0 10px 30px rgba(20,30,40,.12);border-color:transparent}
.cartes-verre .avis-carte,.cartes-verre .rea-carte,.cartes-verre .article-carte,.cartes-verre .brique,.cartes-verre .atout,.cartes-verre .coord{background:color-mix(in srgb,var(--carte) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid color-mix(in srgb,var(--encre) 14%,transparent);box-shadow:0 8px 28px rgba(0,0,0,.14)}
@supports not (backdrop-filter:blur(1px)){.cartes-verre .avis-carte,.cartes-verre .rea-carte,.cartes-verre .article-carte,.cartes-verre .brique,.cartes-verre .atout,.cartes-verre .coord{background:var(--carte)}}

/* ----------------------------------------------------------------------------------
   LES MÉTAUX : OR, ARGENT, CUIVRE (livraison 210)

   « Il n'y a pas la couleur dorée ou argentée métallisée un peu avec des reflets qu'il y avait
   sur OFAD ; c'est bien si on veut un effet métallisé or / argent / cuivre. »

   Un métal n'est pas une couleur : c'est un dégradé en biais qui passe du sombre au clair
   plusieurs fois — ce sont ces passages que l'œil lit comme des reflets. On le pose donc comme
   une image de fond : remplissage plein sur un bouton, découpé sur les lettres pour un texte.

   Il s'ajoute au vocabulaire des couleurs : partout où l'on choisissait Marque, Rouge ou un code
   #rrggbb, on trouve maintenant Or, Argent et Cuivre. Chaque métal garde une couleur plate de
   repli (--or, --argent, --cuivre) pour un vieux navigateur qui ne sait pas découper un fond
   sur du texte, et pour tout ce qui n'est ni un bouton ni un texte.
   ---------------------------------------------------------------------------------- */
:root{
  --or:#B8912B; --argent:#8A9199; --cuivre:#A85D33;
  --metal-or:linear-gradient(115deg,#7A5A12 0%,#C9A227 16%,#F6E7A8 32%,#C9A227 46%,#8A6612 62%,#E7CF74 80%,#A8821C 100%);
  --metal-argent:linear-gradient(115deg,#6E757C 0%,#AEB6BD 16%,#F2F5F7 32%,#B9C1C8 46%,#798087 62%,#DDE3E8 80%,#909097 100%);
  --metal-cuivre:linear-gradient(115deg,#7A3D1C 0%,#C97A3F 16%,#F2C39A 32%,#C0703A 46%,#8A4A22 62%,#E4A876 80%,#9C5428 100%);
}
html[data-theme="sombre"]{--or:#E3C263; --argent:#C6CDD4; --cuivre:#DE9A66}

/* Un texte en métal : la couleur plate d'abord (elle suffit et reste lisible), le dégradé
   découpé sur les lettres ensuite, seulement là où le navigateur sait le faire. */
.c-or{color:var(--or)} .c-argent{color:var(--argent)} .c-cuivre{color:var(--cuivre)}
.mev-or b{font-weight:inherit;color:var(--or)} .mev-argent b{font-weight:inherit;color:var(--argent)} .mev-cuivre b{font-weight:inherit;color:var(--cuivre)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .c-or,.c-argent,.c-cuivre{-webkit-background-clip:text;background-clip:text;color:transparent}
  .c-or{background-image:var(--metal-or)} .c-argent{background-image:var(--metal-argent)} .c-cuivre{background-image:var(--metal-cuivre)}
  /* L'étiquette d'une carte, le titre d'une colonne du pied : leur couleur arrive en variable ;
     le métal ajoute son dégradé et rend les lettres transparentes pour qu'il s'y voie. */
  .etiquette,.pied-cols h2,.pied-reseaux h2{background-image:var(--etiquette-metal,var(--pied-titres-metal,none));-webkit-background-clip:text;background-clip:text}
  .etiquette{color:var(--etiquette-encre,var(--etiquette,var(--secondaire,var(--lien,var(--marque)))))}
  .pied-cols h2,.pied-reseaux h2{color:var(--pied-titres-encre,var(--pied-titres,inherit))}
  /* Le texte entre crochets en métal (livraison 210) : [Les cinq applications] en doré. */
  .mev-or b,.mev-argent b,.mev-cuivre b{font-weight:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
  .mev-or b{background-image:var(--metal-or)} .mev-argent b{background-image:var(--metal-argent)} .mev-cuivre b{background-image:var(--metal-cuivre)}
}

/* Un bouton en métal : le dégradé en remplissage, un liseré clair en haut et une ombre douce —
   c'est ce qui fait la pièce de métal plutôt que l'aplat de couleur. */
.btn.btn-plein.btn-c-or,.btn.btn-plein.btn-c-argent,.btn.btn-plein.btn-c-cuivre{
  border:0;color:#2B2205;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55)}
.btn.btn-plein.btn-c-or{background:var(--or);background-image:var(--metal-or)}
.btn.btn-plein.btn-c-argent{background:var(--argent);background-image:var(--metal-argent);color:#1D2227}
.btn.btn-plein.btn-c-cuivre{background:var(--cuivre);background-image:var(--metal-cuivre);color:#2A1206}
.btn.btn-plein.btn-c-or:hover,.btn.btn-plein.btn-c-argent:hover,.btn.btn-plein.btn-c-cuivre:hover{filter:brightness(1.08) saturate(1.05)}
.btn.btn-clair.btn-c-or{color:var(--or);border-color:var(--or)} .btn.btn-lien.btn-c-or{color:var(--or)}
.btn.btn-clair.btn-c-argent{color:var(--argent);border-color:var(--argent)} .btn.btn-lien.btn-c-argent{color:var(--argent)}
.btn.btn-clair.btn-c-cuivre{color:var(--cuivre);border-color:var(--cuivre)} .btn.btn-lien.btn-c-cuivre{color:var(--cuivre)}

/* 5a. Carrousel d'articles : scroll-snap (marche sans JavaScript), flèches et points par site.js. */
.carrousel{position:relative;padding:0 44px}
.articles.articles-carrousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;--visibles:3}
.articles.articles-carrousel::-webkit-scrollbar{display:none}
.articles.articles-carrousel .article-carte{flex:0 0 calc((100% - 18px * (var(--visibles) - 1)) / var(--visibles));scroll-snap-align:start}
.articles.articles-carrousel .article-carte[hidden]{display:none}
.carrousel .car-prec,.carrousel .car-suiv{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--trait);background:var(--carte);color:var(--encre);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.carrousel .car-prec{left:0}.carrousel .car-suiv{right:0}
.carrousel .car-prec:disabled,.carrousel .car-suiv:disabled{opacity:.35;cursor:default}
.carrousel .car-points{display:flex;gap:6px;justify-content:center;margin-top:10px;min-height:8px}
.carrousel .car-points i{width:8px;height:8px;border-radius:50%;background:var(--trait-2,var(--trait));transition:background .2s}
.carrousel .car-points i.actif{background:var(--marque)}
/* Les points d’un carrousel suivent ses boutons (livraison 298) : la couleur de la section, ou celle
   posée sur les boutons de ses cartes ; un métal met son dégradé dans le point actif. */
.carrousel .car-points i.actif,.hcar-point[aria-selected="true"]{background:var(--bouton,var(--marque));background-image:var(--bouton-metal,none)}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-secondaire) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--secondaire,var(--marque));--bouton-2:var(--secondaire,var(--marque-2));--texte-sur-bouton:var(--texte-sur-secondaire,#fff)}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-rouge) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--c-rouge);--bouton-2:var(--c-rouge);--texte-sur-bouton:#fff}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-orange) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--c-orange);--bouton-2:var(--c-orange);--texte-sur-bouton:#fff}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-vert) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--c-vert);--bouton-2:var(--c-vert);--texte-sur-bouton:#fff}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-encre) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--encre);--bouton-2:var(--encre);--texte-sur-bouton:var(--papier,#fff)}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-titres) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--titres-couleur,var(--encre));--bouton-2:var(--titres-couleur,var(--encre));--texte-sur-bouton:var(--papier,#fff)}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-liens) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--lien,var(--marque));--bouton-2:var(--lien,var(--marque-2));--texte-sur-bouton:#fff}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-or) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--or);--bouton-2:var(--or);--texte-sur-bouton:#2B2205;--bouton-metal:var(--metal-or);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-argent) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--argent);--bouton-2:var(--argent);--texte-sur-bouton:#1D2227;--bouton-metal:var(--metal-argent);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-cuivre) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--cuivre);--bouton-2:var(--cuivre);--texte-sur-bouton:#2A1206;--bouton-metal:var(--metal-cuivre);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-bronze) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--bronze);--bouton-2:var(--bronze);--texte-sur-bouton:#241807;--bouton-metal:var(--metal-bronze);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-orrose) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--orrose);--bouton-2:var(--orrose);--texte-sur-bouton:#2E1515;--bouton-metal:var(--metal-orrose);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-platine) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--platine);--bouton-2:var(--platine);--texte-sur-bouton:#1A1F24;--bouton-metal:var(--metal-platine);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-champagne) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--champagne);--bouton-2:var(--champagne);--texte-sur-bouton:#2A2210;--bouton-metal:var(--metal-champagne);--bouton-encre:transparent}
:is(.carrousel,.hero-carrousel,.hero):has(.btn-c-metal) :is(.car-points i.actif,.hcar-point[aria-selected="true"]){--bouton:var(--metal,var(--or));--bouton-2:var(--metal,var(--or));--texte-sur-bouton:var(--metal-encre-bouton,#2B2205);--bouton-metal:var(--metal-metal,var(--metal-or));--bouton-encre:transparent}
@media (max-width:700px){
  .carrousel{padding:0}
  .carrousel .car-prec,.carrousel .car-suiv{display:none}
  .articles.articles-carrousel .article-carte{flex-basis:78%}
}

/* 5a-bis. Le même carrousel pour la galerie et pour les cartes (livraison 210).

   « C'est dommage que ça ne soit pas pour une galerie ou pour des briques métier ou pour des
   cartes également. » Une seule enveloppe, trois pistes possibles : les articles, les photos
   d'une galerie, les cartes d'une grille. Tout ce qui suit vaut pour les trois. */
.galerie.gal-carrousel,.briques.briques-carrousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;--visibles:3;grid-template-columns:none}
.galerie.gal-carrousel::-webkit-scrollbar,.briques.briques-carrousel::-webkit-scrollbar{display:none}
.galerie.gal-carrousel>figure,.briques.briques-carrousel>.brique{flex:0 0 calc((100% - 18px * (var(--visibles) - 1)) / var(--visibles));scroll-snap-align:start;margin:0}
.galerie.gal-carrousel>figure[hidden],.briques.briques-carrousel>.brique[hidden]{display:none}

/* L'EFFET 3D (livraison 210) — « option carrousel 3D comme sur le site OFAD ».
   La perspective est posée ici ; l'inclinaison de chaque carte est écrite par site.js au fil du
   défilement (une transformation par carte, selon sa distance au milieu). Sans JavaScript, rien
   ne s'incline : le carrousel reste plat, et il marche. */
.carrousel.car-3d :is(.articles-carrousel,.gal-carrousel,.briques-carrousel,.avis-carrousel,.rea-carrousel){
  perspective:1200px;perspective-origin:50% 50%;padding:18px 0}
.carrousel.car-3d .articles-carrousel>*,.carrousel.car-3d .gal-carrousel>*,.carrousel.car-3d .briques-carrousel>*{
  transform-style:preserve-3d;transition:transform .28s ease;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .carrousel.car-3d .articles-carrousel>*,.carrousel.car-3d .gal-carrousel>*,.carrousel.car-3d .briques-carrousel>*{transition:none}
}

/* LE MANÈGE (livraison 241) — le second carrousel : « un vrai carrousel 3D sans fin, qui
   continue à tourner tout le temps, avec une légère transparence quand ça tourne, comme pour
   montrer qu'il passe bien derrière ».

   Rien ici ne s'applique tant que site.js n'a pas posé `manege-actif` : sans JavaScript, le
   carrousel reste celui qui défile au doigt, avec ses flèches et ses points. C'est la même règle
   que pour l'effet 3D depuis la 210, et c'est ce qui permet d'ajouter ce mode sans toucher à
   l'existant.

   Les cartes sont posées les unes sur les autres au centre et écartées par une transformation
   que site.js recalcule à chaque image : la rotation est continue, elle ne s'arrête pas entre
   deux vignettes. Celle qui passe derrière s'éloigne et s'éclaircit ; celle du milieu est
   toujours pleinement opaque — c'est elle qu'on lit. */
.carrousel.car-manege.manege-actif{padding:0}
.carrousel.car-manege.manege-actif :is(.articles-carrousel,.gal-carrousel,.briques-carrousel,.avis-carrousel,.rea-carrousel){
  display:block;position:relative;overflow:visible;
  perspective:1400px;perspective-origin:50% 50%;
  height:var(--manege-h,340px);max-height:none;
  scroll-snap-type:none;padding:0;margin:0}
.carrousel.car-manege.manege-actif .articles-carrousel>*,
.carrousel.car-manege.manege-actif .gal-carrousel>*,
.carrousel.car-manege.manege-actif .briques-carrousel>*{
  position:absolute;top:50%;left:50%;width:var(--manege-l,320px);max-width:76%;
  margin:0;transform-style:preserve-3d;backface-visibility:hidden;
  transition:opacity .25s linear;will-change:transform,opacity;cursor:pointer}
/* Le manège s'arrête tant que la souris est dessus, ou qu'un élément y a le focus clavier :
   on ne lit pas une carte qui bouge, et on ne clique pas une cible qui fuit. */
.carrousel.car-manege.manege-actif .car-points{margin-top:14px}
@media (max-width:700px){
  .carrousel.car-manege.manege-actif .articles-carrousel,
  .carrousel.car-manege.manege-actif .gal-carrousel,
  .carrousel.car-manege.manege-actif .briques-carrousel{height:var(--manege-h-mobile,280px)}
}
@media (prefers-reduced-motion:reduce){
  /* Qui a demandé moins de mouvement ne voit pas de manège du tout : site.js ne l'allume pas,
     et cette règle est le filet si la préférence change après le chargement. */
  .carrousel.car-manege.manege-actif .articles-carrousel>*,
  .carrousel.car-manege.manege-actif .gal-carrousel>*,
  .carrousel.car-manege.manege-actif .briques-carrousel>*{transition:none}
}

/* LE SENS VERTICAL (livraison 210) — « choisir le défilement des cartes horizontales ou
   verticales ». Une fenêtre haute dans laquelle on descend, carte par carte. Les flèches
   pivotent d'un quart de tour : c'est le même bouton, le même HTML. */
/* La fenêtre haute : les flèches se logent au-dessus et au-dessous (d'où la marge verticale),
   les points se rangent à droite. « Visibles » vaut ici en hauteur : chaque carte occupe au
   moins sa part de la fenêtre — une carte au contenu long prend la place qu'il lui faut. */
.carrousel.car-vertical{padding:22px 26px 22px 0}
.carrousel.car-vertical :is(.articles-carrousel,.gal-carrousel,.briques-carrousel,.avis-carrousel,.rea-carrousel){
  --haut-carrousel:min(72vh,640px);
  flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;
  max-height:var(--haut-carrousel);padding:0 4px 4px}
.carrousel.car-vertical .articles-carrousel>*,.carrousel.car-vertical .gal-carrousel>*,.carrousel.car-vertical .briques-carrousel>*{
  flex:0 0 auto;width:auto;scroll-snap-align:start;
  min-height:calc((var(--haut-carrousel) - 18px * (var(--visibles) - 1)) / var(--visibles))}
.carrousel.car-vertical .car-prec,.carrousel.car-vertical .car-suiv{top:auto;left:50%;right:auto;transform:translateX(-50%) rotate(90deg)}
.carrousel.car-vertical .car-prec{top:-2px}
.carrousel.car-vertical .car-suiv{bottom:-2px}
.carrousel.car-vertical .car-points{flex-direction:column;position:absolute;right:2px;top:50%;transform:translateY(-50%);margin:0}
/* Livraison 321 : dans une fenêtre haute, une carte prend toute la largeur de la section — et son
   image avec elle : « quand on n'est pas en manège, ça zoome très très grand sur l'image, et on ne
   peut pas changer ça ». La carte garde une largeur lisible, centrée, et l'image reste dans la part
   de hauteur que « combien s'en voient à la fois » lui donne. */
.carrousel.car-vertical .articles-carrousel>*,.carrousel.car-vertical .gal-carrousel>*,.carrousel.car-vertical .briques-carrousel>*{
  width:min(100%, var(--carte-haute, 560px));margin-left:auto;margin-right:auto}
.carrousel.car-vertical :is(.article-carte,.brique,.avis-carte,.rea-carte) :is(img,.art-couverture){
  max-height:calc((var(--haut-carrousel) - 18px * (var(--visibles) - 1)) / var(--visibles) - 96px);
  min-height:90px;object-fit:cover}
/* Le manège couché : l'anneau tourne dans la hauteur, la fenêtre n'a plus de barre de défilement. */
.carrousel.car-manege.car-vertical.manege-actif :is(.articles-carrousel,.gal-carrousel,.briques-carrousel,.avis-carrousel,.rea-carrousel){
  overflow:visible;max-height:none;flex-direction:row}
.carrousel.car-manege.car-vertical.manege-actif .articles-carrousel>*,
.carrousel.car-manege.car-vertical.manege-actif .gal-carrousel>*,
.carrousel.car-manege.car-vertical.manege-actif .briques-carrousel>*{min-height:0;max-height:none}

@media (max-width:700px){
  .galerie.gal-carrousel>figure,.briques.briques-carrousel>.brique{flex-basis:78%}
  /* Sur téléphone, le vertical redevient horizontal : c'est le sens du pouce. */
  .carrousel.car-vertical :is(.articles-carrousel,.gal-carrousel,.briques-carrousel,.avis-carrousel,.rea-carrousel){
    flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;max-height:none}
  .carrousel.car-vertical{padding:0}
  .carrousel.car-vertical .articles-carrousel>*,.carrousel.car-vertical .gal-carrousel>*,.carrousel.car-vertical .briques-carrousel>*{flex-basis:78%;min-height:0}
  .carrousel.car-vertical .car-points{position:static;flex-direction:row;transform:none;margin-top:10px}
}

/* 5b. Le menu : transparent sur le bandeau puis fixe, avec ombre au défilement. */
.barre.barre-transparente:not(.barre-defilee){background:transparent !important;border-bottom-color:transparent !important;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.barre.barre-transparente{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.barre.barre-ombre.barre-defilee{box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* Le pied de page sur un fond sombre (livraison 199) : ses titres de colonnes suivaient l'encre
   du thème (noire) au lieu du blanc du fond — « Boutique », « L'association », « Nous suivre »
   étaient illisibles sur le gris de TW Prod (axe : contraste 1,7). Sans couleur de titres choisie,
   ils prennent la couleur du texte du fond ; une couleur choisie garde la main. */
.pied.fond-sombre .pied-cols h2,.pied.fond-sombre .pied-reseaux h2,.pied.fond-sombre .pied-horaires h2{color:var(--pied-titres,inherit)}

/* La remise d'un membre, sous le sous-total du panier (livraison 213). */
.panier-remise{display:block;color:var(--c-vert);font-weight:600}

/* ----------------------------------------------------------------------------------
   L'ESPACE MEMBRE (livraison 212) — deux colonnes, ou un bonjour.
   ---------------------------------------------------------------------------------- */
.membre{max-width:820px;margin:0 auto}
.membre-formulaires{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.membre-formulaires{grid-template-columns:1fr}}
.membre-form{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r,10px);padding:20px}
.membre-form h3{margin-bottom:12px}
.membre-form label{display:block;font-size:calc(14px * var(--echelle-bloc,1));font-weight:600;margin-bottom:12px}
.membre-form input{display:block;width:100%;margin-top:5px;font:inherit;font-weight:400;padding:10px 12px;
  border:1px solid var(--trait-2);border-radius:var(--r,10px);background:var(--papier);color:var(--encre)}
.membre-form .membre-aide{display:block;font-weight:400;font-size:12.5px;color:var(--encre-douce);margin-top:4px}
/* L'œil qui montre le mot de passe (livraison 216) : dans le champ, à droite. */
.mdp-champ{position:relative;display:block}
.mdp-champ input{padding-right:46px}
.mdp-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--encre-douce);cursor:pointer}
.mdp-oeil svg{width:20px;height:20px}
.mdp-oeil:hover{color:var(--encre);background:var(--papier-2,transparent)}
.mdp-oeil[aria-pressed="true"]{color:var(--marque)}
.membre-renvoyer{margin-top:10px;text-align:center}
.membre-form .btn{width:100%;margin-top:4px}
.membre-connecte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r,10px);padding:22px;text-align:center}
.membre-bonjour{font-size:calc(19px * var(--echelle-bloc,1));font-weight:700;margin-bottom:12px}
.membre-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.membre-rgpd{font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);margin-top:14px;text-align:center}
.membre-retour{margin-top:12px;padding:10px 14px;border-radius:var(--r,10px);text-align:center;
  background:var(--marque-claire);color:var(--encre)}
.membre-retour.erreur{background:color-mix(in srgb,var(--c-rouge) 12%,transparent);color:var(--c-rouge)}

/* ----------------------------------------------------------------------------------
   LES CARTES D'OFFRE (livraison 215) — « des cartes un peu comme j'ai fait en bas ».

   Un filet de couleur en haut, une pastille, le prix en grand dans la couleur de la carte,
   des points à coches, un bouton pleine largeur, un lien discret. Chaque carte porte sa
   couleur dans --carte-couleur ; sans couleur choisie, c'est celle de la marque. Un métal
   (or, argent, cuivre) apporte en plus son dégradé, découpé sur le prix.
   ---------------------------------------------------------------------------------- */
/* Une grille d'offres est une grille régulière : la mise en tuiles d'un modèle (une première
   carte deux fois plus grande) n'a pas de sens ici — on compare des offres côte à côte. */
.briques.briques-offres{align-items:stretch;gap:18px}
.briques.briques-offres .brique-offre{grid-column:span 1 !important;grid-row:span 1 !important}
.briques-filets.briques-offres .brique-offre{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:26px 22px 22px}
/* Les points d'une offre ne sont pas les puces des briques métier : ni filet, ni pastille ronde. */
.briques-offres .brique li,.briques-offres .brique li.cle,.briques-offres .brique li:not(.cle){
  border:0;padding:0 0 0 26px;color:inherit}
.briques-offres .brique li::before,.briques-offres .brique li.cle::before,.briques-offres .brique li:not(.cle)::before{
  content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:color-mix(in srgb,var(--carte-couleur) 16%,transparent)}
.briques-offres .brique .detail{display:inline;font-size:inherit;margin:0}
.brique-offre{--carte-couleur:var(--marque);position:relative;display:flex;flex-direction:column;
  padding:26px 22px 22px;overflow:hidden;background:var(--carte)}
.brique-offre::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--carte-couleur);background-image:var(--carte-couleur-metal,none)}
.brique-offre.brique-avant{border-color:var(--carte-couleur);box-shadow:0 0 0 1px var(--carte-couleur),0 14px 36px -18px var(--carte-couleur);background:var(--carte);color:inherit}
.offre-tete{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.offre-tete h2,.offre-tete h3{font-size:calc(19px * var(--echelle-bloc,1));margin:0;text-transform:none;letter-spacing:0}
.offre-pastille{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:13px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--carte-couleur);background-image:var(--carte-couleur-metal,none)}
.brique-offre .brique-ic{flex:none;color:var(--carte-couleur)}
.offre-accroche{color:var(--encre-douce);font-size:calc(14.5px * var(--echelle-bloc,1));margin-bottom:14px}
.offre-prix{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.offre-prix b{font-size:calc(34px * var(--echelle-bloc,1));line-height:1.05;font-weight:800;letter-spacing:-.02em;
  color:var(--carte-couleur)}
.offre-avant{font-size:calc(12px * var(--echelle-bloc,1));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
.offre-apres{font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.offre-detail{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce);margin-bottom:14px;line-height:1.5}
.offre-points{list-style:none;margin:0 0 18px;padding:0;flex:1;display:grid;gap:9px}
.offre-points li{position:relative;padding-left:26px;font-size:calc(14.5px * var(--echelle-bloc,1));line-height:1.5}
.offre-points li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:color-mix(in srgb,var(--carte-couleur) 16%,transparent)}
.offre-points li::after{content:"";position:absolute;left:5px;top:7px;width:6px;height:3px;
  border-left:2px solid var(--carte-couleur);border-bottom:2px solid var(--carte-couleur);transform:rotate(-45deg)}
.offre-points li.cle{font-weight:600}
.offre-points .detail{color:var(--encre-douce)}
.offre-bouton{margin:auto 0 8px}
.offre-bouton .btn{width:100%;justify-content:center;text-align:center}
.offre-lien{text-align:center;font-size:calc(13.5px * var(--echelle-bloc,1))}
.offre-lien a{color:var(--carte-couleur);font-weight:600;text-decoration:none}
.offre-lien a:hover{text-decoration:underline}
@supports (-webkit-background-clip:text) or (background-clip:text){
  /* Un prix en métal : le dégradé découpé sur les chiffres, comme partout ailleurs (210). */
  .brique-offre .offre-prix b{background-image:var(--carte-couleur-metal,none);
    -webkit-background-clip:text;background-clip:text;
    color:var(--carte-couleur-encre,var(--carte-couleur))}
}
@media(max-width:700px){
  .brique-offre{padding:22px 18px 18px}
  .offre-prix b{font-size:calc(30px * var(--echelle-bloc,1))}
}

/* ---- La recherche dans le site (livraison 218) ------------------------------------------
   Un panneau sous la barre, fermé par défaut. Tout se passe dans le navigateur du visiteur :
   l'index arrive une fois, et plus rien ne part ensuite. */
.lien-recherche{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:0;background:none;color:inherit;cursor:pointer;border-radius:10px}
.lien-recherche svg{width:20px;height:20px}
.lien-recherche:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.recherche-panneau{position:absolute;left:0;right:0;top:100%;z-index:60;
  background:var(--papier);border-bottom:1px solid var(--trait);box-shadow:0 14px 30px rgba(0,0,0,.12)}
/* Où se pose le champ, et quelle largeur il prend (livraison 220) : les mêmes réglages que le
   reste du menu, parce qu'un panneau pleine largeur ne convient pas à tous les sites. */
.recherche-boite{width:100%}
.rech-normale .recherche-boite{max-width:820px}
.rech-petite .recherche-boite{max-width:560px}
.rech-grande .recherche-boite{max-width:none}
.rech-centre .recherche-boite{margin-inline:auto}
.rech-droite .recherche-boite{margin-inline:auto 0}
.rech-petite .recherche-forme input[type=search]{font-size:15px;padding:9px 12px}
.rech-petite .recherche-ligne b{font-size:15px}
.rech-grande .recherche-forme input[type=search]{font-size:17px;padding:13px 16px}
.rech-grande .recherche-ligne b{font-size:17px}
.recherche-forme{display:flex;gap:8px;align-items:center;padding:14px 0 6px}
.recherche-forme input[type=search]{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 14px;
  border:1px solid var(--trait-2);border-radius:10px;background:var(--papier);color:var(--encre)}
.recherche-forme input[type=search]:focus{outline:none;border-color:var(--bouton,var(--marque));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bouton,var(--marque)) 22%,transparent)}
.recherche-fermer{font:inherit;font-size:22px;line-height:1;width:40px;height:40px;border:0;background:none;
  color:var(--encre-douce);cursor:pointer;border-radius:10px}
.recherche-fermer:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.recherche-aide{font-size:13px;color:var(--encre-douce);margin:0 0 8px}
.recherche-resultats{max-height:62vh;overflow:auto;padding-bottom:14px}
.recherche-ligne{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:inherit;border:1px solid transparent}
.recherche-ligne:hover,.recherche-ligne:focus-visible{background:color-mix(in srgb,var(--bouton,var(--marque)) 8%,transparent);border-color:var(--trait)}
.recherche-ligne b{display:block;font-size:16px}
.recherche-genre{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bouton,var(--marque));border:1px solid var(--bouton,var(--marque));border-radius:999px;padding:1px 8px;margin-top:3px}
.recherche-extrait{display:block;font-size:13.5px;color:var(--encre-douce);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recherche-rien{font-size:14.5px;color:var(--encre-douce);padding:8px 12px 14px}
/* La page de résultats, pour un visiteur sans JavaScript. */
.resultats-liste{display:grid;gap:10px;margin-top:18px}
.resultat-carte{display:block;padding:14px 16px;border:1px solid var(--trait);border-radius:12px;text-decoration:none;color:inherit;background:var(--papier)}
.resultat-carte:hover{border-color:var(--marque)}
.resultat-carte b{display:block;font-size:17px}
.resultat-carte span{display:block;font-size:14px;color:var(--encre-douce);margin-top:3px}
@media(max-width:700px){.recherche-forme{flex-wrap:wrap}.recherche-forme input[type=search]{flex:1 1 100%}}

/* ═══ L'agenda (livraison 227) ═══════════════════════════════════════════════════════════════
   Les dates d'un lieu : un pavé qui donne le jour, ce qui se passe à côté, et de quoi l'ajouter
   à son propre agenda. Trois présentations, la même matière. */
.dates-liste{display:flex;flex-direction:column;gap:2px}
.date-ligne{display:flex;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--trait)}
.date-ligne:last-child{border-bottom:0}
.pave-date{flex:0 0 auto;width:54px;text-align:center;padding:6px 0;border-radius:10px;
  border:1px solid var(--trait-2,var(--trait));background:var(--papier-2,transparent);line-height:1.15}
.pave-date b{display:block;font-size:calc(19px * var(--echelle-bloc,1));font-weight:800}
.pave-date span{display:block;font-size:calc(11.5px * var(--echelle-bloc,1));text-transform:lowercase;color:var(--encre-douce)}
.date-quoi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.date-quoi>b{font-size:calc(15.5px * var(--echelle-bloc,1))}
.date-quoi>span{font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.date-texte{color:var(--encre-faible,var(--encre-douce))}
.date-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.date-etat{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  font-size:calc(11px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid currentColor}
.etat-complet{color:#B07A1F}.etat-annule{color:#B3402F}.etat-reporte{color:#5A6B8C}
.date-ics{font-size:calc(12.5px * var(--echelle-bloc,1));text-decoration:underline;text-underline-offset:2px;color:var(--lien,var(--marque))}
.dates-tout{margin-top:16px;font-size:calc(13px * var(--echelle-bloc,1))}

.dates-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.date-carte{border:1px solid var(--trait);border-radius:var(--r,12px);padding:16px;background:var(--carte,transparent);
  display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.date-carte .quand{font-size:calc(12.5px * var(--echelle-bloc,1));font-weight:700;color:var(--encre-douce)}
.date-carte h3{font-size:calc(17px * var(--echelle-bloc,1));margin:0}
.date-carte p{margin:0;font-size:calc(13.5px * var(--echelle-bloc,1))}
.date-detail{color:var(--encre-douce)}

/* Le mois en grille. Sous 700 px il disparaît au profit de la liste rendue juste après : personne
   ne lit sept colonnes sur un écran de six centimètres (même règle que les carrousels, 210). */
.mois-agenda{margin-bottom:18px}
.mois-nom{font-weight:700;margin:0 0 8px;text-transform:capitalize}
.mois-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mois-grille .jour-nom{font-size:calc(11px * var(--echelle-bloc,1));text-transform:uppercase;
  letter-spacing:.05em;opacity:.6;text-align:center;padding:4px 0}
.case-jour{aspect-ratio:1;border:1px solid var(--trait);border-radius:8px;padding:5px;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:calc(12.5px * var(--echelle-bloc,1))}
.case-jour.hors{border-color:transparent}
.case-jour.ajd{border-color:var(--marque);font-weight:800}
.case-jour.pleine{background:color-mix(in srgb,var(--marque) 10%,transparent)}
.case-jour .pts{display:flex;gap:3px;flex-wrap:wrap}
.case-jour .pt{width:6px;height:6px;border-radius:999px;background:var(--marque);display:block}
.dates-repli{display:none}
/* Sur grand écran la liste est cachée : le calendrier suffit. Mais cliquer une date doit mener
   quelque part — elle s'ouvre alors sous la grille, avec le détail complet (lieu, tarif, bouton,
   .ics) que la case ne peut pas porter. Sans ça, le clic du calendrier ne mènerait à rien de
   visible, ce qui est exactement le défaut qu'on corrige (livraison 231). */
.dates-repli.ouverte{display:flex;margin-top:18px}
@media(max-width:700px){
  .mois-agenda{display:none}
  .dates-repli{display:flex}
  .date-ligne{flex-wrap:wrap}
  .date-actions{width:100%;justify-content:flex-start}
}

/* --------------------------------------------------------------------------
   PRENDRE RENDEZ-VOUS (livraison 229).

   Trois zones qui se suivent : ce qu'on vient faire, quand, et qui l'on est. Elles se suivent
   AUSSI sur téléphone, en une seule colonne — un rendez-vous se prend souvent dans la rue, entre
   deux choses, et une grille de créneaux en trois colonnes de deux centimètres ne se touche pas.
   Les créneaux sont de vrais boutons de 44 px de haut : c'est la taille d'un doigt.
   -------------------------------------------------------------------------- */
.rdv{display:flex;flex-direction:column;gap:20px}
.rdv-lieu{font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--encre-douce);margin:6px 0 0}

.rdv-prestations{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rdv-prestations.rdv-une-seule{grid-template-columns:1fr}
.rdv-presta{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  border:1px solid var(--trait);border-radius:var(--r,12px);background:var(--carte,var(--papier-2,transparent))}
.rdv-presta:hover{border-color:var(--marque,currentColor)}
.rdv-presta input{margin-top:3px;flex:0 0 auto}
.rdv-presta:has(input:checked){border-color:var(--marque,currentColor);background:var(--marque-claire,var(--carte,transparent));box-shadow:0 0 0 1px var(--marque,currentColor) inset}
.rdv-presta input:focus-visible{outline:2px solid var(--marque,currentColor);outline-offset:2px}
.rdv-presta-corps{display:flex;flex-direction:column;gap:2px;min-width:0}
.rdv-presta-corps b{font-size:calc(15px * var(--echelle-bloc,1))}
.rdv-presta-detail{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.rdv-presta-note{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-faible,var(--encre-douce))}

.rdv-quand{display:flex;flex-wrap:wrap;gap:18px}
.rdv-attente{color:var(--encre-douce);font-size:calc(13.5px * var(--echelle-bloc,1));margin:0}
.rdv-jour{flex:1 1 150px;min-width:140px;display:flex;flex-direction:column;gap:8px}
.rdv-jour>b{font-size:calc(13px * var(--echelle-bloc,1));
  padding-bottom:6px;border-bottom:1px solid var(--trait)}
/* « lundi 21 septembre » : en français le mois ne prend pas de majuscule — seule la première
   lettre de la ligne en prend une. `capitalize` mettrait « Lundi 21 Septembre ». */
.rdv-jour>b::first-letter{text-transform:uppercase}
.rdv-heures{display:flex;flex-direction:column;gap:6px}
.rdv-heure{min-height:44px;padding:8px 10px;border:1px solid var(--trait);border-radius:var(--r-petit,10px);
  background:var(--carte,transparent);color:inherit;font:inherit;font-size:calc(14px * var(--echelle-bloc,1));
  cursor:pointer;transition:border-color .12s ease,background .12s ease}
.rdv-heure:hover{border-color:var(--marque,currentColor)}
.rdv-heure:focus-visible{outline:2px solid var(--marque,currentColor);outline-offset:2px}
.rdv-heure.est-choisi{background:var(--marque,#333);color:var(--sur-marque,#fff);border-color:transparent;font-weight:700}

/* ------------------------------------------------------------------ LE PLANNING PAR SEMAINES
   (livraison 242) — « par semaine, comme un planning Google, avec des petites flèches qui font
   défiler les semaines », « les créneaux alignés, que ça rentre bien lundi mardi mercredi jeudi
   vendredi », « tout doit être propre et aligné, pas comme c'est actuellement ».

   Sept colonnes de largeur égale, dans l'ordre de la semaine, toujours : un jour fermé garde sa
   place et affiche un tiret, au lieu de disparaître et de décaler tous les suivants. Les listes
   d'heures commencent donc toutes à la même ligne, quelle que soit la hauteur des voisines. */
.rdv-barre-semaine{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 2px}
.rdv-semaine-titre{font-size:calc(15px * var(--echelle-bloc,1));text-align:center;min-width:14ch}
.rdv-semaine-titre::first-letter{text-transform:uppercase}
.rdv-semaine-suite{display:block;margin:18px 0 6px;color:var(--encre-douce)}
.rdv-fleche{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--trait);
  background:var(--carte,transparent);color:inherit;font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.rdv-fleche:hover:not(:disabled){border-color:var(--marque,currentColor)}
.rdv-fleche:focus-visible{outline:2px solid var(--marque,currentColor);outline-offset:2px}
.rdv-fleche:disabled{opacity:.35;cursor:default}
.rdv-semaines .rdv-quand{display:block}
.rdv-semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start}
.rdv-semaine .rdv-jour{flex:none;min-width:0;gap:6px}
.rdv-semaine .rdv-jour-titre{display:flex;align-items:baseline;justify-content:space-between;gap:4px;
  font-size:calc(12.5px * var(--echelle-bloc,1));padding-bottom:5px;border-bottom:1px solid var(--trait);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdv-semaine .rdv-jour-titre::first-letter{text-transform:uppercase}
.rdv-semaine .rdv-jour-num{font-size:calc(15px * var(--echelle-bloc,1));font-weight:700;flex:0 0 auto}
.rdv-semaine .rdv-heure{padding:8px 4px;text-align:center;font-size:calc(13px * var(--echelle-bloc,1))}
.rdv-jour-vide .rdv-vide{display:block;text-align:center;color:var(--encre-faible,var(--encre-douce));
  padding:10px 0;font-size:calc(13px * var(--echelle-bloc,1))}
.rdv-jour-passe{opacity:.45}
.rdv-aucun{margin:14px 0 0}
/* La taille du planning : « petit, moyen, grand — pour qu'on puisse mettre une section à côté ».
   Le planning se resserre, le reste de la section ne bouge pas. */
.rdv-petit .rdv-quand{max-width:420px}
.rdv-moyen .rdv-quand{max-width:720px}
.rdv-petit .rdv-semaine,.rdv-moyen .rdv-semaine{gap:6px}
.rdv-petit .rdv-semaine .rdv-heure{padding:7px 2px;font-size:calc(11.5px * var(--echelle-bloc,1))}
.rdv-petit .rdv-semaine .rdv-jour-titre{font-size:calc(11px * var(--echelle-bloc,1))}
/* Sous 820 px, sept colonnes deviennent sept traits : on passe à deux, puis à une. Les jours
   fermés s'effacent alors — ils ne servaient qu'à tenir l'alignement. */
@media (max-width:820px){
  .rdv-semaine{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .rdv-semaine .rdv-jour-vide{display:none}
  .rdv-petit .rdv-quand,.rdv-moyen .rdv-quand{max-width:none}
}
@media (max-width:480px){
  .rdv-semaine{grid-template-columns:1fr}
  .rdv-semaine .rdv-heures{flex-direction:row;flex-wrap:wrap}
  .rdv-semaine .rdv-heure{flex:0 0 auto;min-width:80px}
}

.rdv-forme{display:flex;flex-direction:column;gap:6px;padding-top:4px;border-top:1px solid var(--trait)}
.rdv-forme label{font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600;margin-top:8px}
.rdv-forme input[type=text],.rdv-forme input[type=email],.rdv-forme input[type=tel],.rdv-forme textarea{
  width:100%;padding:11px 12px;border:1px solid var(--trait);border-radius:10px;
  background:var(--papier,#fff);color:inherit;font:inherit;font-size:calc(15px * var(--echelle-bloc,1))}
.rdv-forme .aide{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-faible,var(--encre-douce));margin:2px 0 0}
.rdv-choisi{font-weight:700;margin:10px 0 0}
.rdv-accord{display:flex;gap:9px;align-items:flex-start;font-weight:400;
  font-size:calc(13px * var(--echelle-bloc,1));line-height:1.45;margin-top:14px}
.rdv-accord input{margin-top:3px;flex:0 0 auto}
.rdv-forme button[type=submit]{margin-top:14px;align-self:flex-start}
.rdv-dit{margin:10px 0 0;font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--alerte,#B3402F)}
.rdv-fait{display:flex;flex-direction:column;gap:6px}
.rdv-fait b{font-size:calc(17px * var(--echelle-bloc,1))}
.rdv-fait p{margin:0;font-size:calc(14px * var(--echelle-bloc,1))}

/* La page d'un rendez-vous, ouverte depuis le courriel. */
.rdv-fiche{display:flex;flex-direction:column;gap:8px}
.rdv-fiche p{margin:0}
.rdv-etat{display:inline-block;align-self:flex-start;margin-top:4px;padding:2px 10px;border-radius:999px;
  font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid currentColor}
.rdv-etat-attente{color:#B07A1F}.rdv-etat-annule,.rdv-etat-refuse{color:#B3402F}.rdv-etat-honore{opacity:.6}
.rdv-gestes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.rdv-note{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-faible,var(--encre-douce));margin-top:8px}
.rdv-calendrier{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--trait)}

@media (max-width:640px){
  .rdv-quand,.rdv-calendrier{flex-direction:column;gap:14px}
  .rdv-jour{min-width:0}
  .rdv-heures{flex-direction:row;flex-wrap:wrap}
  .rdv-heure{flex:0 0 auto;min-width:88px;text-align:center}
  .rdv-forme button[type=submit]{align-self:stretch}
}

/* --------------------------------------------------------------------------
   L'AGENDA : l'affiche, le bouton plaçable, le calendrier qui se lit (livraison 231).
   -------------------------------------------------------------------------- */
.date-image{display:block;border-radius:var(--r,12px);object-fit:cover}
.date-carte .image-carte{width:100%;aspect-ratio:16/9;margin-bottom:4px}
.date-ligne .image-ligne{flex:0 0 auto;width:84px;height:84px;border-radius:10px}

/* La place du bouton. À droite : comme avant. À gauche : contre la date qu'il concerne.
   En dessous : sous le texte — c'est ce que fait le téléphone de toute façon. */
.date-cote{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:96px}
.date-cote .date-actions{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px}
.date-cote .date-actions .btn{text-align:center}
.date-cote .date-ics{text-align:center}
.date-ligne.bouton-dessous .date-quoi>.date-actions{justify-content:flex-start;margin-top:8px}

/* Le calendrier : le titre en clair, pas un point. Une case reste une case — on plafonne sa
   hauteur et on fait défiler au-delà de trois dates, sinon une journée chargée déforme la
   semaine entière. */
.case-jour{aspect-ratio:auto;min-height:92px}
.case-dates{display:flex;flex-direction:column;gap:3px;margin-top:4px;
  max-height:104px;overflow:auto;overscroll-behavior:contain}
.case-date{display:flex;align-items:center;gap:5px;width:100%;padding:3px 5px;
  border:0;border-radius:6px;background:var(--marque-claire,var(--papier-2,rgba(128,128,128,.12)));color:inherit;
  font:inherit;font-size:calc(11.5px * var(--echelle-bloc,1));line-height:1.25;
  text-align:left;cursor:pointer}
.case-date:hover{background:var(--marque,#333);color:var(--sur-marque,#fff)}
.case-date:focus-visible{outline:2px solid var(--marque,currentColor);outline-offset:1px}
.case-date img{flex:0 0 auto;width:18px;height:18px;border-radius:3px;object-fit:cover}
.case-date span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La date qu'on vient d'atteindre depuis le calendrier : un halo bref, pour la retrouver. */
.date-ligne.visee,.date-carte.visee{outline:2px solid var(--marque,currentColor);outline-offset:3px}

/* --------------------------------------------------------------------------
   LE CALENDRIER RÉGLABLE (livraisons 233 et 235).

   La taille est celle du CALENDRIER — un quart, la moitié, les trois quarts, toute la largeur —
   et la place dit où il va. Ce qu'il y a à côté (titre, texte, dates) prend le reste. Le contenu
   des cases s'adapte au nombre de dates du jour : une seule remplit la case avec son affiche,
   plusieurs se rangent en lignes ; jamais un simple point (refusé sur capture, 18 septembre).
   -------------------------------------------------------------------------- */
.agenda-seul{display:flex;flex-direction:column;gap:14px}
.agenda-seul .mois-agenda{width:100%}
.cal-tres-petit .mois-agenda{max-width:25%}
.cal-petit .mois-agenda{max-width:50%}
.cal-moyen .mois-agenda{max-width:75%}
.cal-grand .mois-agenda{max-width:none}
.agenda-seul.cal-centre .mois-agenda,.agenda-seul.cal-centre .cote-titre,.agenda-seul.cal-centre .cote-texte{margin-left:auto;margin-right:auto;text-align:center}
.agenda-seul.cal-droite .mois-agenda,.agenda-seul.cal-droite .cote-titre,.agenda-seul.cal-droite .cote-texte{margin-left:auto}
.cote-titre{margin:0 0 8px;font-size:calc(20px * var(--echelle-bloc,1))}
.cote-texte p{margin:0 0 10px}

/* Les cases : plus petites quand le calendrier l'est, mais toujours lisibles. */
.mois-tres-petit .case-jour{min-height:34px;padding:3px;font-size:calc(10.5px * var(--echelle-bloc,1))}
.mois-tres-petit .jour-nom{font-size:calc(9px * var(--echelle-bloc,1));padding:2px 0}
.mois-tres-petit .mois-grille{gap:2px}
.mois-petit .case-jour{min-height:52px;padding:4px;font-size:calc(11.5px * var(--echelle-bloc,1))}
.mois-moyen .case-jour{min-height:72px}
.mois-grand .case-jour{min-height:92px}
.mois-tres-petit .case-dates,.mois-petit .case-dates{max-height:none;gap:2px;margin-top:2px}
.mois-tres-petit .case-date{padding:1px 3px;font-size:calc(9.5px * var(--echelle-bloc,1));border-radius:4px}
.mois-tres-petit .case-date img{display:none}
.mois-petit .case-date{padding:2px 4px;font-size:calc(10.5px * var(--echelle-bloc,1))}
.mois-petit .case-date img{width:14px;height:14px}

/* CE QU'UNE DATE MONTRE DANS SA CASE (livraison 238) — trois crans, le numéro du jour toujours
   visible. « lignes » : une petite ligne par date, façon Google, trois ou quatre par case.
   « vignettes » : le titre avec une petite image. « affiches » : une date seule prend la case
   avec son affiche — SOUS le numéro, pas derrière. */
.cases-lignes .case-date img{display:none}
.cases-lignes .case-date{padding:1px 4px;font-size:calc(10.5px * var(--echelle-bloc,1));border-radius:4px;line-height:1.3}
.cases-lignes .case-dates{gap:2px;max-height:none}
.case-jour.pleine{position:relative}
.cases-affiches .case-jour .case-dates:has(.case-date.seule){position:absolute;left:3px;right:3px;bottom:3px;top:22px;margin:0;max-height:none;overflow:hidden;border-radius:6px}
.cases-affiches .case-date.seule{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:0;padding:4px 5px;border-radius:6px;white-space:normal}
.cases-affiches .case-date.seule span{white-space:normal;overflow:visible;font-weight:700;line-height:1.2}
.cases-affiches .case-date.seule.avec-image{background:var(--marque-claire,var(--papier-2,rgba(128,128,128,.12)))}
.cases-affiches .case-date.seule.avec-image img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.cases-affiches .case-date.seule.avec-image span{position:relative;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);padding:2px 4px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.cases-affiches .case-jour.pleine .num{position:relative;z-index:1}
.cases-affiches.mois-tres-petit .case-date.seule span,.cases-affiches.mois-petit .case-date.seule span{font-size:inherit}
.cases-affiches.mois-tres-petit .case-jour .case-dates:has(.case-date.seule){top:16px}
.cases-affiches.mois-tres-petit .case-date.seule.avec-image span{font-size:calc(8.5px * var(--echelle-bloc,1));padding:1px 2px}

/* À CÔTÉ : le mois d'un côté, le reste de l'autre. La colonne des dates défile toute seule quand
   il y en a beaucoup, pour que la grille reste en vue. */
.agenda-duo{display:grid;gap:22px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.agenda-duo.cal-tres-petit{grid-template-columns:minmax(200px,1fr) minmax(0,3fr)}
.agenda-duo.cal-petit{grid-template-columns:minmax(220px,1fr) minmax(0,1fr)}
.agenda-duo.cal-moyen{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
/* À droite : les colonnes s'inversent, et leurs largeurs avec — le calendrier garde SA taille. */
.agenda-duo.cal-droite .mois-agenda{order:2}
.agenda-duo.cal-droite .agenda-cote{order:1}
.agenda-duo.cal-tres-petit.cal-droite{grid-template-columns:minmax(0,3fr) minmax(200px,1fr)}
.agenda-duo.cal-petit.cal-droite{grid-template-columns:minmax(0,1fr) minmax(220px,1fr)}
.agenda-duo.cal-moyen.cal-droite{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
/* Sept colonnes ÉGALES, quoi que portent les cases : sans `minmax(0,…)`, un titre long élargit
   sa colonne et déforme tout le mois. */
.mois-grille{grid-template-columns:repeat(7,minmax(0,1fr))}
.case-date{min-width:0}
.agenda-duo .mois-agenda{margin-bottom:0;max-width:none}
.agenda-cote{min-width:0;max-height:70vh;overflow:auto;overscroll-behavior:contain}
.agenda-cote .dates-cartes{display:flex;flex-direction:column;gap:12px}
.agenda-cote .date-carte{margin:0}
/* Cliquer un jour ne laisse que lui : le bouton est le chemin du retour, et il n'apparaît qu'à ce
   moment-là — un bouton « Toutes les dates » affiché alors qu'elles y sont toutes ne veut rien dire. */
.agenda-cote .tout-lagenda{align-self:flex-start;margin-bottom:10px;border:1px solid var(--trait);
  border-radius:var(--r-petit,8px);background:transparent;color:inherit;font:inherit;
  font-size:calc(13px * var(--echelle-bloc,1));padding:5px 11px;cursor:pointer}
.agenda-cote .tout-lagenda:hover{background:var(--marque-claire,var(--carte))}
.agenda-cote .date-ligne.ecarte,.agenda-cote .date-carte.ecarte{display:none}

@media (max-width:820px){
  /* Deux colonnes sur un écran étroit donnent deux colonnes illisibles : on repasse l'une sous
     l'autre, le calendrier reprend toute la largeur, et il disparaît sous 700 px comme partout. */
  .agenda-duo,.agenda-duo.cal-tres-petit,.agenda-duo.cal-petit,.agenda-duo.cal-moyen{grid-template-columns:1fr}
  .agenda-duo.cal-droite .mois-agenda{order:0}
  .cal-tres-petit .mois-agenda,.cal-petit .mois-agenda,.cal-moyen .mois-agenda{max-width:none}
  .agenda-cote{max-height:none;overflow:visible}
}

/* La liste de repli en cartes (présentation « calendrier », dates dessous) : elle s'ouvre en
   grille, pas en colonne, sinon les cartes se retrouvent empilées sur toute la largeur. */
.dates-cartes.dates-repli.ouverte{display:grid}

/* --------------------------------------------------------------------------
   LES COULEURS DE CE QU'ON LIT — agenda et rendez-vous (livraison 234).

   La section porte une classe PAR réglage posé (`a-titres`, `a-texte`, `a-detail`, `a-date-fond`,
   `a-date-texte`, `a-creneau`) et la variable qui va avec. Chaque règle ci-dessous n'existe que
   derrière sa classe : sans réglage, rien ne s'applique, et un site déjà en ligne — fond sombre
   compris, où le chapo est blanc — se rend exactement comme avant. Un repli dans `var()` aurait
   suffi pour le fond clair et cassé le fond sombre : la classe est le seul garde-fou sûr.
   -------------------------------------------------------------------------- */
.a-date-fond .pave-date{background:var(--sec-date-fond)}
.a-date-texte .pave-date,.a-date-texte .pave-date span{color:var(--sec-date-texte)}
.a-titres .date-quoi>b,.a-titres .date-carte h3,.a-titres .rdv-presta-corps b{color:var(--sec-titres)}
.a-detail .date-quoi>span:not(.date-texte),.a-detail .date-detail,.a-detail .date-carte .quand{color:var(--sec-detail)}
/* La description d'une date est du texte, pas du détail : elle suit « texte », et cette règle
   vient après « détail » pour gagner à spécificité égale. */
.a-texte .chapo,.a-texte .date-quoi>.date-texte,.a-texte .date-carte>p:not(.date-detail),
.a-texte .rdv-presta-detail,.a-texte .rdv-lieu,.a-texte .rdv-attente{color:var(--sec-texte)}
.a-creneau .rdv-heure:not(.est-choisi){background:var(--sec-creneau)}
/* Les trois couleurs ajoutées en 242 : les titres des champs, le cadre de la prestation, le
   créneau choisi. Chacune derrière sa classe, comme les autres : sans réglage, rien ne change. */
.a-libelle .rdv-forme label,.a-libelle .rdv-choisi{color:var(--sec-libelle)}
.a-presta .rdv-presta:has(input:checked){border-color:var(--sec-presta);box-shadow:0 0 0 1px var(--sec-presta) inset}
.a-presta .rdv-presta-corps b{color:var(--sec-presta)}
.a-choisi .rdv-heure.est-choisi{background:var(--sec-choisi);border-color:transparent}
.a-titres .rdv-semaine .rdv-jour-titre,.a-titres .rdv-jour>b{color:var(--sec-titres)}

@media (max-width:820px){
  /* Deux colonnes sur un écran étroit donnent deux colonnes illisibles : on repasse l'une sous
     l'autre, et le calendrier disparaît sous 700 px comme partout ailleurs. */
  .agenda-duo,.agenda-duo.cal-petit{grid-template-columns:1fr}
  .agenda-cote{max-height:none;overflow:visible}
}

@media (max-width:700px){
  /* Sous 700 px le calendrier laisse la place à la liste (règle de la 227). La liste de repli
     porte alors la même information : on ne l'annonce donc pas deux fois aux lecteurs d'écran. */
  .date-ligne .image-ligne{width:64px;height:64px}
  .date-cote{min-width:0}
}

/* Les réglages d'allure de la section rendez-vous (livraison 232) : taille des créneaux, nombre
   de colonnes, largeur du bouton. Les mêmes leviers que sur les autres sections. */
.rdv.cr-petits .rdv-heure{min-height:38px;padding:6px 8px;font-size:calc(13px * var(--echelle-bloc,1))}
.rdv.cr-grands .rdv-heure{min-height:54px;padding:12px 14px;font-size:calc(15.5px * var(--echelle-bloc,1))}
/* 380 : jamais en semaines — la semaine a sa grille (lundi → dimanche), sinon elle s'écrasait. */
.rdv:not(.rdv-semaines)[style*="--rdv-colonnes"] .rdv-quand{display:grid;
  grid-template-columns:repeat(var(--rdv-colonnes),minmax(0,1fr))}
.rdv.bouton-pleine .rdv-forme button[type=submit]{align-self:stretch;width:100%}
/* LES JOURS EN RANGÉES (livraison 376) : le planning par jours réparti sur 1 à 4 rangées de
   colonnes égales et alignées (le navigateur compte les jours ouverts). Trois au plus par rangée
   sur téléphone. Le titre du jour tient en deux lignes — le nom, puis la date — partout pareil. */
.rdv .rdv-quand.rdv-en-rangees{display:grid;gap:10px;align-items:start;
  grid-template-columns:repeat(var(--rdv-colonnes-jours,3),minmax(0,1fr))}
.rdv-en-rangees .rdv-jour{flex:none;min-width:0;gap:6px}
.rdv-en-rangees .rdv-jour>b{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rdv-en-rangees .rdv-jour-date{font-weight:400;color:var(--encre-douce);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdv-en-rangees .rdv-heures{flex-direction:column}
.rdv-en-rangees .rdv-heure{min-width:0;padding:8px 4px;text-align:center}
.rdv-petit .rdv-en-rangees{gap:6px}
.rdv-petit .rdv-en-rangees .rdv-heure{padding:7px 2px;font-size:calc(11.5px * var(--echelle-bloc,1))}
.rdv-petit .rdv-en-rangees .rdv-jour>b{font-size:calc(11px * var(--echelle-bloc,1))}
@media (max-width:640px){
  .rdv .rdv-quand.rdv-en-rangees{grid-template-columns:repeat(var(--rdv-colonnes-tel,3),minmax(0,1fr))}
}
/* 376 : en « petit », le nom du jour (court) au-dessus de son numéro — ils ne se chevauchent plus. */
.rdv-petit .rdv-semaine .rdv-jour-titre{flex-direction:column;align-items:center;gap:0}

/* --------------------------------------------------------------------------
   DEUX SECTIONS CÔTE À CÔTE (livraison 239).

   Deux sections ORDINAIRES qui se suivent, emballées dans une grille à deux colonnes. Chacune
   garde tout — son fond, son espace vertical, ses réglages ; on lui retire seulement le cadre
   centré à 1180 px, c'est l'emballage qui le porte. Sous 820 px, l'une sous l'autre, dans l'ordre
   choisi. Un site sans section « à côté » ne rencontre aucune de ces règles.
   -------------------------------------------------------------------------- */
.cote-a-cote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start;max-width:1180px;margin:0 auto;padding:0 24px}
.cote-a-cote.partage-tiers-deux-tiers{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.cote-a-cote.partage-deux-tiers-tiers{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.cote-a-cote.cac-centre{align-items:center}
.cote-a-cote.cac-bas{align-items:end}
.cote-a-cote.cac-serre{gap:0 18px}
.cote-a-cote.cac-large{gap:0 72px}
.cote-a-cote>.section{min-width:0}
.cote-a-cote>.section>.cadre{max-width:none;padding:0}
/* Une section qui a son propre fond le garde : il s'arrête à sa colonne, avec les coins du site. */
.cote-a-cote>.section.a-fond{padding-left:24px;padding-right:24px;border-radius:var(--r,12px)}
/* Le calendrier prend la largeur de sa colonne ; ses dates « à côté » passent dessous. Le
   formulaire de contact range ses coordonnées au-dessus du formulaire, pas à côté. */
.cote-a-cote .agenda-duo{grid-template-columns:1fr}
.cote-a-cote .contact-grille{grid-template-columns:1fr}
/* « titres » : site.js mesure le premier titre de chaque section et rehausse l'autre. */
/* PAS DE TRANSITION SUR CE PADDING (livraison 251, et c'était la cause). Il était animé sur
   .15s pour que le calage s'installe en douceur. Sauf que le calage se REMESURE : remise à zéro,
   mesure, écriture. Avec une animation en cours, la remise à zéro n'a pas fini de descendre quand
   on mesure — on lisait une valeur intermédiaire (106 au lieu de 72), on en tirait un padding
   faux, et la passe d'après repartait de ce faux. D'où un calage juste ou de travers selon
   l'instant où la page était regardée : le « une fois sur deux » qu'on cherchait depuis 239.
   Le padding se pose donc d'un coup. Personne n'a jamais vu ces 150 ms : elles se jouent pendant
   le chargement, avant que la section arrive à l'écran. */
.cote-a-cote.cac-titres>.section{transition:none}
@media (max-width:820px){
  .cote-a-cote,.cote-a-cote.partage-tiers-deux-tiers,.cote-a-cote.partage-deux-tiers-tiers{grid-template-columns:1fr;padding:0}
  .cote-a-cote>.section>.cadre{padding:0 24px}
  .cote-a-cote.cac-droite-abord>.section:last-child{order:-1}
}

/* Livraison 286 — le pied signé à gauche, le bouton d'une colonne de tarifs, la galerie à 2 colonnes. */
.pied-marque-gauche .pied-cols{grid-template-columns:minmax(220px,1.5fr) repeat(auto-fit,minmax(150px,1fr))}
.pied-signature .pied-nom{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;text-decoration:none}
.pied-signature .pied-base{margin:0;max-width:34ch}
@media (max-width:760px){.pied-marque-gauche .pied-cols{grid-template-columns:1fr}}
.inclus-bouton{margin-top:16px}

/* Livraison 289 — les pages d'application d'OFAD : le bandeau à carrousel, les captures qui
   défilent en fond, la pile de cartes de l'accueil, le petit mot du menu d'une page. */

/* Le carrousel du bandeau : une capture à la fois dans un cadre d'écran. Sans JavaScript, la
   piste glisse au doigt (scroll-snap) ; les flèches et les points viennent de site.js. */
.hero-carrousel{position:relative;margin:0;width:100%;align-self:center}
.hcar-cadre{position:relative;border-radius:calc(var(--r,12px) + 8px);overflow:hidden;border:1px solid var(--trait-2,var(--trait));background:var(--carte);box-shadow:var(--ombre,0 18px 40px rgba(0,0,0,.25))}
.hcar-barre{display:flex;gap:6px;padding:13px 16px;border-bottom:1px solid var(--trait)}
.hcar-barre i{width:9px;height:9px;border-radius:50%;background:var(--trait-2,var(--trait))}
.hcar-fenetre{position:relative}
.hcar-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y}
.hcar-piste::-webkit-scrollbar{display:none}
.hcar-diapo{flex:0 0 100%;min-width:0;scroll-snap-align:start;position:relative}
.hcar-diapo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hcar-legende{position:absolute;left:12px;bottom:12px;z-index:2;font-weight:600;font-size:12.5px;line-height:1.3;color:var(--encre);
  background:color-mix(in srgb,var(--carte) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:6px 12px;border-radius:999px;border:1px solid var(--trait-2,var(--trait));max-width:calc(100% - 24px)}
.hcar-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--trait-2,var(--trait));background:color-mix(in srgb,var(--carte) 84%,transparent);color:var(--encre);font-size:24px;line-height:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s,background .2s}
.hcar-fleche:hover{transform:translateY(-50%) scale(1.06);background:var(--marque);color:var(--texte-sur-marque,#fff)}
.hcar-prec{left:12px}.hcar-suiv{right:12px}
.hcar-points{display:flex;justify-content:center;gap:9px;margin-top:16px}
.hcar-point{width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;border:1px solid var(--trait-2,var(--trait));background:transparent;transition:background .2s,transform .2s}
.hcar-point[aria-selected="true"]{background:var(--bouton,var(--marque));background-image:var(--bouton-metal,none);border-color:transparent;transform:scale(1.2)}
.hero-carrousel .hero-badge{z-index:4}
.hero.avec-carrousel .hero-grille{align-items:center}
@media (max-width:860px),(hover:none){.hcar-fleche{display:none}}

/* Les captures qui défilent en fond du bandeau : deux colonnes en sens opposés, atténuées, sous
   un voile à la couleur du papier. Sous 1100 px, elles passent en bande au-dessus du texte. */
.hero.avec-defile{position:relative;overflow:hidden;isolation:isolate}
.hero.avec-defile>.cadre{position:relative;z-index:1}
.hero-defile{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hd-plan{position:absolute;inset:-8% -4%;display:flex;gap:18px;justify-content:center;opacity:.2}
.hd-col{flex:1 1 0;min-width:0;overflow:hidden;height:100%}
.hd-piste{display:flex;flex-direction:column;gap:18px;animation:colonne-defile 58s linear infinite}
.hd-piste-2{animation-direction:reverse;animation-duration:70s}
.hd-piste img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--trait-2,var(--trait))}
.hd-voile{position:absolute;inset:0;background:
  radial-gradient(ellipse 74% 62% at 50% 46%,var(--papier) 22%,color-mix(in srgb,var(--papier) 74%,transparent) 52%,transparent 84%),
  linear-gradient(to bottom,var(--papier) 0%,transparent 20%,transparent 76%,var(--papier) 100%)}
@media (max-width:1100px){
  .hero.avec-defile{display:flex;flex-direction:column}
  .hero-defile{position:relative;inset:auto;height:170px;margin:-24px 0 24px;order:-1}
  .hd-plan{position:absolute;inset:0;flex-direction:column;gap:12px;opacity:.9;justify-content:center}
  .hd-col{flex:0 0 auto;width:100%;height:auto}
  .hd-piste{flex-direction:row;gap:12px;width:max-content;animation-name:bande-defile}
  .hd-piste img{height:74px;width:auto;border-radius:10px}
  .hd-voile{background:linear-gradient(to right,var(--papier) 0%,transparent 12%,transparent 88%,var(--papier) 100%)}
}
@media (prefers-reduced-motion:reduce){.hd-piste{animation:none}.hd-piste [data-double]{display:none}}

/* La place et la taille des captures qui défilent (livraison 291). En fond, « petite » : quatre
   colonnes. En haut / en bas : deux bandes de petites images, comme l'accueil d'OFAD. À gauche /
   à droite : deux colonnes sur le côté, le texte se range à côté. Sous 1100 px : une bande. */
.hero.avec-defile{--hd-h:104px;--hd-l:210px}
.hero.avec-defile.hd-taille-petite{--hd-h:78px;--hd-l:150px}
.hero.avec-defile.hd-taille-grande{--hd-h:140px;--hd-l:290px}
.hd-piste-3{animation-duration:64s}
.hd-piste-4{animation-direction:reverse;animation-duration:76s}
.hero.defile-haut,.hero.defile-bas{display:flex;flex-direction:column}
.hero-defile.hd-haut,.hero-defile.hd-bas{position:relative;inset:auto;width:100%;margin:-40px 0 44px}
.hero-defile.hd-bas{order:2;margin:44px 0 -48px}
.hd-haut .hd-plan,.hd-bas .hd-plan{position:relative;inset:auto;flex-direction:column;gap:12px;opacity:1;justify-content:flex-start}
.hd-haut .hd-col,.hd-bas .hd-col{flex:none;width:100%;height:auto}
.hd-haut .hd-piste,.hd-bas .hd-piste{flex-direction:row;gap:12px;width:max-content;animation-name:bande-defile}
.hd-haut .hd-piste img,.hd-bas .hd-piste img{height:var(--hd-h);width:auto;border-radius:10px}
.hd-haut .hd-voile,.hd-bas .hd-voile{background:linear-gradient(to right,var(--papier) 0%,transparent 9%,transparent 91%,var(--papier) 100%)}
.hero.defile-gauche>.cadre,.hero.defile-droite>.cadre{max-width:min(1180px,calc(100% - 2 * var(--hd-l) - 24px))}
.hero-defile.hd-gauche,.hero-defile.hd-droite{inset:0 auto 0 0;width:var(--hd-l)}
.hero-defile.hd-droite{left:auto;right:0}
.hd-gauche .hd-plan,.hd-droite .hd-plan{inset:0 10px;gap:10px;opacity:.95}
.hd-gauche .hd-piste,.hd-droite .hd-piste{gap:10px}
.hd-gauche .hd-piste img,.hd-droite .hd-piste img{border-radius:10px}
.hd-gauche .hd-voile,.hd-droite .hd-voile{background:linear-gradient(to bottom,var(--papier) 0%,transparent 14%,transparent 86%,var(--papier) 100%)}
@media (max-width:1100px){
  .hero.defile-gauche>.cadre,.hero.defile-droite>.cadre{max-width:1180px}
  .hero-defile.hd-gauche,.hero-defile.hd-droite{width:auto;inset:auto}
  .hero-defile.hd-bas{order:2;margin:24px 0 -24px}
  .hd-plan .hd-col:nth-child(n+3){display:none}
  .hero.avec-defile .hd-piste img{height:calc(var(--hd-h) * .72)}
}

/* L'alignement des sections (livraison 291) : titre, chapeau et cartes centrés. Une rangée
   incomplète de cartes (une ou deux) se centre au lieu de rester collée à gauche. */
.sec-centre .tete{margin-left:auto;margin-right:auto;text-align:center}
.sec-centre.section-texte.avec-image .tete{margin-left:0;margin-right:0;text-align:left}
.sec-centre .briques.n2:not(.briques-carrousel){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-left:auto;margin-right:auto}
.sec-centre .briques.n1:not(.briques-carrousel){grid-template-columns:minmax(0,1fr);max-width:420px;margin-left:auto;margin-right:auto}
@media (max-width:640px){.sec-centre .briques.n2:not(.briques-carrousel){grid-template-columns:1fr}}

/* Les parties repliables d'un texte (livraison 291), comme la FAQ d'OFAD : une case par
   question, qu'on ouvre d'un clic ; le + tourne en −. */
.texte-repli .texte-section.repli{margin:0 0 10px;border:1px solid var(--trait);background:var(--carte);border-radius:calc(12px * var(--rayons,1));transition:border-color .2s}
.texte-repli .tete+.texte-section.repli,.texte-repli .tete~.texte-section.repli:first-of-type{margin-top:8px}
.texte-section.repli>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.texte-section.repli>summary::-webkit-details-marker{display:none}
.section-texte .texte-section.repli>summary h2,.section-texte .texte-section.repli>summary h3{margin:0;font-size:1rem;line-height:1.4}
.texte-section.repli>summary:focus-visible{outline:2px solid var(--marque);outline-offset:2px;border-radius:inherit}
.repli-ic{flex:none;position:relative;width:24px;height:24px;border-radius:50%;border:1px solid var(--trait-2,var(--trait))}
.repli-ic::before,.repli-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--marque);transform:translate(-50%,-50%)}
.repli-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.texte-section.repli[open]>summary .repli-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.texte-section.repli[open]{border-color:color-mix(in srgb,var(--marque) 45%,var(--trait))}
.repli-corps{padding:0 20px 16px}
.repli-corps p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.repli-ic::after{transition:none}}

/* La pile : rien ne s'applique tant que site.js n'a pas posé `pile-actif`. */
.carrousel.car-pile.pile-actif{padding:0}
.carrousel.car-pile.pile-actif :is(.briques-carrousel,.articles-carrousel,.gal-carrousel,.avis-carrousel,.rea-carrousel){display:block;position:relative;overflow:visible;perspective:1700px;
  height:var(--pile-h,430px);max-height:none;scroll-snap-type:none;padding:0;margin:0}
.carrousel.car-pile.pile-actif :is(.briques-carrousel,.articles-carrousel,.gal-carrousel,.avis-carrousel,.rea-carrousel)>*{position:absolute;top:50%;left:50%;width:var(--pile-l,338px);max-width:76%;margin:0;
  transform-style:preserve-3d;cursor:pointer;
  transition:transform .62s cubic-bezier(.22,1,.36,1),opacity .5s,box-shadow .5s;will-change:transform,opacity}
.carrousel.car-pile.pile-actif :is(.briques-carrousel,.articles-carrousel,.gal-carrousel,.avis-carrousel,.rea-carrousel)>.pile-devant{box-shadow:0 30px 70px -20px rgba(0,0,0,.55)}
.carrousel.car-pile.pile-actif .car-prec,.carrousel.car-pile.pile-actif .car-suiv{position:static;transform:none;display:inline-grid;width:46px;height:46px;vertical-align:middle}
.carrousel.car-pile.pile-actif{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px}
.carrousel.car-pile.pile-actif :is(.briques-carrousel,.articles-carrousel,.gal-carrousel,.avis-carrousel,.rea-carrousel){flex:0 0 100%;order:-1}
.carrousel.car-pile.pile-actif .car-prec{order:1}.carrousel.car-pile.pile-actif .car-points{order:2;margin:0;align-items:center}.carrousel.car-pile.pile-actif .car-suiv{order:3}
.carrousel.car-pile.pile-actif .car-points i{cursor:pointer}
.carrousel.car-pile.pile-actif .car-points i.actif{width:26px;border-radius:5px}
@media (max-width:700px){.carrousel.car-pile.pile-actif .car-prec,.carrousel.car-pile.pile-actif .car-suiv{display:inline-grid}}
@media (prefers-reduced-motion:reduce){.carrousel.car-pile.pile-actif :is(.briques-carrousel,.articles-carrousel,.gal-carrousel,.avis-carrousel,.rea-carrousel)>*{transition:none}}

/* Le petit mot sous le nom du site, dans le menu d'une page (« Mettron »). */
.logo .logo-etiquette{display:block;font-size:.62em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--marque);margin-left:4px;align-self:center}

/* Livraison 290 — la couleur de l'application sur sa page (champ de page « couleur »).
   Elle prend la place de la couleur secondaire : surtitres et leur point, icônes des cartes,
   filet, pastille et coches des offres. Les boutons et les mots mis en valeur gardent la couleur
   du site. La nuit, la couleur telle quelle ; sur papier clair, sa version foncée (4,5:1). */
body.a-couleur-page,section.a-couleur-page{--secondaire:var(--couleur-page-claire);--secondaire-clair:var(--couleur-page)}
html[data-theme="sombre"] body.a-couleur-page,html[data-theme="sombre"] section.a-couleur-page{--secondaire:var(--couleur-page)}
.a-couleur-page .brique-ic{background:color-mix(in srgb,var(--couleur-page) 16%,transparent);color:var(--secondaire)}
.a-couleur-page .brique-offre{--carte-couleur:var(--secondaire)}

/* LES MÉTAUX DU CATALOGUE ET « LE MÉTAL DU SITE » (livraison 293). Écrit depuis lib/theme.js
   (METAUX) : bronze, or rose, platine, champagne rejoignent l'or, l'argent et le cuivre ; « metal »
   suit Apparence › Matière › Métal du site (variables --metal, --metal-metal posées par le thème). */
:root{--bronze:#8C6A3A;--metal-bronze:linear-gradient(115deg,#5E4222 0%,#9C7440 16%,#E0C08E 32%,#A57B45 46%,#6B4D28 62%,#CBA46E 80%,#80603A 100%);--orrose:#B06E6A;--metal-orrose:linear-gradient(115deg,#8A4F4C 0%,#C98E86 16%,#F6D6CF 32%,#D19C92 46%,#9A5E58 62%,#EDC0B6 80%,#A86C66 100%);--platine:#77828B;--metal-platine:linear-gradient(115deg,#5B646C 0%,#A3AEB7 16%,#FFFFFF 32%,#C4CDD4 46%,#6F7880 62%,#E9EEF2 80%,#8C959D 100%);--champagne:#9C8653;--metal-champagne:linear-gradient(115deg,#7D6A40 0%,#C8B07A 16%,#FBF0CF 32%,#D6C18E 46%,#8E7A4C 62%,#EFE0B4 80%,#A38E5E 100%)}
html[data-theme="sombre"]{--bronze:#CFA36A;--orrose:#E8B4AE;--platine:#D5DCE2;--champagne:#E9D8AC}
.c-bronze{color:var(--bronze)} .mev-bronze b{font-weight:inherit;color:var(--bronze)}
.c-orrose{color:var(--orrose)} .mev-orrose b{font-weight:inherit;color:var(--orrose)}
.c-platine{color:var(--platine)} .mev-platine b{font-weight:inherit;color:var(--platine)}
.c-champagne{color:var(--champagne)} .mev-champagne b{font-weight:inherit;color:var(--champagne)}
.c-metal{color:var(--metal,var(--or))} .mev-metal b{font-weight:inherit;color:var(--metal,var(--or))}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .c-bronze,.mev-bronze b{-webkit-background-clip:text;background-clip:text;color:transparent} .c-bronze,.mev-bronze b{background-image:var(--metal-bronze)}
  .c-orrose,.mev-orrose b{-webkit-background-clip:text;background-clip:text;color:transparent} .c-orrose,.mev-orrose b{background-image:var(--metal-orrose)}
  .c-platine,.mev-platine b{-webkit-background-clip:text;background-clip:text;color:transparent} .c-platine,.mev-platine b{background-image:var(--metal-platine)}
  .c-champagne,.mev-champagne b{-webkit-background-clip:text;background-clip:text;color:transparent} .c-champagne,.mev-champagne b{background-image:var(--metal-champagne)}
  .c-metal,.mev-metal b{-webkit-background-clip:text;background-clip:text;color:transparent} .c-metal,.mev-metal b{background-image:var(--metal-metal,var(--metal-or))}
}
.btn.btn-plein.btn-c-bronze{border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55);background:var(--bronze);background-image:var(--metal-bronze);color:#241807}
.btn.btn-plein.btn-c-bronze:hover{filter:brightness(1.08) saturate(1.05)} .btn.btn-clair.btn-c-bronze{color:var(--bronze);border-color:var(--bronze)} .btn.btn-lien.btn-c-bronze{color:var(--bronze)}
.btn.btn-plein.btn-c-orrose{border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55);background:var(--orrose);background-image:var(--metal-orrose);color:#2E1515}
.btn.btn-plein.btn-c-orrose:hover{filter:brightness(1.08) saturate(1.05)} .btn.btn-clair.btn-c-orrose{color:var(--orrose);border-color:var(--orrose)} .btn.btn-lien.btn-c-orrose{color:var(--orrose)}
.btn.btn-plein.btn-c-platine{border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55);background:var(--platine);background-image:var(--metal-platine);color:#1A1F24}
.btn.btn-plein.btn-c-platine:hover{filter:brightness(1.08) saturate(1.05)} .btn.btn-clair.btn-c-platine{color:var(--platine);border-color:var(--platine)} .btn.btn-lien.btn-c-platine{color:var(--platine)}
.btn.btn-plein.btn-c-champagne{border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55);background:var(--champagne);background-image:var(--metal-champagne);color:#2A2210}
.btn.btn-plein.btn-c-champagne:hover{filter:brightness(1.08) saturate(1.05)} .btn.btn-clair.btn-c-champagne{color:var(--champagne);border-color:var(--champagne)} .btn.btn-lien.btn-c-champagne{color:var(--champagne)}
.btn.btn-plein.btn-c-metal{border:0;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.55);background:var(--metal,var(--or));background-image:var(--metal-metal,var(--metal-or));color:var(--metal-encre-bouton,#2B2205)}
.btn.btn-plein.btn-c-metal:hover{filter:brightness(1.08) saturate(1.05)} .btn.btn-clair.btn-c-metal{color:var(--metal,var(--or));border-color:var(--metal,var(--or))} .btn.btn-lien.btn-c-metal{color:var(--metal,var(--or))}
/* Une couleur posée sur un passage l'emporte sur l'effet du texte entre crochets (livraison 293) :
   {rouge|[tous vos métiers]} se lit en rouge, même quand les crochets du site sont en or. Dans un
   passage en métal, les lettres restent transparentes et laissent voir le reflet du passage. */
span[class^="c-"] b,span[class^="c-"] strong{color:inherit;background-image:none;-webkit-text-fill-color:inherit}

/* Les fenêtres de détail d'une carte (livraison 293) : comme le catalogue de Vision Pro sur le site
   d'OFAD — titre et petite ligne, éléments cochés sur deux colonnes, encadré, mention en pied. */
dialog.fenetre[open]{margin:auto;position:fixed;inset:0;height:fit-content}
dialog.fenetre{width:min(620px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:26px 28px 20px;border:1px solid var(--trait-2,var(--trait));
  border-radius:calc(16px * var(--rayons,1));background:var(--carte);color:var(--encre);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);text-align:left}
dialog.fenetre::backdrop{background:rgba(6,9,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fenetre-tete{display:flex;align-items:flex-start;gap:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--trait)}
.fenetre-tete>div{flex:1;min-width:0}
.fenetre-tete h2,.fenetre-tete h3{margin:0;font-size:1.2rem}
.fenetre-ligne{margin:2px 0 0;font-size:.82rem;color:var(--encre-doux,var(--encre));opacity:.8}
.fenetre-fermer{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--trait-2,var(--trait));background:transparent;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer}
.fenetre-fermer:hover,.fenetre-fermer:focus-visible{border-color:var(--secondaire,var(--marque))}
dialog.fenetre .fenetre-elements{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;font-size:.88rem}
dialog.fenetre .fenetre-elements li{position:relative;margin:0;padding:0 0 0 22px;line-height:1.45;color:var(--encre);font-weight:500;border:0;background:none}
dialog.fenetre .fenetre-elements li::before{content:"";position:absolute;left:2px;top:.32em;width:9px;height:5px;border-left:2px solid var(--secondaire,var(--marque));border-bottom:2px solid var(--secondaire,var(--marque));transform:rotate(-45deg)}
.fenetre-encadre{margin:18px 0 0;padding:14px 16px;border:1px solid var(--trait);border-radius:calc(10px * var(--rayons,1));background:color-mix(in srgb,var(--secondaire,var(--marque)) 7%,transparent);font-size:.86rem}
.fenetre-pied{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--trait);font-size:.76rem;opacity:.7}
dialog.fenetre:not([open]):target{display:block;position:static;margin:16px 0 0}
@media (max-width:560px){.fenetre-elements{grid-template-columns:1fr}}

/* LIVRAISON 294 — LA FORME DES CARTES ET LA COULEUR DES APPLICATIONS.
   Forme : Apparence › Cartes pour tout le site (classes sur body), ou la section seule (classes sur
   la section). Les coins de toutes les sortes de cartes, l'espace entre elles. Les cartes en filets
   restent des lignes : ni coins ni écart. Sans réglage, aucune classe : rien ne change.
   Couleur : une section qui parle d'une application (couleur_app) prend sa couleur comme une page
   d'application (290) ; une carte qui a sa couleur la donne à son icône, comme sur l'accueil d'OFAD (le lien garde la couleur
   du site : une couleur claire d'application ne se lit pas en texte sur papier clair). */
.f-cartes-rayon :is(.brique,.article-carte,.avis-carte,.rea-carte,.tarifs-cartes tr,.video-cadre,.coord){border-radius:calc(var(--cartes-rayon,14px) * var(--rayons,1))}
.f-cartes-ecart :is(.briques,.articles,.avis-liste,.rea-liste,.videos-grille,.tarifs-cartes tbody,.briques.briques-offres){gap:var(--cartes-ecart,18px)}
.f-cartes-ecart .briques.briques-carrousel>.brique{flex-basis:calc((100% - var(--cartes-ecart,18px) * (var(--visibles) - 1)) / var(--visibles))}
/* Livraison 321 : UN CHOIX EXPLICITE L'EMPORTE, TOUJOURS. Les classes f-cartes-rayon et
   f-cartes-ecart n'existent que si quelqu'un a choisi « Coins des cartes » ou « Espace entre les
   cartes » — au site ou à la section. La 294 puis la 295 laissaient les grilles « en filets »
   (modèles Or, Éditorial, Minimal) ignorer ce choix : on réglait, rien ne bougeait, et personne ne
   pouvait deviner pourquoi. Sans réglage, les filets restent des lignes, comme avant. */
/* Livraison 319 : la vignette, la couverture ou l’image en haut d’une carte reprennent ses coins.
   Le découpage par le parent (overflow) suffit à la plupart des navigateurs, mais pas à Safari quand
   la carte est en verre : le fond flouté s’y dessine carré. Chaque enfant du haut porte donc le même
   arrondi, quel qu’il soit — zéro compris, en filets. */
.article-carte>a:first-child,.article-carte>img:first-child,.rea-carte>a:first-child,.rea-carte>img:first-child,
.avis-carte>a:first-child,.article-carte>a:first-child>img,.article-carte>a:first-child>.art-couverture,
.article-carte>.art-couverture,.rea-carte>a:first-child>img,.rea-carte .rea-image,.rea-carte .rea-image img
{border-top-left-radius:inherit;border-top-right-radius:inherit}
.brique.a-couleur-carte .brique-ic{background:var(--carte-couleur);color:#fff}

/* Le menu transparent en haut de page, en mode clair (livraison 297) : un menu à fond sombre
   laisse voir la page claire tant qu'on n'a pas défilé — ses liens passent à l'encre pour rester
   lisibles, sauf si le bandeau d'accueil est lui-même sombre ou en photo. */
html:not([data-theme="sombre"]) body:not(:has(header.fond-sombre,header.hero-sur-image)) .barre.barre-transparente.a-fond.fond-sombre:not(.barre-defilee) :is(ul a,.logo,.bascule-theme,.lien-panier,.lien-recherche){color:var(--encre)}

/* La police d'un passage (livraison 307) : l'une des trois polices du site. Sans réglage, la
   principale est celle du texte et la secondaire celle des titres ; la tertiaire retombe sur la
   principale. */
.pol-1{font-family:var(--police-1,var(--police-corps))}
.pol-2{font-family:var(--police-2,var(--police-titres))}
.pol-3{font-family:var(--police-3,var(--police-1,var(--police-corps)))}

/* ---- Carte de visite et flyer (livraison 311) : tout vient du thème — marque ou métal des
   boutons, carte, trait, polices, rayons. Changer l'apparence du site change la carte. ---- */
main.page-seule{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.section-carte,.section-flyer{padding:32px 16px 48px}
.cv,.fly{--ac:var(--accent,var(--bouton,var(--marque)));margin:0 auto;color:var(--encre)}
.cv{width:100%;max-width:380px;background:var(--carte);border:1px solid var(--trait);border-radius:calc(24px * var(--rayons,1));padding:28px;box-shadow:var(--ombre)}
.fly{max-width:640px}
.cv-tete,.fly-tete{display:flex;flex-direction:column;align-items:center;padding-bottom:20px;text-align:center}
.cv-logo,.fly-logo{width:72px;height:72px;object-fit:contain;border-radius:50%;border:1.5px solid var(--ac)}
.cv-marque,.fly-marque{margin:14px 0 0;font-size:11px;letter-spacing:3px;font-weight:600;text-transform:uppercase}
.cv-marque-sous,.fly-marque-sous{margin:4px 0 0;font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--ac)}
.cv-qui{text-align:center;padding:18px 0 10px;border-top:1px solid var(--trait)}
.cv-nom{font-size:24px;margin:0;font-family:var(--police-titres)}
.cv-fonction{margin:4px 0 0;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ac)}
.cv-accroche{text-align:center;font-size:14px;line-height:1.55;color:var(--encre-douce);margin:6px 4px 20px}
.cv .btn,.fly .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;border-radius:calc(14px * var(--rayons,1))}
.cv-contact,.fly-bouton{padding:15px 12px;margin-bottom:10px}
.cv-deux,.fly-deux{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.cv-deux.seul,.fly-deux.seul{grid-template-columns:1fr}
.cv-action,.fly-action{border-color:var(--ac);padding:12px 8px;font-size:13px;color:var(--encre)}
.cv-ic,.fly-ic{display:inline-flex;width:18px;height:18px;color:var(--ac)}
.btn-plein .cv-ic,.btn-plein .fly-ic{color:inherit}
.cv-ic svg,.fly-ic svg{width:100%;height:100%}
.cv-reseaux ul,.cv-apps ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px}
.cv-reseaux{padding-top:14px;margin-top:12px;border-top:1px solid var(--trait)}
.cv-reseaux a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--ac)}
.cv-apps{padding-top:12px;margin-top:4px;border-top:1px solid var(--trait)}
.cv-apps ul{gap:14px}
.cv-apps-titre{text-align:center;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--encre-faible);margin:0 0 8px}
.cv-app,.fly-app{width:36px;height:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;object-fit:cover;flex-shrink:0}
.cv-app-lettre,.fly-app-lettre{background:var(--carte-c,var(--ac));color:var(--papier);font-weight:800;font-size:17px}
.cv-apps a{display:inline-flex;border-radius:9px;text-decoration:none}
.cv-pied,.fly-pied{text-align:center;font-size:10px;color:var(--encre-faible);margin:14px 0 0}
.fly-une{text-align:center;padding:8px 4px 28px;border-top:1px solid var(--trait)}
.fly-titre{font-size:clamp(24px,5vw,30px);line-height:1.25;margin:20px 0 6px;font-family:var(--police-titres)}
.fly-titre .fly-accent{color:var(--ac);font-weight:inherit}
.fly-accroche{font-size:14px;color:var(--encre-douce);margin:12px auto 0;max-width:480px;line-height:1.5}
.fly-offres{padding:8px 0 24px}
.fly-offres-titre{font-size:13px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:var(--encre-douce);margin:0 0 20px;font-family:inherit}
.fly-carte{display:block;text-decoration:none;color:inherit;background:var(--carte);border:1px solid var(--trait);border-left:3px solid var(--carte-c,var(--ac));border-radius:calc(14px * var(--rayons,1));padding:16px 16px 18px;margin-bottom:12px;box-shadow:var(--ombre)}
.fly-carte-tete{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fly-carte-nom{font-size:16px;margin:0;font-family:var(--police-titres)}
.fly-carte-accroche{font-size:12px;margin:2px 0 0;color:var(--carte-c,var(--ac));font-weight:600}
.fly-carte-texte{font-size:13px;color:var(--encre-douce);margin:8px 0 6px;line-height:1.5}
.fly-carte-cible{font-size:11px;color:var(--encre-faible);margin:0;font-style:italic}
.fly-carte-lien{font-size:12px;color:var(--carte-c,var(--ac));margin:10px 0 0;font-weight:600}
.fly-contact{padding:12px 0 20px}
.fly-encart{background:color-mix(in srgb,var(--ac) 10%,transparent);border:1px solid var(--ac);border-radius:calc(14px * var(--rayons,1));padding:18px 18px 16px;text-align:center;margin-bottom:16px}
.fly-encart .btn{display:inline-flex;width:auto}
.fly-encart-sur{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--ac);text-transform:uppercase;margin:0 0 6px}
.fly-encart-titre{font-size:14px;font-weight:700;margin:0 0 4px}
.fly-encart-texte{font-size:12px;color:var(--encre-douce);margin:0 0 14px;line-height:1.5}
.fly-pied{padding-top:24px;border-top:1px solid var(--trait)}

/* Le QR code à l'impression (livraison 312) : absent à l'écran ; à l'impression d'une page qui l'a
   demandé, en bas, et sans le menu ni le pied de page. */
.qr-impression{display:none}
@media print{
  .qr-impression{display:flex;align-items:center;gap:6mm;margin:8mm auto 0;padding-top:5mm;border-top:1px solid #999;max-width:170mm;break-inside:avoid;color:#000}
  .qr-impression-code{width:28mm;height:28mm;flex-shrink:0}.qr-impression-code svg{width:100%;height:100%}
  .qr-impression p{margin:0;font-size:10pt}
  body:has(.qr-impression) .barre,body:has(.qr-impression) .pied,body:has(.qr-impression) .barre-bas,body:has(.qr-impression) .lien-evitement{display:none!important}
}

/* ---- la une d'un article (livraison 315) ---------------------------------
   Un article présenté comme une page du site : bandeau aux couleurs et au métal du site,
   étiquette, date, temps de lecture, vignette, puis un corps de texte fait pour être lu. */
.section-une-article{padding:40px 0 34px;background:var(--hero-fond,linear-gradient(180deg,var(--marque-claire),var(--papier)));border-bottom:1px solid var(--trait)}
.une-art{display:block}
.une-art.une-art-illustree{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:36px;align-items:center}
.une-art-retour{margin:0 0 14px;font-size:calc(13px * var(--echelle-bloc,1));letter-spacing:.04em;text-transform:uppercase}
.une-art-retour a{color:var(--marque);text-decoration:none;font-weight:600}
.une-art-retour a:hover{text-decoration:underline}
.une-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.une-art-meta time{color:var(--encre-douce)}
.une-art-sep{color:var(--trait-fort,var(--trait));margin:0 2px}
.une-art-duree{color:var(--encre-douce)}
.une-art-titre{margin:0;max-width:20ch;font-size:clamp(30px,4.2vw,50px);line-height:1.1}
.une-art .une-art-chapeau{margin-top:16px;max-width:60ch;font-size:calc(clamp(16.5px,1.7vw,19.5px) * var(--echelle-chapo,1))}
.une-art-image{margin:0;border-radius:calc(16px * var(--rayons,1));overflow:hidden;box-shadow:var(--ombre);border:1px solid var(--trait)}
.une-art-image img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
/* Le corps de l'article : une colonne de lecture, des titres tenus par un filet de la couleur du site. */
.page-article .section-texte .cadre-etroit{max-width:44rem}
.page-article .section-texte{padding-top:26px;padding-bottom:26px}
.page-article .section-texte p{font-size:calc(17px * var(--echelle-bloc,1));line-height:1.72}
.page-article .section-texte .texte-section{margin-top:38px}
.page-article .section-texte .texte-section:not(.repli)>h2,.page-article .section-texte .texte-section:not(.repli)>h3{position:relative;padding-top:14px;margin-bottom:12px}
.page-article .section-texte .texte-section:not(.repli)>h2::before,.page-article .section-texte .texte-section:not(.repli)>h3::before{content:"";position:absolute;top:0;left:0;width:46px;height:3px;border-radius:2px;background:var(--metal,var(--marque))}
.page-article .texte-puces{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.page-article .texte-puces li{position:relative;padding-left:26px;font-size:calc(17px * var(--echelle-bloc,1));line-height:1.65}
.page-article .texte-puces li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--metal,var(--marque))}
.page-article .section-texte a{color:var(--liens,var(--marque));text-underline-offset:3px}
.section-pied-article{padding:8px 0 48px}
.pied-art{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--trait);padding-top:20px}
.pied-art-date{margin:0;font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.pied-art-retour{margin:0}
@media (max-width:860px){
  .une-art.une-art-illustree{grid-template-columns:1fr}
  .une-art-image{order:-1}
  .une-art-titre{max-width:none}
}
.page-article .art-faq-titre{margin:44px 0 16px;position:relative;padding-top:14px}
.page-article .art-faq-titre::before{content:"";position:absolute;top:0;left:0;width:46px;height:3px;border-radius:2px;background:var(--metal,var(--marque))}
.section-a-lire{padding:10px 0 4px}
.section-a-lire .tete{margin-bottom:18px}
.section-a-lire h2{font-size:calc(clamp(20px,2.2vw,26px) * var(--echelle-bloc,1))}

/* ---- les avis et les réalisations (livraison 317) -----------------------
   Deux sections qui reprennent la matière du site : mêmes cartes, mêmes coins,
   même métal. Les étoiles sont dessinées en texte ; le lien vers la source est
   toujours là — c'est lui qui fait la différence entre une preuve et une phrase. */
.avis-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cartes-ecart,18px);margin-top:22px}
.avis-liste.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.avis-liste.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.avis-carte{background:var(--carte);border:1px solid var(--trait);border-radius:calc(14px * var(--rayons,1));padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.avis-etoiles{margin:0;color:var(--metal,var(--marque));font-size:calc(17px * var(--echelle-bloc,1));letter-spacing:.08em}
.avis-texte{margin:0;border:0;padding:0;font-size:calc(15.5px * var(--echelle-bloc,1));line-height:1.6}
.avis-reponse{margin:0;font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--encre-douce);border-left:2px solid var(--trait);padding-left:12px}
.avis-qui{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.avis-auteur{font-weight:700;color:var(--encre)}
.avis-source a{color:var(--lien,var(--marque))}
.avis-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:16px 0 0}
.avis-note-chiffre{font-size:calc(40px * var(--echelle-bloc,1));font-weight:800;line-height:1}
.avis-note-etoiles{color:var(--metal,var(--marque));font-size:calc(19px * var(--echelle-bloc,1));letter-spacing:.08em}
.avis-note-detail{color:var(--encre-douce);font-size:calc(14px * var(--echelle-bloc,1))}
.avis-une{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:26px;align-items:center;margin-top:20px}
.avis-secondaires{grid-template-columns:repeat(3,minmax(0,1fr))}
.avis-bande{overflow:hidden;margin-top:22px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.avis-bande .bande-piste{display:flex;gap:var(--cartes-ecart,18px);width:max-content;animation:bande-defile var(--bande-duree,30s) linear infinite}
.avis-bande.bande-droite .bande-piste{animation-direction:reverse}
.avis-bande:hover .bande-piste,.avis-bande:focus-within .bande-piste{animation-play-state:paused}
.avis-bande .avis-carte{width:340px;flex:0 0 auto}
.avis-carrousel{display:flex;gap:var(--cartes-ecart,18px)}
.avis-carrousel .avis-carte{flex:0 0 calc((100% - var(--cartes-ecart,18px) * (var(--visibles,3) - 1)) / var(--visibles,3))}
.avis-boutons,.rea-boutons{margin-top:24px;justify-content:center}
.rea-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cartes-ecart,18px);margin-top:22px}
.rea-liste.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rea-liste.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rea-carte{background:var(--carte);border:1px solid var(--trait);border-radius:calc(14px * var(--rayons,1));overflow:hidden;display:flex;flex-direction:column}
.rea-images{display:grid;grid-template-columns:1fr;gap:2px}
.rea-images-plusieurs{grid-template-columns:2fr 1fr}
.rea-images-plusieurs .rea-photo{grid-row:span 2}
.rea-photo{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.rea-photo-petite{aspect-ratio:1/1}
.rea-corps{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px}
.rea-corps h3{margin:0;font-size:calc(19px * var(--echelle-bloc,1))}
.rea-corps h3 a{color:inherit;text-decoration:none}
.rea-corps h3 a:hover{color:var(--marque)}
.rea-client{margin:0;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.rea-texte{margin:0;font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.rea-avis{margin:0;border-left:3px solid var(--metal,var(--marque));padding:2px 0 2px 12px;font-size:calc(14.5px * var(--echelle-bloc,1));font-style:italic}
.rea-avis cite{display:block;margin-top:6px;font-style:normal;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.rea-lien{margin:auto 0 0}
.rea-lien a{color:var(--lien,var(--marque));font-weight:600;text-decoration:none}
.rea-lien a:hover{text-decoration:underline}
.rea-larges{grid-template-columns:1fr}
.rea-larges .rea-carte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}
.rea-larges .rea-carte:nth-child(even) .rea-images{order:2}
.rea-larges .rea-corps{justify-content:center;padding:26px 28px}
.rea-carrousel{display:flex;gap:var(--cartes-ecart,18px)}
.rea-carrousel .rea-carte{flex:0 0 calc((100% - var(--cartes-ecart,18px) * (var(--visibles,3) - 1)) / var(--visibles,3))}
@media (max-width:900px){
  .avis-liste,.avis-secondaires,.rea-liste{grid-template-columns:1fr}
  .avis-une{grid-template-columns:1fr}
  .rea-larges .rea-carte{grid-template-columns:1fr}
  .rea-larges .rea-carte:nth-child(even) .rea-images{order:0}
  .avis-carrousel .avis-carte,.rea-carrousel .rea-carte{flex-basis:88%}
  .avis-bande .avis-carte{width:280px}
}
/* Livraison 317 : la couverture dessinée d'un article (quand la vignette est la même partout). */
.art-couverture{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:16/9;padding:18px 20px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--metal,var(--marque)) 22%,var(--carte)),color-mix(in srgb,var(--marque) 8%,var(--carte)));
  border-bottom:1px solid var(--trait)}
.art-couv-etiquette{align-self:flex-start;font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--metal,var(--marque));border:1px solid color-mix(in srgb,var(--metal,var(--marque)) 45%,transparent);border-radius:999px;padding:3px 10px}
.art-couv-lettre{position:absolute;right:-6px;bottom:-34px;font-size:150px;font-weight:800;line-height:1;color:color-mix(in srgb,var(--metal,var(--marque)) 26%,transparent);pointer-events:none}
.article-carte a:has(.art-couverture),.article-carte a .art-couverture{text-decoration:none}

/* ---- les bandes de sections (livraison 318) ----------------------------
   Segmenter la page sans rien peindre : la section prend une teinte tirée du
   papier du site, un cran plus claire ou plus foncée. Un fond choisi l'emporte. */
.bande-claire{background:var(--papier-2)}
.bande-foncee{background:color-mix(in srgb,var(--encre) 6%,var(--papier))}
.bande-tres-foncee{background:color-mix(in srgb,var(--encre) 12%,var(--papier))}
:root[data-theme="sombre"] .bande-foncee{background:color-mix(in srgb,#fff 5%,var(--papier))}
:root[data-theme="sombre"] .bande-tres-foncee{background:color-mix(in srgb,#fff 9%,var(--papier))}
@supports not (background:color-mix(in srgb,#000 5%,#fff)){
  .bande-foncee,.bande-tres-foncee{background:var(--papier-2)}
}
/* La grille de tarifs devenue carte (livraison 318) : catégories, étiquettes, ligne mise en avant. */
.grille-tarifs .tg th{padding-top:26px;font-size:calc(13px * var(--echelle-bloc,1));text-transform:uppercase;letter-spacing:.08em;color:var(--marque);border-bottom:1px solid var(--trait)}
.grille-tarifs .tz-etiquette{display:inline-block;margin-left:10px;font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--carte-couleur,var(--marque));border:1px solid color-mix(in srgb,var(--carte-couleur,var(--marque)) 45%,transparent);border-radius:999px;padding:2px 9px;vertical-align:middle}
.grille-tarifs .tl-avant{background:color-mix(in srgb,var(--carte-couleur,var(--marque)) 8%,transparent)}
.grille-tarifs .tl-avant .tp b{color:var(--carte-couleur,var(--marque))}
.grille-tarifs .a-couleur-carte .tp b{color:var(--carte-couleur,var(--marque))}
.grille-tarifs .tz-lien{color:inherit;text-decoration:none}
.grille-tarifs .tz-lien:hover{color:var(--marque);text-decoration:underline}
.tarifs-deux .grille-tarifs td.tz{width:auto}

/* Le tableau d'une partie de texte (livraison 329) : défile de côté sur téléphone, suit les couleurs du site. */
.texte-tableau{margin:18px 0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--trait);border-radius:calc(10px * var(--rayons,1));background:var(--carte)}
.texte-tableau:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
.texte-tableau table{width:100%;border-collapse:collapse;font-size:calc(15px * var(--echelle-bloc,1));line-height:1.5;color:var(--encre)}
.texte-tableau caption{caption-side:top;text-align:left;padding:12px 16px 4px;font-weight:700;color:var(--titres-couleur,var(--encre))}
.texte-tableau th,.texte-tableau td{padding:10px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--trait)}
.texte-tableau thead th{border-top:0;background:var(--papier-2);font-weight:700;color:var(--titres-couleur,var(--encre));white-space:nowrap}
.texte-tableau tbody th{font-weight:700}
/* 379 : une colonne aux textes courts tient sur une ligne et ne prend que sa place ; « sans retour » : rien ne va à la ligne. */
.texte-tableau .col-texte{white-space:nowrap;width:1%}
.texte-tableau.tableau-sans-retour th,.texte-tableau.tableau-sans-retour td{white-space:nowrap}
.texte-tableau tbody tr:nth-child(even) td,.texte-tableau tbody tr:nth-child(even) th{background:color-mix(in srgb,var(--papier-2) 55%,transparent)}
@media (max-width:640px){.texte-tableau table{min-width:520px}}

/* ---- l'interrupteur de langue (livraison 335) ------------------------------
   FR | EN, comme sur l'ancien site : une pastille, la langue de la page allumée aux couleurs des
   boutons du menu (le métal d'OFAD), l'autre qui mène à la même page dans l'autre langue. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--trait-2);border-radius:999px;padding:3px;flex-shrink:0}
.lang-switch a{font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 9px;border-radius:999px;line-height:1;color:var(--encre-douce);text-decoration:none;opacity:.75;transition:opacity .18s,color .18s}
.lang-switch a:hover{opacity:1;color:var(--marque)}
.barre .lang-switch a.actif,.tiroir-menu .lang-switch a.actif,.lang-switch a.actif{opacity:1;background:var(--bouton,var(--marque));background-image:var(--bouton-metal,none);color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff))}
.barre .lang-switch{margin-left:6px}
.tiroir-menu .lang-switch{margin:14px 0 4px}
/* Menu transparent posé sur un bandeau sombre : en clair, une fois sorti du bandeau, le texte
   redevient celui de la page — la langue éteinte comme le reste du menu. */
.barre.a-fond.fond-sombre .lang-switch a:not(.actif){color:#fff}
html:not([data-theme="sombre"]) body:not(:has(header.fond-sombre,header.hero-sur-image)) .barre.barre-transparente.a-fond.fond-sombre:not(.barre-defilee) .lang-switch a:not(.actif){color:var(--encre)}
@media (max-width:520px){.barre .lang-switch-barre{display:none}}

/* ---- la page à imprimer (livraison 335) ------------------------------------
   Grille tarifaire, menu, programme : un bouton « #imprimer » ouvre l'impression, et le papier
   (ou le PDF) garde les couleurs du site, en clair ou en sombre selon ce qu'on regarde. */
.entete-impression{display:none}
@media print{
  @page{size:A4;margin:11mm 10mm}
  html:has(body.page-imprimable){background:var(--papier)!important}
  body.page-imprimable{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:var(--papier);zoom:.82}
  body.page-imprimable .barre,body.page-imprimable .pied,body.page-imprimable .barre-bas,body.page-imprimable .lien-evitement,
  body.page-imprimable .btn,body.page-imprimable .boutons,body.page-imprimable .hero-boutons,body.page-imprimable .videos,body.page-imprimable .hero-defile,
  body.page-imprimable .tiroir-menu,body.page-imprimable .recherche-panneau,body.page-imprimable .car-prec,body.page-imprimable .car-suiv{display:none!important}
  body.page-imprimable .entete-impression{display:flex;align-items:center;justify-content:space-between;gap:8mm;padding:0 0 4mm;margin:0 0 5mm;border-bottom:1px solid var(--trait-2);color:var(--encre)}
  body.page-imprimable .ei-marque{display:flex;align-items:center;gap:3mm;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:11pt}
  body.page-imprimable .ei-marque img{height:11mm;width:auto}
  body.page-imprimable .ei-titre{text-align:right;display:flex;flex-direction:column;gap:1mm}
  body.page-imprimable .ei-titre b{font-size:11pt;color:var(--marque)}
  body.page-imprimable .ei-titre small{font-size:8pt;color:var(--encre-douce)}
  body.page-imprimable .reveal{opacity:1!important;transform:none!important}
  body.page-imprimable *{animation:none!important;transition:none!important}
  body.page-imprimable section{padding-top:5mm!important;padding-bottom:5mm!important;min-height:0!important}
  body.page-imprimable .hero{min-height:0!important}
  body.page-imprimable .brique,body.page-imprimable .offre,body.page-imprimable .carte,body.page-imprimable tr,body.page-imprimable .compo-rangee,body.page-imprimable .texte-section,body.page-imprimable figure{break-inside:avoid}
  body.page-imprimable h1,body.page-imprimable h2,body.page-imprimable h3{break-after:avoid}
  body.page-imprimable a{text-decoration:none;color:inherit}
  /* Le texte en métal (dégradé découpé dans les lettres) laisse des filets à l'impression : sur papier, il passe en couleur pleine. */
  body.page-imprimable[class*="mev-"] b{background:none!important;-webkit-text-fill-color:currentColor;color:var(--marque)!important}
}

/* ---- les médias à télécharger (livraison 336) ------------------------------
   Une section « Médias à télécharger » : image, son, vidéo ou document, chacun avec ce qui le
   montre et, si c'est permis, son bouton « Télécharger ». Et, dans une galerie qui le permet,
   un petit bouton sur chaque photo et dans la visionneuse. */
.dl-mention{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;font-size:calc(13.5px * var(--echelle-bloc,1));color:var(--encre-douce);
  border:1px solid var(--trait);border-radius:999px;padding:6px 14px;background:var(--carte)}
.dl-mention-ic svg,.dl-bouton svg,.vis-telecharger svg,.gal-telecharger svg{width:1.05em;height:1.05em;flex:0 0 auto}
.dl-liste{display:grid;gap:var(--cartes-ecart,18px);margin-top:22px}
.dl-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl-grille.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl-grille.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dl-carte{background:var(--carte);border:1px solid var(--trait);border-radius:calc(14px * var(--rayons,1));overflow:hidden;display:flex;flex-direction:column;min-width:0}
.dl-lignes .dl-carte{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);align-items:stretch}
.dl-apercu{background:var(--papier-2,var(--papier));display:flex;align-items:center;justify-content:center;min-height:120px;overflow:hidden}
.dl-grille .dl-apercu{aspect-ratio:16/10}
.dl-image,.dl-couverture{width:100%;height:100%;object-fit:cover;display:block}
.dl-video{width:100%;height:100%;display:block;background:#000}
.dl-icone{display:flex;color:var(--metal,var(--marque))}
.dl-icone svg{width:46px;height:46px}
.dl-corps{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dl-titre{margin:0;font-size:calc(18px * var(--echelle-bloc,1));overflow-wrap:anywhere}
.dl-format{margin:0;font-size:calc(12px * var(--echelle-bloc,1));letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.dl-texte{margin:0;font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.dl-credit{margin:0;font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce);font-style:italic}
.dl-audio{width:100%;max-width:100%;height:40px}
.dl-actions{margin:auto 0 0;padding-top:4px}
.dl-bouton{display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){.dl-grille,.dl-grille.col-2,.dl-grille.col-4{grid-template-columns:1fr}.dl-lignes .dl-carte{grid-template-columns:1fr}}
.galerie.gal-telechargeable figure{position:relative}
.gal-telecharger{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(8,12,20,.62);color:#fff;opacity:.85;transition:opacity .15s,transform .15s}
.gal-telecharger:hover,.gal-telecharger:focus-visible{opacity:1;transform:scale(1.06)}
.vis-telecharger{position:static!important;display:flex!important;align-items:center;gap:8px;width:max-content;margin:10px auto 0;transform:none!important}
@media print{.gal-telecharger,.vis-telecharger,.dl-actions,.dl-audio,.dl-video{display:none!important}}

/* ====================================================================================
   SUR TÉLÉPHONE (livraison 354). Les réglages « Sur téléphone » d'une section sont des
   classes `tel-*` posées par le rendu ; elles ne valent que sous 760 px. Sans classe,
   l'automatique d'aujourd'hui : rien ne change pour les sites existants. Une section
   cachée sur téléphone n'y est pas ; une section repliée garde son titre et un bouton
   « Voir », posé par site.js. Le bandeau d'accueil : photos d'abord (auto), texte d'abord,
   sans les photos, une seule rangée d'images ; boutons empilés ou côte à côte.
   ==================================================================================== */
.tel-voir{display:none}
.section-texte.image-droite .texte-grille>.texte-image{order:2}
@media (max-width:760px){
  /* --- Cartes : briques, réalisations, articles, avis, téléchargements --- */
  .tel-disp-deux .briques,.tel-disp-deux .articles,.tel-disp-deux .rea-liste,.tel-disp-deux .avis-liste,.tel-disp-deux .dl-liste{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible}
  .tel-disp-deux{--echelle-bloc:.92}
  .tel-disp-deux .brique,.tel-disp-deux .article-carte,.tel-disp-deux .rea-carte,.tel-disp-deux .avis-carte,.tel-disp-deux .dl-carte{padding:12px;min-width:0}
  .tel-disp-deux .brique-image{margin:-4px -4px 10px}
  .tel-disp-petites .briques,.tel-disp-petites .articles,.tel-disp-petites .rea-liste,.tel-disp-petites .avis-liste,.tel-disp-petites .dl-liste{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;overflow:visible}
  .tel-disp-petites{--echelle-bloc:.78}
  .tel-disp-petites .brique,.tel-disp-petites .article-carte,.tel-disp-petites .rea-carte,.tel-disp-petites .avis-carte,.tel-disp-petites .dl-carte{padding:9px;min-width:0;border-radius:10px}
  .tel-disp-petites .brique-image{margin:-3px -3px 8px}
  .tel-disp-petites .brique li,.tel-disp-petites .brique .detail{padding:4px 0 4px 12px}
  .tel-disp-petites .brique li.cle::before{left:0;top:9px}
  .tel-disp-petites .brique li:not(.cle)::before{left:2px;top:11px}
  .tel-disp-empile .briques,.tel-disp-empile .articles,.tel-disp-empile .rea-liste,.tel-disp-empile .avis-liste,.tel-disp-empile .dl-liste{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .tel-disp-defile .briques,.tel-disp-defile .articles,.tel-disp-defile .rea-liste,.tel-disp-defile .avis-liste,.tel-disp-defile .dl-liste{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;gap:12px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:thin}
  .tel-disp-defile .briques>*,.tel-disp-defile .articles>*,.tel-disp-defile .rea-liste>*,.tel-disp-defile .avis-liste>*,.tel-disp-defile .dl-liste>*{flex:0 0 84%!important;max-width:84%;min-width:0;scroll-snap-align:start;grid-column:auto!important}
  .tel-sans-photos .brique-image,.tel-sans-photos .article-carte img,.tel-sans-photos .article-carte picture,.tel-sans-photos .rea-images,.tel-sans-photos .dl-apercu,.tel-sans-photos .avis-carte img{display:none!important}
  .tel-sans-photos .brique-image+*{margin-top:0}
  /* --- Bandeau d'accueil --- */
  .hero.tel-hero-texte-abord.defile-haut .hero-defile,.hero.tel-hero-texte-abord.defile-bas .hero-defile{order:2;margin:24px 0 -40px}
  .hero.tel-hero-texte-abord .hero-grille>div:first-child{order:0}
  .hero.tel-hero-texte-abord .hero-grille>figure,.hero.tel-hero-texte-abord .hero-grille>.hero-image,.hero.tel-hero-texte-abord .hero-grille>.hero-carrousel,.hero.tel-hero-texte-abord .hero-grille>.hero-colonnes,.hero.tel-hero-texte-abord .hero-grille>.hero-eventail{order:1}
  .hero.tel-hero-texte-abord.defile-gauche .hero-defile,.hero.tel-hero-texte-abord.defile-droite .hero-defile{position:relative;inset:auto;width:100%;height:120px;margin-top:20px}
  .hero.tel-hero-sans .hero-defile,.hero.tel-hero-sans .hero-grille>figure,.hero.tel-hero-sans .hero-grille>.hero-image,.hero.tel-hero-sans .hero-grille>.hero-carrousel,.hero.tel-hero-sans .hero-grille>.hero-colonnes,.hero.tel-hero-sans .hero-grille>.hero-eventail{display:none!important}
  .hero.tel-hero-sans.defile-gauche>.cadre,.hero.tel-hero-sans.defile-droite>.cadre{max-width:none}
  .hero.tel-hero-sans .hero-grille,.hero.tel-hero-une-rangee .hero-grille{grid-template-columns:minmax(0,1fr)}
  .hero.tel-hero-une-rangee .hero-defile .hd-col:not(:first-child){display:none!important}
  .hero.tel-hero-une-rangee.defile-gauche .hero-defile,.hero.tel-hero-une-rangee.defile-droite .hero-defile,.hero.tel-hero-une-rangee.defile-fond .hero-defile{position:relative;inset:auto;width:100%;height:auto;margin:-40px 0 24px;order:-1}
  .hero.tel-hero-une-rangee.defile-gauche,.hero.tel-hero-une-rangee.defile-droite,.hero.tel-hero-une-rangee.defile-fond{display:flex;flex-direction:column}
  .hero.tel-hero-une-rangee.defile-gauche>.cadre,.hero.tel-hero-une-rangee.defile-droite>.cadre{max-width:none}
  .hero.tel-hero-une-rangee .hd-plan{position:relative;inset:auto;flex-direction:column;opacity:1;justify-content:flex-start}
  .hero.tel-hero-une-rangee .hd-col{flex:none;width:100%;height:auto}
  .hero.tel-hero-une-rangee .hd-piste{flex-direction:row;gap:12px;width:max-content;animation-name:bande-defile}
  .hero.tel-hero-une-rangee .hd-piste img{height:var(--hd-h,104px);width:auto;border-radius:10px}
  .hero.tel-hero-une-rangee .hd-voile{background:linear-gradient(to right,var(--papier) 0%,transparent 9%,transparent 91%,var(--papier) 100%)}
  .tel-boutons-empiles .boutons{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .tel-boutons-empiles .boutons .btn{width:100%;justify-content:center;text-align:center;box-sizing:border-box}
  .tel-boutons-cote .boutons{flex-wrap:nowrap;gap:8px}
  .tel-boutons-cote .boutons .btn{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;text-align:center;justify-content:center;white-space:normal;overflow-wrap:anywhere}
  /* --- Texte avec image --- */
  .tel-img-dessus .texte-grille,.tel-img-dessous .texte-grille{display:flex;flex-direction:column;gap:20px}
  .tel-img-dessus .texte-image{order:-1}
  .tel-img-dessous .texte-image{order:2}
  .tel-img-petite .texte-grille{display:block}
  /* L'image « en petit » est écrite AVANT le texte par le rendu (elle flotte à droite du début) ; sur l'ordinateur, l'ordre de grille la remet à sa place. */
  .tel-img-petite .texte-image{float:right;width:38%;max-width:170px;min-width:120px;margin:4px 0 12px 16px;position:static}
  .tel-img-petite .texte-grille::after{content:"";display:block;clear:both}
  .tel-img-non .texte-image{display:none!important}
  .tel-img-non .texte-grille{display:block}
  /* --- Galerie --- */
  .tel-gal-une .galerie,.tel-gal-deux .galerie,.tel-gal-trois .galerie{display:grid!important;columns:auto!important;gap:8px!important}
  .tel-gal-une .galerie{grid-template-columns:minmax(0,1fr)!important}
  .tel-gal-deux .galerie{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tel-gal-trois .galerie{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .tel-gal-trois .galerie figcaption{font-size:calc(12px * var(--echelle-bloc,1));padding:4px 2px}
  .tel-gal-une .galerie figure,.tel-gal-deux .galerie figure,.tel-gal-trois .galerie figure{grid-column:auto!important;flex:none!important;width:auto!important;min-width:0!important;margin:0!important}
  .tel-gal-defile .galerie{display:flex!important;flex-wrap:nowrap!important;columns:auto!important;overflow-x:auto;overflow-y:hidden;gap:10px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;scrollbar-width:thin;height:auto!important}
  .tel-gal-defile .galerie figure{flex:0 0 78%!important;max-width:78%;min-width:0!important;scroll-snap-align:start;margin:0!important;grid-column:auto!important;width:auto!important;position:static!important}
  .tel-gal-six .galerie figure:nth-of-type(n+7){display:none!important}
  /* --- Tableau des tarifs --- */
  .tel-tab-defile .grille-tarifs{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;scrollbar-width:thin}
  .tel-tab-defile .grille-tarifs th,.tel-tab-defile .grille-tarifs td{white-space:normal;min-width:120px}
  .tel-tab-figee .grille-tarifs{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tel-tab-figee .grille-tarifs th,.tel-tab-figee .grille-tarifs td{min-width:120px}
  .tel-tab-figee .grille-tarifs th:first-child,.tel-tab-figee .grille-tarifs td:first-child{position:sticky;left:0;z-index:1;background:var(--papier);box-shadow:2px 0 0 var(--trait)}
  .tel-tab-figee .grille-tarifs tr.tg th{position:static;box-shadow:none}
  .tel-tab-cartes .grille-tarifs{display:block}
  .tel-tab-cartes .grille-tarifs thead{display:none}
  .tel-tab-cartes .grille-tarifs tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .tel-tab-cartes .grille-tarifs tr{display:flex;flex-direction:column;gap:6px;background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:14px 16px}
  .tel-tab-cartes .grille-tarifs tr.tg{display:block;background:none;border:0;padding:8px 0 0}
  .tel-tab-cartes .grille-tarifs td{padding:0;border:0}
  .tel-tab-cartes .grille-tarifs td:first-child{font-weight:700;font-size:calc(15px * var(--echelle-bloc,1))}
  .tel-tab-cartes .grille-tarifs td.tp b{font-size:calc(24px * var(--echelle-bloc,1))}
  /* --- Cacher, replier --- */
  .tel-masque{display:none!important}
  .tel-replie:not(.tel-ouvert) .cadre>:not(.tete):not(.tel-voir):not(h1):not(h2){display:none!important}
  .tel-replie .tel-voir{display:inline-flex;margin-top:4px}
  .tel-replie .tete{margin-bottom:12px}
  .tel-replie.tel-ouvert .tel-voir{margin:18px 0 0}
}

/* ====================================================================================
   LE MENU SUR TÉLÉPHONE, AU CHOIX (livraison 355). Classes posées sur la barre par le rendu
   d'après `navigation.mobile` ; sans réglage, rien ne change : le bouton à trois traits et le
   tiroir sous le bandeau. Le menu qui défile de côté garde tous les liens visibles, en
   pastilles, avec sa barre ; « deux puis bouton » laisse les deux premiers liens à côté du
   bouton ; le menu ouvert peut prendre l'écran ou un volet à droite, avec un bouton Fermer.
   ==================================================================================== */
.tiroir-fermer{display:none}
.menu-mobile .mm-mot{font-size:14px;font-weight:600;letter-spacing:.02em}
.menu-mobile.avec-mot{width:auto;min-width:44px;padding:0 12px;gap:7px}
.menu-mobile.avec-mot svg{width:20px;height:20px}
@media(max-width:900px){
  /* Le bouton : rond, ou sans cadre. Toujours 44 px au moins sous le doigt. */
  .menu-mobile{min-width:44px;min-height:44px}
  .barre.mob-bt-rond .menu-mobile{border-radius:50%}
  .barre.mob-bt-rond .menu-mobile.avec-mot{border-radius:999px}
  .barre.mob-bt-nu .menu-mobile{border-color:transparent;background:transparent}
  .barre.mob-bt-nu .menu-mobile[aria-expanded="true"]{background:var(--marque);color:var(--papier)}
  /* Le bouton d'action caché sur téléphone (il reste dans le tiroir). */
  .barre.mob-sans-action .barre-grille>.btn{display:none}
  /* Le menu qui défile de côté : tous les liens, en pastilles, sur leur propre ligne sous le logo. */
  .barre.mob-menu-defile .menu-mobile,.barre.mob-menu-defile .tiroir-menu{display:none!important}
  .barre.mob-menu-defile ul{display:flex;flex:0 0 100%;order:10;margin:0;padding:4px 0 8px;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--marque) transparent;scroll-snap-type:x proximity;scroll-padding:0 12px}
  .barre.mob-menu-defile ul::-webkit-scrollbar{height:4px}
  .barre.mob-menu-defile ul::-webkit-scrollbar-thumb{background:var(--marque);border-radius:2px}
  .barre.mob-menu-defile ul li{flex:none;scroll-snap-align:start}
  .barre.mob-menu-defile ul li a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--trait-2,var(--trait));border-radius:999px;white-space:nowrap;font-size:15px;color:var(--encre);text-decoration:none;background:var(--papier)}
  .barre.mob-menu-defile ul li a[aria-current="page"]{background:var(--marque);color:var(--papier);border-color:var(--marque)}
  /* Deux liens, puis le bouton : ce qui compte reste visible. */
  .barre.mob-menu-deux ul{display:flex;gap:4px;margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden}
  .barre.mob-menu-deux ul li{flex:none}
  .barre.mob-menu-deux ul li:nth-child(n+3){display:none}
  .barre.mob-menu-deux ul li a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;white-space:nowrap;font-size:15px;color:var(--encre);text-decoration:none}
  .barre.mob-menu-deux .tiroir-menu ul li:nth-child(-n+2){display:none}
  /* Le menu ouvert en plein écran : le tiroir est sorti de la barre par site.js, ouvert par body.menu-ouvert. */
  body.menu-ouvert>.tiroir-menu.tiroir-plein{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;padding:70px 24px 32px;background:var(--papier);border:0;overflow:auto}
  .tiroir-menu.tiroir-plein ul{gap:4px}
  .tiroir-menu.tiroir-plein li a{font-size:22px;padding:14px 6px;text-align:center;border-bottom-color:transparent}
  .tiroir-menu.tiroir-plein .btn{margin-top:18px;min-height:48px}
  .tiroir-menu.tiroir-plein .lang-switch{justify-content:center}
  /* Le menu ouvert dans un volet à droite, la page voilée derrière (le voile est un pseudo-élément du tiroir : un toucher dessus le referme). */
  body.menu-ouvert>.tiroir-menu.tiroir-volet{position:fixed;top:0;right:0;bottom:0;width:min(84vw,360px);z-index:60;display:block;background:var(--papier);padding:70px 20px 24px;overflow:auto;border:0;box-shadow:-12px 0 40px rgba(0,0,0,.25)}
  body.menu-ouvert>.tiroir-menu.tiroir-volet::before{content:"";position:fixed;top:0;bottom:0;left:0;right:min(84vw,360px);background:rgba(10,14,22,.42)}
  .tiroir-menu.tiroir-volet li a{min-height:48px;display:flex;align-items:center}
  .tiroir-menu.tiroir-plein .tiroir-fermer,.tiroir-menu.tiroir-volet .tiroir-fermer{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait-2,var(--trait));background:var(--papier);color:var(--encre);font-size:24px;line-height:1;cursor:pointer;z-index:1}
  .tiroir-menu.tiroir-plein li a,.tiroir-menu.tiroir-volet li a{color:var(--encre)}
}
@media(min-width:901px){body>.tiroir-menu{display:none!important}}

/* ====================================================================================
   LA BARRE DU BAS, COMME UNE APPLICATION (livraison 356), et « Sur téléphone, pour tout le
   site ». La barre de la 88 gagne « Plus » (le reste du menu dans une feuille), icônes seules,
   fond sombre, et peut se cacher quand on lit. La page se termine au-dessus d'elle, pied compris.
   Le réglage du site : taille du texte, boutons, espace entre les parties — sous 760 px.
   ==================================================================================== */
.bb-feuille{display:none}
@media(max-width:900px){
  .barre-bas{transition:transform .25s ease}
  .barre-bas.bb-cache.bb-cachee{transform:translateY(110%)}
  .barre-bas a,.barre-bas .bb-plus{min-height:52px}
  .barre-bas .bb-plus{flex:1;display:grid;justify-items:center;gap:2px;padding:7px 2px;color:var(--encre-douce);background:none;border:0;font:inherit;font-size:11px;line-height:1.2;text-align:center;cursor:pointer}
  .barre-bas .bb-plus[aria-expanded="true"]{color:var(--marque)}
  .barre-bas.bb-icones a span,.barre-bas.bb-icones .bb-plus span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .barre-bas.bb-icones a,.barre-bas.bb-icones .bb-plus{padding:12px 2px;min-height:48px}
  .barre-bas.bb-icones svg{width:26px;height:26px}
  .barre-bas.bb-sombre{background:#1B2230;border-top-color:#2A3446;color:#C9CFD8}
  .barre-bas.bb-sombre a,.barre-bas.bb-sombre .bb-plus{color:#C9CFD8}
  .barre-bas.bb-sombre a[aria-current="page"],.barre-bas.bb-sombre .bb-plus[aria-expanded="true"]{color:#fff}
  /* La feuille « Plus » : au-dessus de la barre, le reste du menu, un lien par ligne à 48 px. */
  .bb-feuille{position:fixed;left:0;right:0;bottom:0;z-index:29;display:block;background:var(--papier);color:var(--encre);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.22);padding:8px 16px calc(84px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto}
  .bb-feuille[hidden]{display:none}
  .bb-feuille-tete{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;font-size:15px}
  .bb-fermer{width:40px;height:40px;border-radius:50%;border:1px solid var(--trait-2,var(--trait));background:var(--papier);color:var(--encre);font-size:22px;line-height:1;cursor:pointer}
  .bb-feuille ul{list-style:none;margin:0;padding:0}
  .bb-feuille li a{display:flex;align-items:center;min-height:48px;padding:4px 6px;color:var(--encre);text-decoration:none;font-size:17px;border-bottom:1px solid var(--trait)}
  .bb-feuille li.bb-action{padding-top:12px}
  .bb-feuille li.bb-action a{border:0;justify-content:center;min-height:48px}
  .bb-feuille li.bb-action .btn{width:100%;text-align:center}
}
@media (max-width:760px){
  /* Sur téléphone, pour tout le site : le texte un peu plus grand ou grand (une section qui a sa
     propre taille garde la sienne), les boutons empilés ou côte à côte (une section qui a le sien
     garde le sien), l'espace entre les parties serré ou aéré. */
  body.tel-texte-plus{--echelle-bloc:1.06}
  body.tel-texte-grand{--echelle-bloc:1.125}
  body.tel-boutons-empiles .boutons{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  body.tel-boutons-empiles .boutons .btn{width:100%;justify-content:center;text-align:center;box-sizing:border-box}
  body.tel-boutons-cote .boutons{flex-wrap:nowrap;gap:8px}
  body.tel-boutons-cote .boutons .btn{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;text-align:center;justify-content:center;white-space:normal;overflow-wrap:anywhere}
  body.tel-espace-serre .section{padding:36px 0}
  body.tel-espace-aere .section{padding:72px 0}
}

/* ═══ OÙ NOUS TROUVER (livraison 362) : l'adresse, la carte, l'itinéraire ═══
   Six dispositions par une classe sur la section ; la carte attend le clic (façade) ; sur
   téléphone tout s'empile, l'encart d'abord. */
.section-lieu .lieu-corps{margin-top:26px}
.section-lieu .lieu-panneau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:stretch}
.section-lieu.lieu-carte-gauche .lieu-panneau>.lieu-encart{order:2}
.section-lieu.lieu-carte-dessous .lieu-panneau,.section-lieu.lieu-carte-seule .lieu-panneau,.section-lieu.lieu-sans-carte .lieu-panneau{grid-template-columns:minmax(0,1fr)}
.section-lieu.lieu-carte-dessous .lieu-encart{max-width:760px;margin:0 auto;width:100%;text-align:center}
.section-lieu.lieu-carte-dessous .lieu-boutons,.section-lieu.lieu-carte-dessous .lieu-encadres,.section-lieu.lieu-carte-dessous .lieu-horaires ul,.section-lieu.lieu-carte-dessous .contact-reseaux{justify-content:center}
.section-lieu.lieu-carte-dessous .lieu-horaires li{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.section-lieu.lieu-carte-dessous .lieu-horaires .lieu-jour{text-align:right}.section-lieu.lieu-carte-dessous .lieu-horaires .lieu-creneaux{text-align:left}
.section-lieu.lieu-carte-dessous .lieu-aujourdhui{justify-content:center}
.section-lieu.lieu-encart-pose .lieu-panneau{grid-template-columns:minmax(0,1fr)}
.section-lieu.lieu-encart-pose .lieu-panneau>.lieu-encart,.section-lieu.lieu-encart-pose .lieu-panneau>.lieu-carte{grid-area:1/1}
.section-lieu.lieu-encart-pose .lieu-encart{align-self:start;justify-self:start;margin:24px;width:min(400px,calc(100% - 48px));z-index:1;box-shadow:0 14px 40px rgba(0,0,0,.16)}
.section-lieu.lieu-encart-pose .lieu-carte-lien{position:absolute;right:12px;bottom:10px;margin:0;padding:6px 10px;background:var(--carte);border-radius:8px}
.section-lieu.lieu-encart-pose .lieu-carte{gap:0}
.section-lieu.lieu-encart-pose .lieu-facade{padding-left:calc(min(400px,100% - 48px) + 48px)}
.section-lieu.lieu-sans-carte .lieu-encart{max-width:720px}
.section-lieu.lieu-carte-seule .lieu-encart-mince{padding:0;background:none;border:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:16px}
.lieu-encart{background:var(--carte);border:1px solid var(--trait);border-radius:calc(16px * var(--rayons,1));padding:26px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.lieu-nom{margin:0;font-size:calc(12.5px * var(--echelle-bloc,1));letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--encre-douce)}
.lieu-adresse{margin:0;font-family:var(--police-titres,inherit);font-size:calc(24px * var(--echelle-bloc,1));line-height:1.25;color:var(--titres-couleur,var(--encre));display:flex;flex-direction:column}
.lieu-boutons{display:flex;flex-wrap:wrap;gap:10px}
.lieu-boutons .btn{display:inline-flex;align-items:center;gap:9px;min-height:46px}
.lieu-boutons .btn svg{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}
.lieu-texte{margin:0;font-size:calc(15px * var(--echelle-bloc,1));color:var(--encre-douce);line-height:1.5}
.lieu-ic{display:inline-flex;flex:0 0 auto;color:var(--metal,var(--marque))}
.lieu-ic svg{width:20px;height:20px;fill:currentColor}
.lieu-horaires{border-top:1px solid var(--trait);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.lieu-aujourdhui{margin:0;display:flex;align-items:center;gap:10px;font-size:calc(15px * var(--echelle-bloc,1))}
.lieu-aujourdhui b{font-weight:700}
.lieu-aujourdhui .lieu-etat{color:var(--encre-douce)}
.lieu-aujourdhui .lieu-etat.ouvert{color:#1a7f37}
.lieu-horaires ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:calc(14px * var(--echelle-bloc,1))}
.lieu-horaires li{display:flex;justify-content:space-between;gap:12px;color:var(--encre-douce)}
.lieu-horaires li.aujourdhui{color:var(--encre);font-weight:600}
.lieu-note{margin:0;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.lieu-encadres{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lieu-encadres li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--trait);border-radius:calc(10px * var(--rayons,1));background:var(--papier);font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600}
.lieu-encadres .lieu-ic svg{width:18px;height:18px}
.lieu-carte{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.lieu-carte iframe,.lieu-facade{width:100%;border:1px solid var(--trait);border-radius:calc(16px * var(--rayons,1));display:block;background:var(--carte)}
.lieu-carte iframe{min-height:380px;flex:1 1 auto}
.lieu-h-basse iframe,.lieu-h-basse .lieu-facade{min-height:260px}.lieu-h-normale iframe,.lieu-h-normale .lieu-facade{min-height:380px}.lieu-h-haute iframe,.lieu-h-haute .lieu-facade{min-height:520px}
.lieu-facade{flex:1 1 auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;font:inherit;color:inherit;text-align:center;
  background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);background-size:44px 44px;background-position:center}
.lieu-facade:hover .btn-plein{filter:brightness(1.05)}
.lieu-facade-pin{display:flex;color:var(--metal,var(--marque))}
.lieu-facade-pin svg{width:44px;height:44px;fill:currentColor}
.lieu-facade-note{font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);max-width:320px;line-height:1.4}
.lieu-carte-lien{margin:0;font-size:calc(13px * var(--echelle-bloc,1));text-align:right}
.lieu-onglets{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lieu-onglets [role=tab]{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--trait-2);background:transparent;color:var(--encre);font:inherit;font-weight:600;cursor:pointer}
.lieu-onglets [role=tab][aria-selected=true]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.lieu-onglets+.lieu-corps{margin-top:16px}
.section-lieu .lieu-panneau[hidden]{display:none}
.section-lieu .contact-reseaux{margin:0}
@media (max-width:760px){
  .section-lieu .lieu-panneau{grid-template-columns:minmax(0,1fr);gap:18px}
  .section-lieu.lieu-carte-gauche .lieu-panneau>.lieu-encart{order:0}
  .section-lieu.lieu-encart-pose .lieu-panneau>.lieu-encart,.section-lieu.lieu-encart-pose .lieu-panneau>.lieu-carte{grid-area:auto}
  .section-lieu.lieu-encart-pose .lieu-encart{margin:0;width:auto;box-shadow:none}
  .section-lieu.lieu-encart-pose .lieu-carte-lien{position:static;padding:0;background:none}
  .section-lieu.lieu-encart-pose .lieu-carte{gap:8px}
  .section-lieu.lieu-encart-pose .lieu-facade{padding-left:24px}
  .lieu-encart{padding:20px}
  .lieu-adresse{font-size:calc(21px * var(--echelle-bloc,1))}
  .lieu-boutons .btn{flex:1 1 calc(50% - 10px);justify-content:center}
  .lieu-boutons .lieu-itineraire{flex-basis:100%;min-height:52px}
  .lieu-h-haute iframe,.lieu-h-haute .lieu-facade,.lieu-h-normale iframe,.lieu-h-normale .lieu-facade{min-height:280px}
  .lieu-carte-lien{text-align:center}
}

/* ═══ L'ALIGNEMENT DU BANDEAU D'ACCUEIL (livraison 368) ═══
   Le chapeau a une largeur de lecture (64ch) : centré, il restait collé à gauche sous un titre
   centré — « le cadre n'est pas centré ». Il se centre avec le texte, maintenant. */
.hero-centre-texte .chapo,.hero-sur-image .chapo{margin-left:auto;margin-right:auto}
.hero.hero-texte-gauche .hero-grille>div:first-child{text-align:left}
.hero.hero-texte-gauche .boutons,.hero.hero-texte-gauche .surtitre,.hero.hero-texte-gauche .rassurance{justify-content:flex-start}
.hero.hero-texte-gauche .chapo{margin-left:0;margin-right:0}
.hero.hero-texte-droite .hero-grille>div:first-child{text-align:right}
.hero.hero-texte-droite .boutons,.hero.hero-texte-droite .surtitre,.hero.hero-texte-droite .rassurance{justify-content:flex-end}
.hero.hero-texte-droite .chapo{margin-left:auto;margin-right:0}
.hero.hero-texte-justifie .chapo{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.hero.hero-texte-justifie.hero-centre-texte .chapo{text-align-last:center}
/* La place du bloc de texte, quand rien n'est à côté de lui. */
.hero.hero-place-gauche .hero-grille,.hero.hero-place-centre .hero-grille,.hero.hero-place-droite .hero-grille{grid-template-columns:minmax(0,1fr)}
.hero.hero-place-gauche .hero-grille>div:first-child,.hero.hero-place-centre .hero-grille>div:first-child,.hero.hero-place-droite .hero-grille>div:first-child{max-width:820px;width:100%}
.hero.hero-place-gauche .hero-grille{justify-items:start}
.hero.hero-place-centre .hero-grille{justify-items:center}
.hero.hero-place-droite .hero-grille{justify-items:end}
/* À gauche ou à droite, le bloc prend appui sur la largeur normale du site, même quand le modèle est étroit. */
.hero.hero-place-gauche .hero-grille.cadre,.hero.hero-place-droite .hero-grille.cadre{max-width:1180px;width:100%;box-sizing:border-box}

/* 368 : le chapeau d'une tête centrée est centré lui aussi (il a une largeur de lecture, 64ch : sans
   marges automatiques, il restait collé à gauche sous un titre centré — « ça ne commence pas où il faut »). */
.tete-centree .chapo,.sec-centre .tete .chapo{margin-left:auto;margin-right:auto}
.sec-centre.section-texte.avec-image .tete .chapo{margin-left:0;margin-right:0}
/* À droite : la tête s'appuie sur le bord droit. */
.sec-droite .tete{margin-left:auto;margin-right:0;text-align:right}
.sec-droite .tete .chapo{margin-left:auto;margin-right:0}
.sec-droite .tete .surtitre{justify-content:flex-end}
/* Justifié : les paragraphes en pavé, avec césure ; les titres ne bougent pas. */
.sec-justifie .chapo,.sec-justifie .texte-section p,.sec-justifie .brique p,.sec-justifie .cellule p,.sec-justifie .cel-texte{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.sec-justifie.sec-centre .tete .chapo{text-align-last:center}

/* ---- 369 : LE BANDEAU DÉFILANT — une piste sans couture (deux lots, glissement de moitié) ---- */
.defilant{overflow:hidden;white-space:nowrap;max-width:100%;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.defilant-piste{display:flex;width:max-content;animation:defilant var(--defile-duree,30s) linear infinite;will-change:transform}
.defilant-vers-droite .defilant-piste{animation-direction:reverse}
.defilant:hover .defilant-piste,.defilant:focus-within .defilant-piste,.defilant.defilant-tenu .defilant-piste{animation-play-state:paused}
.defilant-lot,.defilant-bis{display:flex;align-items:center;flex:0 0 auto}
.defilant-el{display:inline-flex;align-items:center;gap:.35em;padding:0 .2em}
.defilant-el a,.defilant a.defilant-el,.defilant-el>a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.defilant-sep{display:inline-block;padding:0 1.1em;opacity:.55}
.defilant-sep-vide{padding:0 1.6em}
@keyframes defilant{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* La partie « Bandeau défilant » */
.section-defilant{padding:22px 0}
.section-defilant .defilant-bloc{font-size:calc(17px * var(--echelle-bloc,1));font-weight:600;color:var(--sec-texte,var(--titres-couleur,inherit))}
.section-defilant .defilant-petite{font-size:calc(14px * var(--echelle-bloc,1));font-weight:500}
.section-defilant .defilant-grande{font-size:calc(clamp(22px,3vw,34px) * var(--echelle-bloc,1));font-weight:700;letter-spacing:-.01em}
.section-defilant.defilant-encadre .defilant{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:12px 0}
.section-defilant.defilant-pleine.defilant-encadre{padding-top:0;padding-bottom:0}
.section-defilant .aide{text-align:center}
/* La ligne de réassurance du bandeau d'accueil, quand elle a son propre réglage */
.hero.rass-reglee .hero-grille>*{min-width:0}
.hero .rassurance-defile{display:block;max-width:100%}
.hero .rassurance-pleine{display:block;position:relative;z-index:2;margin-top:clamp(28px,4vw,48px);padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);background:color-mix(in srgb,var(--papier) 70%,transparent);color:var(--encre-douce)}
.hero.hero-sur-image .rassurance-pleine,.hero.fond-photo .rassurance-pleine{background:rgba(0,0,0,.28);color:rgba(255,255,255,.9)}
.hero.rass-pleine-largeur{padding-bottom:0}
@media (prefers-reduced-motion:reduce){
  .defilant{white-space:normal;-webkit-mask-image:none;mask-image:none}
  .defilant-piste{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .defilant-lot{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .defilant-lot[aria-hidden],.defilant-bis{display:none}
}

/* ---- 369 : L'ALIGNEMENT DES BOUTONS d'une section — tous écrans (bt-*), puis téléphone (tel-bt-*) ---- */
/* Dans un bandeau centré, la colonne de texte épouse son contenu : elle s'étire pour que les boutons aient où aller. */
.hero:is(.bt-gauche,.bt-centre,.bt-droite) .hero-grille>div:first-child{justify-self:stretch}
:is(.hero,.section).bt-gauche :is(.boutons,.lieu-boutons){justify-content:flex-start}
:is(.hero,.section).bt-centre :is(.boutons,.lieu-boutons){justify-content:center}
:is(.hero,.section).bt-droite :is(.boutons,.lieu-boutons){justify-content:flex-end}
.section-libre.bt-gauche .cellule-bouton{text-align:left}
.section-libre.bt-gauche .cellule-bouton .btn{margin-left:0;margin-right:auto}
.section-libre.bt-centre .cellule-bouton{text-align:center}
.section-libre.bt-centre .cellule-bouton .btn{margin-left:auto;margin-right:auto}
.section-libre.bt-droite .cellule-bouton{text-align:right}
.section-libre.bt-droite .cellule-bouton .btn{margin-left:auto;margin-right:0}
@media (max-width:760px){
  .hero:is(.tel-bt-gauche,.tel-bt-centre,.tel-bt-droite) .hero-grille>div:first-child{justify-self:stretch}
  :is(.hero,.section).tel-bt-gauche :is(.boutons,.lieu-boutons){justify-content:flex-start}
  :is(.hero,.section).tel-bt-centre :is(.boutons,.lieu-boutons){justify-content:center}
  :is(.hero,.section).tel-bt-droite :is(.boutons,.lieu-boutons){justify-content:flex-end}
  .section-libre.tel-bt-gauche .cellule-bouton{text-align:left}
  .section-libre.tel-bt-centre .cellule-bouton{text-align:center}
  .section-libre.tel-bt-droite .cellule-bouton{text-align:right}
  /* Le bouton « Voir » d'une section repliée : sous le titre, aligné comme lui (automatique),
     ou comme le réglage de la section. Repliée, la section ne garde pas ses grandes marges. */
  .tel-replie .tel-voir{width:fit-content}
  .sec-centre.tel-replie .tel-voir,.tel-replie .tete-centree+.tel-voir{display:flex;margin-left:auto;margin-right:auto}
  .sec-droite.tel-replie .tel-voir{display:flex;margin-left:auto;margin-right:0}
  .tel-replie.tel-bt-gauche .tel-voir{display:flex;margin-left:0;margin-right:auto}
  .tel-replie.tel-bt-centre .tel-voir{display:flex;margin-left:auto;margin-right:auto}
  .tel-replie.tel-bt-droite .tel-voir{display:flex;margin-left:auto;margin-right:0}
  .section.tel-replie:not(.tel-ouvert){padding-top:36px;padding-bottom:36px}
}

/* ---- 369 : CARROUSEL DES SEULES CARTES COCHÉES, ET PHOTOS QUI S'AGRANDISSENT ---- */
.briques-deux-temps>*+*{margin-top:clamp(28px,4vw,48px)}
.loupe-ouvrir{display:block;position:relative;width:100%;height:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in;border-radius:inherit;overflow:hidden}
.loupe-ouvrir img{width:100%;height:100%;object-fit:cover;display:block}
.loupe-ouvrir:focus-visible{outline:3px solid var(--marque);outline-offset:-3px}
.loupe-ic{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.58);display:grid;place-items:center;opacity:.85;transition:opacity .2s,transform .2s}
.loupe-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.loupe-ouvrir:hover .loupe-ic,.loupe-ouvrir:focus-visible .loupe-ic{opacity:1;transform:scale(1.08)}
dialog.loupe{border:0;padding:0;margin:auto;background:transparent;max-width:96vw;max-height:96vh;overflow:visible;color:#fff}
dialog.loupe::backdrop{background:rgba(8,10,14,.88)}
.loupe-cadre{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.loupe-cadre img{display:block;max-width:min(1400px,84vw);max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#111;cursor:zoom-out}
.loupe button{min-width:44px;min-height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.loupe button:hover,.loupe button:focus-visible{background:rgba(255,255,255,.26)}
.loupe .loupe-fermer{position:fixed;top:14px;right:14px;font-size:22px}
.loupe-legende{margin:12px 0 0;text-align:center;font-size:14px;color:rgba(255,255,255,.85)}
.loupe.loupe-seule .loupe-prec,.loupe.loupe-seule .loupe-suiv{visibility:hidden}
@media (max-width:760px){
  .loupe-cadre{grid-template-columns:minmax(0,1fr)}
  .loupe-cadre img{max-width:94vw;max-height:78vh}
  .loupe .loupe-prec,.loupe .loupe-suiv{position:fixed;bottom:18px}
  .loupe .loupe-prec{left:18px} .loupe .loupe-suiv{right:18px}
}

/* ---- 372 : LE MENU AU DÉFILEMENT — collé en haut (par défaut), qui part avec la page, ou discret ---- */
/* Un menu qui a son propre fond (couleur, dégradé, photo) portait `.a-fond{position:relative}`,
   posée après `.barre{position:sticky}` : il partait avec la page. Il reste collé, comme les autres. */
.barre.a-fond{position:sticky}
.barre.barre-libre,.barre.a-fond.barre-libre{position:relative}
.barre.barre-discrete{transition:transform .28s ease,box-shadow .25s ease}
.barre.barre-discrete.barre-cachee:not(.ouvert):not(:focus-within){transform:translateY(-105%)}
@media (prefers-reduced-motion:reduce){.barre.barre-discrete{transition:none}}

/* ---- 372 : DES CARTES EN VERRE DANS UN CARROUSEL 3D GARDENT LEURS COINS ----
   « Le même problème de carte non arrondie, sur une section Réalisations. » Mesuré dans Chrome :
   une carte en verre (backdrop-filter) inclinée par le carrousel 3D a bien son arrondi (28 px
   calculés), mais le navigateur ne découpe plus ses enfants ni son fond flou selon cet arrondi —
   la capture d'écran dépasse au coin, le verre se dessine carré. Un découpage par clip-path, lui,
   tient dans tous les cas : il reprend l'arrondi de la carte (celui de la section ou du site). */
.f-cartes-rayon{--coin-carte:calc(var(--cartes-rayon,14px) * var(--rayons,1))}
.cartes-verre .carrousel.car-3d :is(.brique,.article-carte,.avis-carte,.rea-carte){clip-path:inset(0 round var(--coin-carte,calc(14px * var(--rayons,1))))}

/* 373 : la photo d'une réalisation mène au site */
a.rea-images-lien{color:inherit;text-decoration:none;cursor:pointer}
a.rea-images-lien img{transition:opacity .2s}
a.rea-images-lien:hover img{opacity:.9}

/* ---- 381 : REPLIER UNE SECTION PARTOUT, ORDINATEUR COMPRIS ----
   Le titre reste, un bouton (« Voir » ou le texte choisi) déplie le reste — ce que « Replier sous
   un bouton » fait sur téléphone depuis la 354. Le contenu reste dans la page. */
.replie:not(.tel-ouvert) .cadre>:not(.tete):not(.tel-voir):not(h1):not(h2){display:none!important}
.replie .tel-voir{display:inline-flex;margin-top:4px;width:fit-content}
.replie .tete{margin-bottom:12px}
.replie.tel-ouvert .tel-voir{margin:18px 0 0}
.sec-centre.replie .tel-voir,.replie .tete-centree+.tel-voir,.replie.bt-centre .tel-voir{display:flex;margin-left:auto;margin-right:auto}
.sec-droite.replie .tel-voir,.replie.bt-droite .tel-voir{display:flex;margin-left:auto;margin-right:0}
.replie.bt-gauche .tel-voir{display:flex;margin-left:0;margin-right:auto}
.section.replie:not(.tel-ouvert){padding-top:44px;padding-bottom:44px}
@media (max-width:760px){
  .replie.tel-bt-gauche .tel-voir{display:flex;margin-left:0;margin-right:auto}
  .replie.tel-bt-centre .tel-voir{display:flex;margin-left:auto;margin-right:auto}
  .replie.tel-bt-droite .tel-voir{display:flex;margin-left:auto;margin-right:0}
  .section.replie:not(.tel-ouvert){padding-top:36px;padding-bottom:36px}
}

/* ---- 382 : LA COUVERTURE D'UNE VIDÉO SE RECADRE ----
   Une image dans le cadre (plus un fond CSS) : elle prend les cadrages des autres photos
   (.cad-haut…, .cad-libre avec point et zoom, .cad-dezoom qui recule). */
.video-facade.avec-couv{overflow:hidden;isolation:isolate}
.video-facade .video-couv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}

/* ---- 382 : LES SOUS-MENUS DU MENU DU HAUT ----
   Un lien à sous-menu : le lien, sa flèche, et un panneau qui s'ouvre au survol, au focus, ou au
   clic sur la flèche (.ouvert, posé par site.js). « liste » : sous le lien ; « panneau » : des
   cartes sur 1 à 4 colonnes, centrées sous la barre. Au téléphone : l'accordéon du tiroir. */
.barre-grille{position:relative}
.barre ul li.a-sous{display:flex;align-items:center;gap:2px;position:relative}
.barre ul li.a-sous-panneau{position:static}
.barre .sous-ouvrir{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;color:var(--encre-douce);cursor:pointer;border-radius:6px}
.barre .sous-ouvrir svg{width:15px;height:15px;transition:transform .18s}
.barre li.a-sous:hover>.sous-ouvrir svg,.barre li.a-sous.ouvert>.sous-ouvrir svg{transform:rotate(180deg)}
.barre .sous-menu{position:absolute;top:100%;left:0;z-index:30;padding-top:10px;visibility:hidden;opacity:0;transform:translateY(6px);
  transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .28s}
.barre li.a-sous:hover>.sous-menu,.barre li.a-sous:focus-within>.sous-menu,.barre li.a-sous.ouvert>.sous-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.barre li.a-sous.ferme-force>.sous-menu{visibility:hidden;opacity:0}
.barre .sous-menu>.sm-entrees,.barre .sous-menu>.sm-tout{background:var(--carte,var(--fond));}
.barre .sous-menu .sm-entrees{list-style:none;margin:0;display:grid;gap:2px;padding:8px;border:1px solid var(--trait);border-radius:calc(14px * var(--rayons,1));
  box-shadow:0 18px 50px -18px rgba(0,0,0,.45);min-width:240px}
.barre .sous-menu.sm-panneau{left:50%;transform:translate(-50%,6px);width:min(100%,calc(var(--sm-colonnes,3) * 290px + 40px))}
.barre li.a-sous:hover>.sous-menu.sm-panneau,.barre li.a-sous:focus-within>.sous-menu.sm-panneau,.barre li.a-sous.ouvert>.sous-menu.sm-panneau{transform:translate(-50%,0)}
.barre .sous-menu.sm-panneau .sm-entrees{grid-template-columns:repeat(var(--sm-colonnes,3),minmax(0,1fr));gap:6px;padding:14px}
.barre .sous-menu li{white-space:normal;margin:0}
.barre .sous-menu a.sm-lien{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:calc(10px * var(--rayons,1));color:var(--encre);text-decoration:none;font-size:calc(14.5px * var(--echelle-bloc,1))}
.barre .sous-menu a.sm-lien::after{display:none}
.barre .sous-menu a.sm-lien:hover,.barre .sous-menu a.sm-lien:focus-visible,.barre .sous-menu a.sm-lien[aria-current]{background:color-mix(in srgb,var(--marque) 12%,transparent);color:var(--encre)}
.barre .sous-menu .sm-textes{display:flex;flex-direction:column;gap:2px;min-width:0}
.barre .sous-menu .sm-textes b{font-weight:700;color:var(--encre)}
.barre .sous-menu .sm-textes small{color:var(--encre-douce);font-size:calc(13px * var(--echelle-bloc,1));line-height:1.4}
.barre .sous-menu .sm-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:calc(10px * var(--rayons,1));background:color-mix(in srgb,var(--sm-ic,var(--marque)) 16%,transparent);color:var(--sm-ic,var(--marque))}
.barre .sous-menu .sm-ic svg{width:19px;height:19px}
.barre .sous-menu .sm-img{background:none;overflow:hidden}
.barre .sous-menu .sm-img img{width:100%;height:100%;object-fit:cover;display:block}
.barre .sous-menu.sm-panneau .sm-img{width:48px;height:48px}
.barre .sous-menu.sm-liste .sm-textes small{display:none}
.barre .sous-menu .sm-bouton{display:flex;align-items:center;padding:6px 12px}
.barre .sous-menu .sm-bouton .btn{color:var(--texte-sur-marque,#fff)}
.barre .sous-menu .sm-tout{display:block;margin-top:-1px;padding:10px 16px;border:1px solid var(--trait);border-top:0;border-radius:0 0 calc(14px * var(--rayons,1)) calc(14px * var(--rayons,1));
  color:var(--marque);text-decoration:none;font-weight:600;font-size:calc(14px * var(--echelle-bloc,1))}
.barre .sous-menu:has(.sm-tout) .sm-entrees{border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (prefers-reduced-motion:reduce){.barre .sous-menu,.barre .sous-ouvrir svg{transition:none}}
/* Le tiroir du téléphone : l'accordéon. */
.tiroir-menu li.a-sous .tiroir-ligne{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tiroir-menu .sous-ouvrir{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--trait);border-radius:10px;background:none;color:inherit;cursor:pointer}
.tiroir-menu .sous-ouvrir svg{width:18px;height:18px;transition:transform .18s}
.tiroir-menu .sous-ouvrir[aria-expanded="true"] svg{transform:rotate(180deg)}
.tiroir-menu ul.tiroir-sous{margin:4px 0 8px 12px;padding:0 0 0 12px;border-left:2px solid var(--trait);display:grid;gap:2px}
.tiroir-menu ul.tiroir-sous[hidden]{display:none}
.tiroir-menu .tiroir-sous .sm-bouton{padding:6px 0}
.tiroir-menu .tiroir-sous .sm-tout{font-weight:600;color:var(--marque)}
@media (max-width:900px){.barre.mob-menu-defile .sous-ouvrir,.barre.mob-menu-defile .sous-menu{display:none!important}}
.barre .sous-menu a.sm-tout::after,.barre .sous-menu a.btn::after{display:none}
.barre.mob-menu-deux .tiroir-menu ul.tiroir-sous>li{display:block}
@media (max-width:900px){.barre.mob-menu-deux>.cadre .sous-ouvrir,.barre.mob-menu-deux>.cadre .sous-menu{display:none!important}}
.barre .sous-menu>a.sm-tout{color:var(--marque)}
.barre .sous-menu.sm-panneau .sm-bouton{grid-column:1/-1;justify-content:flex-start;padding:10px 12px 4px;border-top:1px solid var(--trait);margin-top:4px}
/* Le panneau garde les couleurs d'une carte même sous un menu à fond sombre (dont les liens sont blancs). */
.barre.barre .sous-menu a.sm-lien:not(.btn){color:var(--encre)}
.barre.barre .sous-menu a.sm-tout:not(.btn){color:var(--marque)}

/* ---- 383 : LES PHOTOS POSÉES — éventail, pile, patchwork, losanges ----
   Toutes les photos dans la même case de grille, décalées par leurs marges (en % de la largeur) :
   la hauteur suit les photos. --r : l'inclinaison, --z : l'empilement, --a : un format imposé. */
.montage{display:grid;align-items:start;justify-items:start;margin:0;width:100%;padding:3% 2% 5%;position:relative}
.montage .mt-item{grid-area:1/1;width:var(--w);margin-left:var(--l);margin-top:var(--t);transform:rotate(var(--r,0deg));z-index:var(--z,1);
  transition:transform .35s ease,filter .35s ease;will-change:transform}
.montage .mt-forme{display:block;overflow:hidden;border-radius:calc(6px * var(--rayons,1))}
.montage .mt-forme img{display:block;width:100%;height:auto}
.montage .mt-cadre-fixe .mt-forme{aspect-ratio:var(--a)}
.montage .mt-cadre-fixe .mt-forme img{height:100%;object-fit:cover}
.montage.mt-cadre .mt-forme{background:#fff;padding:clamp(4px,1.2%,9px)}
.montage.mt-cadre .mt-forme img{border-radius:calc(3px * var(--rayons,1))}
.montage.mt-ombre-douce .mt-item{filter:drop-shadow(0 16px 26px rgba(0,0,0,.34))}
.montage.mt-ombre-marquee .mt-item{filter:drop-shadow(8px 8px 0 rgba(0,0,0,.55))}
.montage .mt-item:hover{transform:rotate(0deg) scale(1.04);z-index:9}
/* Les losanges : un carré découpé en losange ; le cadre blanc est le même losange, un peu plus grand. */
.montage.mt-losange .mt-forme{aspect-ratio:1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.montage.mt-losange .mt-forme img{height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.montage.mt-losange.mt-cadre .mt-forme{padding:clamp(6px,2.2%,14px)}
.montage.mt-losange .mt-item:hover{transform:scale(1.05)}
.hero.avec-montage .hero-grille{align-items:center}
.montage .hero-badge{z-index:10}
/* Dans une partie de texte : pas le cadre ni l'ombre de l'image seule. */
.texte-image.texte-montage{overflow:visible;box-shadow:none;background:none;border:0}
.section-texte.image-dessus .texte-image.texte-montage{max-height:none;max-width:640px;margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.montage .mt-item{transition:none}.montage .mt-item:hover{transform:rotate(var(--r,0deg))}}

/* ---- 384 : trois formes de plus pour l'image d'une section libre ----
   originale : l'image entière, dans sa forme à elle (une couverture reste une couverture) ;
   portrait / paysage : rectangle vertical ou horizontal, recadré sans déformer. */
.section-libre .cellule img.forme-originale{aspect-ratio:auto;height:auto;object-fit:initial;border-radius:calc(6px * var(--rayons,1))}
.section-libre .cellule img.forme-portrait,.section-libre .cellule img.forme-paysage{object-fit:cover;height:auto}

/* ---- 385 : le sous-menu, ses couleurs et son style « transparent » ----
   Carte : son fond et son texte se choisissent (--sm-fond, --sm-texte). Transparent : aucun fond,
   aucun cadre — les entrées tombent sous le lien, écrites comme le menu du haut. */
.barre .sous-menu>.sm-entrees,.barre .sous-menu>.sm-tout{background:var(--sm-fond,var(--carte,var(--fond)))}
.barre.barre .sous-menu a.sm-lien:not(.btn),.barre .sous-menu .sm-textes b{color:var(--sm-texte,var(--encre))}
.barre .sous-menu .sm-textes small{color:var(--sm-texte,var(--encre-douce));opacity:.8}
.barre .sous-menu.sm-transparent>.sm-entrees,.barre .sous-menu.sm-transparent>.sm-tout{background:none;border:0;box-shadow:none;border-radius:0}
.barre .sous-menu.sm-transparent>.sm-entrees{padding:6px 0;gap:0;min-width:0}
.barre .sous-menu.sm-transparent>.sm-tout{padding:6px 0}
.barre .sous-menu.sm-transparent a.sm-lien{padding:6px 0;background:none!important;font-size:calc(14.5px * var(--echelle-bloc,1))}
.barre.barre .sous-menu.sm-transparent a.sm-lien:not(.btn),.barre .sous-menu.sm-transparent .sm-textes b{color:var(--sm-texte,var(--encre-douce));font-weight:inherit}
.barre.a-fond.fond-sombre .sous-menu.sm-transparent a.sm-lien:not(.btn),.barre.a-fond.fond-sombre .sous-menu.sm-transparent .sm-textes b{color:var(--sm-texte,#fff)}
.barre.barre .sous-menu.sm-transparent a.sm-lien:not(.btn):hover,.barre .sous-menu.sm-transparent a.sm-lien:hover .sm-textes b{color:var(--survol-couleur,var(--marque))}
.barre .sous-menu.sm-transparent .sm-ic{width:26px;height:26px;background:none}
/* L'aperçu : la barre de la première section d'une fiche passe sous la ligne du prix (qui la chevauche). */
body[data-apercu].studio-encadre .article-date + [data-bloc] > .studio-barre{top:46px}