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

@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}

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