/* ==========================================================================
   IPOMED — feuille de style
   Couleurs extraites du logo officiel : bleus #0B4495 / #0060AC / #0085CA,
   castor #C6603C / #AB5233 / #F5D098, encre #252B2F.
   Le lettrage très espacé de la baseline « VOTRE AUTONOMIE NOTRE METIER »
   sert de style de label sur tout le site.
   ========================================================================== */

:root {
  --bleu-nuit:   #0B4495;
  --bleu-fonce:  #07326B;
  --bleu:        #0060AC;
  --bleu-clair:  #0085CA;
  --bleu-pale:   #E6F0FA;
  --bleu-brume:  #F2F7FC;

  --castor:       #C6603C;
  --castor-fonce: #AB5233;
  --castor-texte: #B95836;   /* castor assombri : 4,65:1 sur blanc (le #C6603C n'atteint que 4,09) */
  --sable:        #F5D098;
  --sable-texte:  #F7D8A9;   /* sable éclairci : 4,61:1 sur le bleu du dégradé */
  --sable-pale:   #FDF3E2;

  --encre:     #252B2F;
  --encre-70:  #5A6268;
  --encre-45:  #666D74;   /* relevé : ≥4,5:1 sur tous les fonds clairs du site */
  --papier:    #F5F8FC;
  --blanc:     #FFFFFF;
  --trait:     rgba(37,43,47,.13);

  --ff-titre: "Poppins", "Segoe UI", -apple-system, sans-serif;
  --ff-texte: "Source Sans 3", "Segoe UI", -apple-system, sans-serif;

  --max: 1180px;
  --max-etroit: 760px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --rayon: 6px;
  --rayon-lg: 14px;
  --t: 300ms cubic-bezier(.2,.7,.3,1);

  --degrade-marque: radial-gradient(circle at 50% 30%, #0B62A8 0%, #0A4E93 45%, #07326B 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--ff-texte); font-size: 1.06rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--bleu-nuit); }

h1, h2, h3, h4 {
  font-family: var(--ff-titre); font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 .6em; color: var(--bleu-nuit);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
ul, ol { max-width: 68ch; }

:focus-visible { outline: 3px solid var(--castor); outline-offset: 3px; border-radius: 2px; }

/* L'attribut hidden doit l'emporter sur tout display explicite.
   Sans cette règle, .produit { display:flex } écrase le [hidden]{display:none}
   du navigateur et les filtres n'ont aucun effet visible. */
[hidden] { display: none !important; }

.saut-contenu { position: absolute; left: -9999px; background: var(--bleu-nuit); color: #fff; padding: .75rem 1.25rem; z-index: 200; }
.saut-contenu:focus { left: 1rem; top: 1rem; }
.sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ------------------------------------------------------------- layout -- */

.enveloppe { width:100%; max-width: var(--max); margin-inline:auto; padding-inline: var(--gouttiere); }
.enveloppe--etroit { max-width: var(--max-etroit); }

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--serre { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--blanc { background: var(--blanc); }
.section--brume { background: var(--bleu-brume); }
.section--pale  { background: var(--bleu-pale); }
.section--marque { background: var(--degrade-marque); color: #fff; }
.section--marque h1, .section--marque h2, .section--marque h3 { color: #fff; }
.section--marque p { color: rgba(255,255,255,.88); }
.section--marque a:not(.btn) { color: #fff; }   /* :not(.btn) : sinon les boutons clairs héritent du blanc et deviennent illisibles */

.grille { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(265px,1fr)); }

/* ---- label très espacé, repris de la baseline du logo ---------------- */

.label {
  font-family: var(--ff-titre); font-size: .68rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--bleu);
  margin: 0 0 1rem;
}
.section--marque .label { color: var(--sable-texte); }
.label--castor { color: var(--castor-texte); }

/* ------------------------------------------------------------ boutons -- */

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--ff-titre); font-size:.9rem; font-weight:600;
  padding:.85rem 1.6rem; border:2px solid var(--bleu-nuit); border-radius:100px;
  background: var(--bleu-nuit); color:#fff; text-decoration:none; cursor:pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:hover { background: var(--bleu); border-color: var(--bleu); color:#fff; transform: translateY(-2px); }
.btn .fleche { transition: transform var(--t); }
.btn:hover .fleche { transform: translateX(3px); }

.btn--fantome { background: transparent; color: var(--bleu-nuit); }
.btn--fantome:hover { background: var(--bleu-nuit); color:#fff; }

.btn--castor { background: var(--castor-fonce); border-color: var(--castor-fonce); }   /* blanc sur #C6603C = 4,09:1, insuffisant */
.btn--castor:hover { background: #8F4429; border-color: #8F4429; }

.btn--clair { background:#fff; border-color:#fff; color: var(--bleu-nuit); }
.btn--clair:hover { background: var(--sable); border-color: var(--sable); color: var(--bleu-nuit); }

.btn--contour-clair { background:transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.btn--contour-clair:hover { background: rgba(255,255,255,.14); border-color:#fff; color:#fff; }

/* Garde-fou : sur fond bleu, chaque variante de bouton garde sa propre couleur de texte */
.section--marque .btn, .hero .btn { color:#fff; }
.section--marque .btn--clair, .hero .btn--clair { color: var(--bleu-nuit); }
.section--marque .btn--clair:hover, .hero .btn--clair:hover { color: var(--bleu-nuit); }

.lien-fleche {
  font-family: var(--ff-titre); font-weight:600; font-size:.9rem; color: var(--bleu-nuit);
  text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  border-bottom: 2px solid var(--castor); padding-bottom:2px;
}
.lien-fleche:hover { border-bottom-color: var(--bleu-nuit); }
.section--marque .lien-fleche, .hero .lien-fleche { color:#fff; border-bottom-color: var(--sable-texte); }
.section--marque .lien-fleche:hover, .hero .lien-fleche:hover { border-bottom-color:#fff; }

/* ----------------------------------------------------------- en-tête -- */

.entete { position:sticky; top:0; z-index:100; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom:1px solid var(--trait); }
.entete__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:78px; }
.logo img { height: 40px; width:auto; }
@media (max-width:520px) { .logo img { height: 32px; } }

.nav { display:flex; align-items:center; gap:1.75rem; }
.nav__liste { display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav__lien {
  font-family: var(--ff-titre); font-size:.9rem; font-weight:500; color: var(--encre-70);
  text-decoration:none; padding:.35rem 0; border-bottom:2px solid transparent; transition: var(--t);
}
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--bleu-nuit); border-bottom-color: var(--castor); }

.burger { display:none; background:none; border:2px solid var(--trait); border-radius:100px; padding:.5rem .7rem; cursor:pointer; }
.burger span { display:block; width:20px; height:2px; background: var(--bleu-nuit); margin:4px 0; transition: var(--t); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display:block; }
  .nav { position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--trait); padding:1rem var(--gouttiere) 1.75rem;
    max-height:calc(100dvh - 78px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition: opacity var(--t), transform var(--t); }
  .nav[data-ouvert="true"] { transform:none; opacity:1; pointer-events:auto; }
  .nav__liste { flex-direction:column; align-items:stretch; gap:0; }
  .nav__lien { padding:.95rem 0; border-bottom:1px solid var(--trait); font-size:1.02rem; }
  .nav .btn { margin-top:1.1rem; justify-content:center; }
}

/* --------------------------------------------------------------- hero -- */

.hero { background: var(--degrade-marque); color:#fff; padding-block: clamp(3rem,7vw,5rem); position:relative; overflow:hidden; }
.hero h1 { color:#fff; }
.hero__grille { display:grid; gap: clamp(2.5rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width: 920px) { .hero__grille { grid-template-columns: 1.1fr .9fr; } }
.hero__chapo { font-size: clamp(1.05rem,1.6vw,1.18rem); color: var(--encre-70); max-width:52ch; }
/* Le blanc n'est appliqué QUE sur fond bleu : hors de ce contexte, le texte
   reste sombre. Sans cette précaution, la classe posée sur une section claire
   donnait du blanc sur blanc. */
.hero .hero__chapo, .section--marque .hero__chapo { color: rgba(255,255,255,.9); }
.hero__actions { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem; }
.hero__baseline { font-family: var(--ff-titre); font-size:.7rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color: var(--castor-texte); margin:0 0 1.25rem; }
.hero .hero__baseline, .section--marque .hero__baseline { color: var(--sable-texte); }

.hero__preuve { display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--trait); }
.hero .hero__preuve, .section--marque .hero__preuve { border-top-color: rgba(255,255,255,.25); }
.preuve__valeur { font-family: var(--ff-titre); font-weight:600; font-size:1.25rem; line-height:1.15; display:block; color: var(--bleu-nuit); }
.hero .preuve__valeur, .section--marque .preuve__valeur { color:#fff; }
.preuve__label { font-family: var(--ff-titre); font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color: var(--encre-45); margin-top:.4rem; display:block; }
.hero .preuve__label, .section--marque .preuve__label { color: var(--sable-texte); }

/* ---- bloc « réglages » : la signature du site ------------------------ */

.reglages { background:#fff; border-radius: var(--rayon-lg); padding: clamp(1.5rem,3vw,2.1rem); box-shadow: 0 24px 60px -30px rgba(4,28,60,.7); }
.reglages__titre { font-family: var(--ff-titre); font-size:.64rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color: var(--encre-45); margin:0 0 1.6rem; }
.reglage { margin-bottom:1.7rem; }
.reglage:last-child { margin-bottom:0; }
.reglage__ligne { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.reglage__nom { font-family: var(--ff-titre); font-size:.88rem; font-weight:600; color: var(--encre); }
.reglage__val { font-family: var(--ff-titre); font-size:.79rem; font-weight:500; color: var(--bleu); }
.piste { position:relative; height:20px; border-bottom:2px solid rgba(37,43,47,.18);
  background-image: repeating-linear-gradient(to right, rgba(37,43,47,.18) 0 1px, transparent 1px 11px);
  background-position:bottom; background-size:100% 6px; background-repeat:repeat-x; }
.piste__zone { position:absolute; bottom:-2px; height:3px; background: var(--bleu); left:0; width:0; transition: width 1.1s cubic-bezier(.16,.84,.28,1); }
.piste__curseur { position:absolute; bottom:-7px; width:13px; height:13px; background: var(--castor); border:2.5px solid #fff; border-radius:50%; box-shadow:0 0 0 1.5px var(--castor); left:0; transform:translateX(-50%); transition:left 1.1s cubic-bezier(.16,.84,.28,1); }
.reglage__note { font-size:.82rem; color: var(--encre-45); margin:.6rem 0 0; }

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

/* ---------------------------------------------- bandeau fournisseurs -- */

.fournisseurs { background:#fff; border-block:1px solid var(--trait); padding-block:2.25rem; }
.fournisseurs__entete { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.75rem 1.5rem; margin-bottom:1.4rem; }
.fournisseurs__liste { list-style:none; margin:0; padding:0; max-width:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.fournisseur { display:inline-flex; align-items:center; gap:.05rem; border:1.5px solid var(--trait); border-radius:100px; padding:.55rem 1.15rem; background: var(--bleu-brume); transition: var(--t); }
.fournisseur__texte { display:flex; flex-direction:column; gap:.05rem; }

/* Logo fabricant : affiché dès qu'un fichier est déposé dans assets/img/marques/.
   Sans fichier, la pastille texte reste seule — le bandeau ne se casse jamais.
   Les dimensions sont calculées au build : hauteur bornée à 46 px (56 px pour un
   logo vertical), largeur bornée à 150 px, pour un poids optique comparable. */
.fournisseur__logo { display:none; object-fit:contain; }
.fournisseur[data-logo="true"] {
  padding:.7rem 1.4rem; background:#fff; border-radius:14px;
  min-height:74px; min-width:120px; justify-content:center;
}
.fournisseur[data-logo="true"] .fournisseur__logo { display:block; }
.fournisseur[data-logo="true"] .fournisseur__texte {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* Certains fabricants ne fournissent leur logo qu'en version blanche :
   la pastille passe alors en bleu de marque pour rester lisible. */
.fournisseur[data-logo="true"][data-fond="sombre"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); }
.fournisseur[data-logo="true"][data-fond="sombre"]:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.fournisseur[data-logo="true"]:hover { background:#fff; border-color: var(--castor); }
.fournisseur:hover { border-color: var(--castor); background: var(--sable-pale); transform: translateY(-2px); }
.fournisseur__nom { font-family: var(--ff-titre); font-size:.94rem; font-weight:600; line-height:1.2; color: var(--bleu-nuit); }
.fournisseur__cat { font-family: var(--ff-titre); font-size:.56rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color: var(--encre-45); }

/* ------------------------------------------------------------ cartes -- */

.carte { background:#fff; border:1px solid var(--trait); border-radius: var(--rayon-lg); padding: clamp(1.4rem,2.6vw,2rem); display:flex; flex-direction:column; transition: var(--t); }
.carte:hover { border-color: var(--bleu); transform: translateY(-3px); box-shadow:0 24px 44px -34px rgba(4,28,60,.8); }
.carte h3 { margin-bottom:.5rem; }
.carte p { font-size:.96rem; color: var(--encre-70); flex:1; }
.carte__num { font-family: var(--ff-titre); font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--castor-texte); display:block; margin-bottom:.9rem; }
.carte__liste { list-style:none; margin:0 0 1.4rem; padding:0; font-size:.92rem; }
.carte__liste li { padding:.4rem 0 .4rem 1.15rem; position:relative; border-bottom:1px solid var(--trait); color: var(--encre-70); }
.carte__liste li::before { content:""; position:absolute; left:0; top:1.05em; width:6px; height:2px; background: var(--castor); }
.carte .lien-fleche { align-self:flex-start; margin-top:auto; }
.section--marque .carte { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.section--marque .carte p { color: rgba(255,255,255,.85); }
.section--marque .carte:hover { border-color:#fff; }

/* -------------------------------------------------- fiches produits -- */

.filtres { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filtre { font-family: var(--ff-titre); font-size:.84rem; font-weight:600; padding:.5rem 1.15rem; border-radius:100px; cursor:pointer;
  border:1.5px solid var(--trait); background:transparent; color: var(--encre-70); transition: var(--t); }
.filtre:hover { border-color: var(--bleu); color: var(--bleu-nuit); }
.filtre[aria-pressed="true"] { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color:#fff; }

.produits { display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }

.produit { background:#fff; border:1px solid var(--trait); border-radius: var(--rayon-lg); overflow:hidden; display:flex; flex-direction:column; transition: var(--t); }
.produit:hover { border-color: var(--bleu); transform: translateY(-3px); box-shadow:0 22px 40px -34px rgba(4,28,60,.8); }

/* Emplacement visuel : se remplit dès qu'une image est déposée dans
   assets/img/produits/. Sans image, filigrane castor discret. */
.produit__media { position:relative; aspect-ratio:4/3; background: var(--bleu-brume); border-bottom:1px solid var(--trait); }
.produit__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:1.1rem; }
.produit__media[data-vide="true"] { aspect-ratio: 16/5; }
.produit__media[data-vide="true"] img { visibility:hidden; }
.produit__media::after { content:""; position:absolute; inset:0; background:url("../img/castor.png") center/34% no-repeat; opacity:.1; pointer-events:none; display:none; }
.produit__media[data-vide="true"]::after { display:block; }

.produit__corps { padding:1.25rem 1.4rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.produit__nom { font-family: var(--ff-titre); font-size:1.06rem; font-weight:600; line-height:1.3; margin:0 0 .5rem; color: var(--bleu-nuit); }
.produit__desc { font-size:.92rem; color: var(--encre-70); margin:0 0 1rem; flex:1; }
.produit__meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; }

.etiq { font-family: var(--ff-titre); font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .65rem; border-radius:100px; white-space:nowrap; }
.etiq--marque { background: var(--sable-pale); color: #8F4429; }   /* 5,9:1 sur le fond sable pâle */
.etiq--loc    { background: var(--bleu-pale); color: var(--bleu-nuit); }
.etiq--vente  { background: rgba(37,43,47,.07); color: var(--encre-70); }
.etiq--lpp    { background: var(--bleu-nuit); color:#fff; }

/* ------------------------------------------------------------ étapes -- */

.etapes { counter-reset: etape; }
.etape { display:grid; grid-template-columns:auto 1fr; gap:1rem 1.6rem; padding:1.8rem 0; border-top:1px solid var(--trait); }
.etape:last-child { border-bottom:1px solid var(--trait); }
.section--marque .etape { border-color: rgba(255,255,255,.22); }
.etape__num { counter-increment: etape; font-family: var(--ff-titre); font-weight:600; font-size:.75rem; letter-spacing:.14em; color: var(--castor-texte); padding-top:.4rem; }
.etape__num::before { content: counter(etape, decimal-leading-zero); }
.section--marque .etape__num { color: var(--sable-texte); }
.etape h3 { margin-bottom:.3rem; }
.etape p { margin:0; font-size:.95rem; color: var(--encre-70); }
.section--marque .etape p { color: rgba(255,255,255,.85); }

/* -------------------------------------------------- encadré / castor -- */

.encadre { border-left:4px solid var(--castor); background:#fff; padding:1.35rem 1.6rem; border-radius:0 var(--rayon) var(--rayon) 0; font-size:.94rem; }
.encadre p:last-child { margin-bottom:0; }
.encadre strong { color: var(--bleu-nuit); }

.castor-conseil { display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  background: var(--sable-pale); border-radius: var(--rayon-lg); padding:1.4rem 1.6rem; }
.castor-conseil img { width:56px; flex:none; }
.castor-conseil p { margin:0; font-size:.94rem; color: var(--encre-70); }
.castor-conseil strong { display:block; font-family: var(--ff-titre); font-weight:600; color: #8F4429;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:.4rem; }

.mention-dm { font-size:.8rem; color: var(--encre-45); line-height:1.55; border:1px dashed var(--trait); padding:1rem 1.15rem; border-radius: var(--rayon); }

/* -------------------------------------------------------- formulaire -- */

.form { display:grid; gap:1.1rem; }
.form--2col { grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .form--2col { grid-template-columns:1fr; } }
.champ { display:grid; gap:.35rem; }
.champ--2 { grid-column: span 2; }
@media (max-width:640px){ .champ--2 { grid-column: span 1; } }
.champ label { font-family: var(--ff-titre); font-size:.85rem; font-weight:600; color: var(--encre); }
.champ .aide { font-size:.78rem; color: var(--encre-45); font-weight:400; }
.champ input, .champ select, .champ textarea {
  font-family: var(--ff-texte); font-size:.97rem; color: var(--encre);
  padding:.78rem .95rem; border:1.5px solid rgba(37,43,47,.2); border-radius: var(--rayon); background:#fff; width:100%; transition: border-color var(--t); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); }
.champ textarea { min-height:140px; resize:vertical; }
.consentement { display:flex; gap:.75rem; align-items:flex-start; font-size:.86rem; color: var(--encre-70); }
.consentement input { width:18px; height:18px; margin-top:.2rem; flex:none; accent-color: var(--bleu-nuit); }
.pot-de-miel { position:absolute; left:-9999px; opacity:0; height:0; }
.form__retour { padding:1rem 1.15rem; border-radius: var(--rayon); font-size:.9rem; display:none; }
.form__retour[data-etat="ok"] { display:block; background: var(--bleu-pale); border-left:4px solid var(--bleu); }
.form__retour[data-etat="erreur"] { display:block; background:#FBE9E4; border-left:4px solid var(--castor-fonce); }

/* --------------------------------------------------------------- FAQ -- */

.faq details { border-top:1px solid var(--trait); padding:1.3rem 0; }
.faq details:last-of-type { border-bottom:1px solid var(--trait); }
.faq summary { cursor:pointer; list-style:none; font-family: var(--ff-titre); font-size:1.06rem; font-weight:600; color: var(--bleu-nuit); display:flex; justify-content:space-between; gap:1.5rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color: var(--castor-texte); flex:none; font-weight:600; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:.9rem 0 0; font-size:.95rem; color: var(--encre-70); }

/* ------------------------------------------------------------ footer -- */

.pied { background: var(--bleu-fonce); color: rgba(255,255,255,.8); padding-block: clamp(3rem,6vw,4.5rem) 2rem; font-size:.92rem; }
.pied a { color:#fff; text-decoration:none; }
.pied a:hover { text-decoration:underline; }
.pied h4 { font-family: var(--ff-titre); font-size:.62rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color: var(--sable-texte); margin:0 0 1.1rem; }
.pied__grille { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.pied__marque img { height:52px; margin-bottom:1.1rem; }
.pied__liste { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pied__bas { margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.2); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.8rem; color: rgba(255,255,255,.65); }
.pied__legal { display:flex; flex-wrap:wrap; gap:1.25rem; list-style:none; margin:0; padding:0; }

/* ------------------------------------------------------ showroom -- */

.coordonnees { background:#fff; border:1px solid var(--trait); border-radius: var(--rayon-lg); padding: clamp(1.4rem,2.6vw,1.9rem); margin-top:1.5rem; }
.coordonnees p { max-width:none; }

.horaires { display:grid; gap:.1rem; }
.horaire { display:flex; justify-content:space-between; gap:1.5rem; padding:.55rem 0; border-bottom:1px solid var(--trait); font-size:.95rem; }
.horaire:last-child { border-bottom:0; }
.horaire__jour { font-family: var(--ff-titre); font-weight:600; color: var(--encre); }
.horaire__h { color: var(--encre-70); text-align:right; }
.horaire[data-aujourdhui="true"] { background: var(--sable-pale); margin-inline:-.6rem; padding-inline:.6rem; border-radius: var(--rayon); }
.horaire[data-aujourdhui="true"] .horaire__jour::after { content:" · aujourd’hui"; font-weight:500; color: var(--castor-texte); font-size:.8em; }

.etat-ouverture { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--ff-titre); font-weight:600; font-size:.9rem; margin-bottom:1rem; }
.etat-ouverture::before { content:""; width:9px; height:9px; border-radius:50%; background: var(--encre-45); flex:none; }
.etat-ouverture[data-ouvert="true"] { color:#177245; }
.etat-ouverture[data-ouvert="true"]::before { background:#177245; }
.etat-ouverture[data-ouvert="false"] { color: var(--castor-texte); }
.etat-ouverture[data-ouvert="false"]::before { background: var(--castor-texte); }

/* Carte : aperçu maison tant que Google n'est pas sollicité */
.colonne-carte { position:sticky; top:100px; }
@media (max-width: 900px) { .colonne-carte { position:static; } }

.carte-lieu__apercu {
  /* ratio calé sur celui du plan (660x460) : aucun rognage, Toulon et Hyères
     restent visibles — c'est tout l'intérêt du plan de situation. */
  /* pas de min-height : combiné au ratio, il forcerait une largeur
     supérieure à l'écran sur mobile. La largeur pilote, la hauteur suit. */
  position:relative; width:100%; aspect-ratio:1240/766; border-radius: var(--rayon-lg); overflow:hidden;
  background: linear-gradient(160deg, #DCE9F5 0%, #C9DCEF 55%, #BFD4E8 100%);
  border:1px solid var(--trait);
}
.carte-lieu__plan {
  position:absolute; inset:0; width:100%; height:100%; max-width:100%; object-fit:cover;
  animation: plan-apparait .6s ease both;
}
@keyframes plan-apparait { from { opacity:0; transform:scale(1.03); } to { opacity:1; transform:none; } }
/* Bouton posé en bas de carte, sur un léger voile qui ne masque pas le repère */
.carte-lieu__bouton { position:absolute; z-index:2; left:50%; bottom:.9rem; max-width:calc(100% - 1.6rem); font-size:.82rem; padding:.7rem 1.2rem; transform:translateX(-50%); white-space:nowrap; box-shadow:0 6px 18px -6px rgba(4,28,60,.5); }
.carte-lieu__apercu::after { content:""; position:absolute; inset:auto 0 0 0; height:5.5rem; pointer-events:none;
  background:linear-gradient(to top, rgba(238,242,246,.92), rgba(238,242,246,0)); }
.carte-lieu__apercu:has(iframe)::after { display:none; }
.carte-lieu__note { margin:.9rem 0 0; font-size:.79rem; color: var(--encre-45); max-width:52ch; }
.carte-lieu__apercu iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.carte-lieu__apercu:has(iframe) { aspect-ratio:4/3; }
.carte-lieu__liens { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.carte-lieu__liens .btn { padding:.6rem 1.1rem; font-size:.83rem; }

.rappel-showroom {
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  background: var(--sable-pale); border-radius:100px; padding:.6rem 1.3rem; font-size:.9rem;
  color: var(--encre-70); margin-top:1.6rem; width:fit-content;
}
.rappel-showroom strong { font-family: var(--ff-titre); color: var(--castor-texte); }

.note-avis { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color: var(--encre-70); }
.note-avis__score { font-family: var(--ff-titre); font-weight:700; color: var(--bleu-nuit); font-size:1.05rem; }
.note-avis__etoiles { color: #966612; letter-spacing:.05em; }   /* ambre assombri pour rester lisible */
.hero .note-avis, .section--marque .note-avis { color: rgba(255,255,255,.9); }
.hero .note-avis__score, .section--marque .note-avis__score { color:#fff; }
.hero .note-avis__etoiles, .section--marque .note-avis__etoiles { color: var(--sable-texte); }
.hero .note-avis a, .section--marque .note-avis a { color:#fff; }

/* --------------------------------------------------- bandeau cookies -- */

.cookies { position:fixed; inset:auto 0 0 0; z-index:150; background:#fff; border-top:3px solid var(--bleu-nuit);
  box-shadow:0 -16px 44px -24px rgba(4,28,60,.7); padding:1.5rem var(--gouttiere);
  transform:translateY(115%); transition: transform 420ms cubic-bezier(.2,.8,.3,1); }
.cookies[data-visible="true"] { transform:none; }
.cookies__inner { max-width: var(--max); margin-inline:auto; display:grid; gap:1.25rem; }
@media (min-width:900px){ .cookies__inner { grid-template-columns:1fr auto; align-items:center; } }
.cookies p { font-size:.89rem; margin:0; color: var(--encre-70); max-width:75ch; }
.cookies__titre { font-family: var(--ff-titre); font-weight:600; font-size:1.1rem; margin:0 0 .4rem; color: var(--bleu-nuit); }
.cookies__actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.cookies__actions .btn { padding:.7rem 1.3rem; font-size:.84rem; }
.cookies__detail { margin-top:1.1rem; }
.cookies__detail summary { cursor:pointer; font-family: var(--ff-titre); font-size:.84rem; font-weight:600; color: var(--bleu); }
.cookies__prefs { display:grid; gap:.8rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--trait); }
.cookies__pref { display:flex; gap:.75rem; align-items:flex-start; font-size:.85rem; }
.cookies__pref input { width:18px; height:18px; margin-top:.15rem; flex:none; accent-color: var(--bleu-nuit); }
.cookies__pref input:disabled { opacity:.5; }

/* --------------------------------------------------------- pages texte */

.texte-legal h2 { margin-top:2.75rem; font-size: clamp(1.35rem,2.6vw,1.8rem); }
.texte-legal h3 { margin-top:1.9rem; font-size:1.06rem; font-family: var(--ff-titre); font-weight:600; }
.texte-legal p, .texte-legal li { font-size:.97rem; color: var(--encre-70); }
.texte-legal li { margin-bottom:.5rem; }
.texte-legal table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.88rem; }
.texte-legal th, .texte-legal td { text-align:left; padding:.75rem .9rem; border:1px solid var(--trait); vertical-align:top; }
.texte-legal th { background: var(--bleu-pale); font-family: var(--ff-titre); font-weight:600; color: var(--bleu-nuit); }

/* Tableaux légaux : défilement horizontal sur mobile plutôt que débordement */
.texte-legal .tableau-defilant { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; }
.texte-legal .tableau-defilant table { margin:0; min-width:520px; }

.a-completer { background: var(--sable); color:#5E4110; padding:.1rem .45rem; border-radius:3px; font-weight:600; font-size:.9em; }

.fil { font-family: var(--ff-titre); font-size:.64rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color: var(--encre-45); margin-bottom:1.25rem; }
.fil a { color: var(--encre-45); text-decoration:none; }
.fil a:hover { color: var(--bleu); }

[data-reveal] { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].vu { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } }