/* 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: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;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 .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}
.briques-filets .brique{background:none;border:0;border-top:1px solid var(--trait);border-radius:0;padding:22px 18px 22px 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))}
@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 .rassurance{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%}
.orne-bandeau-defilant .hero .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 .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}
.briques-filets.articles .article-carte{border:0;border-top:1px solid var(--trait);border-radius:0;background:none}


/* =====================================================================
   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,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)}
.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: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)}

/* 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;border-radius:4px;transition:box-shadow .12s}
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,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)}
.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,.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. */
html,body{max-width:100%;overflow-x:hidden}
@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 .article-carte,.cartes-plates .brique,.cartes-plates .atout,.cartes-plates .coord{box-shadow:none;border:1px solid var(--trait)}
.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 .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 .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)}
@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 .articles-carrousel,.carrousel.car-3d .gal-carrousel,.carrousel.car-3d .briques-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 .articles-carrousel,
.carrousel.car-manege.manege-actif .gal-carrousel,
.carrousel.car-manege.manege-actif .briques-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 .articles-carrousel,.carrousel.car-vertical .gal-carrousel,.carrousel.car-vertical .briques-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}

@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 .articles-carrousel,.carrousel.car-vertical .gal-carrousel,.carrousel.car-vertical .briques-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))}
.rdv[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%}

/* --------------------------------------------------------------------------
   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}
}