/* Bonjour Voisin — direction « Plaque » (enseigne émaillée) : blanc, gris clair, bleu émail ; rouge seulement pour les erreurs.
   Young Serif (titres), Source Sans 3 (texte), Barlow Condensed (plaque, chiffres). Polices auto-hébergées, aucune ressource externe.
   Toujours en clair (pas de thème sombre). */
@font-face{font-family:"Young Serif";src:url("polices/young-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("polices/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("polices/source-sans-3-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("polices/source-sans-3-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("polices/barlow-condensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("polices/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fond:#F3F4F6;          /* gris clair */
  --feuille:#FFFFFF;
  --encre:#1C2433;
  --encre-douce:#2E3646;
  --gris:#5B6474;
  --filet:#D3D8E0;
  --bord:#8E98A8;          /* bord des champs (contraste 3:1) */
  --email:#1B3F8B;         /* bleu émail : liens, boutons, plaque */
  --email-fonce:#132E66;
  --email-clair:#E7ECF6;
  --rouge:#B42318;         /* erreurs seulement */
  --rouge-clair:#FDECEA;
  --titre:"Young Serif",Georgia,"Times New Roman",serif;
  --texte:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --plaque:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Jamais plus étroit qu'un petit téléphone : sous 32 px, .conteneur tombe à 0 et chaque lettre passe à la ligne. */
body{min-width:320px;margin:0;background:var(--feuille);color:var(--encre);font:400 1.125rem/1.55 var(--texte);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-wrap:break-word}
img,svg{max-width:100%;display:block}
a{color:var(--email);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--email);outline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font:400 clamp(2.5rem,7.6vw,4rem)/1.04 var(--titre);letter-spacing:-.01em}
h2{font:400 clamp(1.9rem,4.6vw,2.5rem)/1.1 var(--titre);margin-bottom:12px}
h3{font:700 1.15rem/1.3 var(--texte);margin-bottom:6px}
p{margin:0 0 1em}
.conteneur{width:min(1140px,100% - 32px);margin-inline:auto}
@media (min-width:900px){.conteneur{width:min(1140px,100% - 64px)}}
.evitement{position:absolute;left:16px;top:-120px;z-index:50;background:var(--encre);color:#fff;padding:12px 16px}
.evitement:focus{top:12px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Emplacements à remplir (avant mise en ligne : node bonjour-voisin.mjs remplir …) */
[data-a-remplir]{outline:2px dashed var(--email);outline-offset:2px;background:var(--email-clair);color:var(--encre);padding:0 4px}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;border-radius:4px;border:2px solid transparent;font:700 1.0625rem/1.2 var(--texte);text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease}
.bouton-plein{background:var(--email);color:#fff}
.bouton-plein:hover{background:var(--email-fonce)}
.bouton-contour{border-color:var(--email);color:var(--email);background:var(--feuille)}
.bouton-contour:hover{background:var(--email-clair)}
.bouton-petit{min-height:44px;padding:10px 16px;font-size:.95rem;white-space:nowrap}
.entete .bouton-petit{display:inline-block;line-height:24px}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.boutons{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.lien-fort{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--encre)}

/* ---------- En-tête ---------- */
.entete{background:var(--feuille);border-bottom:1px solid var(--filet)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--encre);text-decoration:none;min-height:44px;white-space:nowrap}
.logo-mot{font:400 1.375rem/1 var(--titre)}
.mini-plaque{display:inline-block;flex:none;background:var(--email);color:#fff;border-radius:5px;padding:3px}
.mini-plaque>span{display:block;border:1.5px solid #fff;border-radius:3px;font:600 17px/1 var(--plaque);letter-spacing:.02em;padding:6px 7px 5px}
.nav{display:none}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;color:var(--encre);text-decoration:none;font-weight:600;font-size:1rem}
.nav a:hover{text-decoration:underline}
@media (min-width:980px){.nav{display:block}}
@media (max-width:640px){.long{display:none}}
@media (max-width:360px){.logo-mot{font-size:1.15rem}}

/* ---------- Accroche : la plaque ---------- */
.hero{background:var(--fond);padding:40px 0 52px;border-bottom:1px solid var(--filet)}
.hero-grille{display:grid;gap:40px;align-items:center}
.lieux{font-weight:600;font-size:1rem;color:var(--gris);margin:0 0 16px}
.hero .intro{font-size:clamp(1.15rem,2.4vw,1.31rem);line-height:1.5;color:var(--encre-douce);max-width:32ch;margin:22px 0 22px}
.prix-eclair{color:var(--gris);margin:0 0 28px}
.prix-eclair strong{color:var(--encre);font-size:1.15em}
.vitrine{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.plaque{width:100%;max-width:520px;background:var(--email);color:#fff;border-radius:14px;padding:7px;box-shadow:0 2px 0 #0b1f47,0 24px 40px -24px rgba(13,31,71,.6)}
.plaque-in{border:3px solid #fff;border-radius:9px;padding:18px 16px 20px;text-align:center}
.plaque small{display:block;font:500 clamp(1.1rem,4.4vw,1.375rem)/1 var(--plaque);letter-spacing:.04em;margin-bottom:8px}
.plaque strong{display:block;font:600 clamp(1.6rem,7.4vw,2.875rem)/1 var(--plaque);white-space:nowrap}
.horaires-exemple{width:100%;max-width:520px;border-collapse:collapse;background:var(--feuille);border:1px solid var(--filet);border-radius:6px;font-size:1rem}
.horaires-exemple th,.horaires-exemple td{padding:8px 20px;font-weight:400;text-align:left}
.horaires-exemple td{text-align:right;white-space:nowrap}
.horaires-exemple tr+tr th,.horaires-exemple tr+tr td{border-top:1px dotted var(--filet)}
.horaires-exemple tr:first-child>*{padding-top:14px}
.horaires-exemple tr:last-child>*{padding-bottom:14px}
.horaires-exemple .ferme{color:var(--gris)}
.vitrine figcaption{font-size:.95rem;color:var(--gris);text-align:center;max-width:40ch}
@media (min-width:900px){
  .hero{padding:64px 0 72px}
  .hero-grille{grid-template-columns:1.1fr 1fr;gap:56px}
}
@media (max-width:599px){.hero .boutons .bouton{width:100%}}

/* Téléphone (cadre des captures d'exemple) */
.telephone{position:relative;width:min(270px,64vw);aspect-ratio:390/844;border:9px solid var(--encre);border-radius:34px;overflow:hidden;background:#000}
.telephone img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- Sections ---------- */
.section{padding:56px 0;background:var(--fond);border-top:1px solid var(--filet)}
.section-blanche,.section-bon{background:var(--feuille)}
.chapeau{color:var(--encre-douce);font-size:1.15rem;max-width:56ch;margin:0 0 32px}
@media (min-width:900px){.section{padding:88px 0}}

/* Étapes (une vraie suite : numérotées) */
.etapes{list-style:none;margin:0;padding:0;display:grid;counter-reset:etape;border-top:1px solid var(--filet)}
.etape{counter-increment:etape;padding:20px 0 18px 52px;position:relative;border-bottom:1px solid var(--filet)}
.etape::before{content:counter(etape);position:absolute;left:0;top:14px;font:600 2.4rem/1 var(--plaque);color:var(--email)}
.etape p{margin:0;color:var(--encre-douce)}
@media (min-width:900px){.etapes{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--filet)}.etape{border-bottom:0;padding:26px 28px 26px 60px}.etape+.etape{border-left:1px solid var(--filet)}.etape::before{left:20px;top:22px}}

/* (Formulaire de maquette retiré le 09/11/2026 : la maquette se demande en créant son compte dans l'espace client.) */

/* ---------- Exemples ---------- */
.exemples{list-style:none;margin:0 -16px;padding:4px 16px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.exemples li{scroll-snap-align:start}
.exemples figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.exemples .telephone{width:200px;border-width:7px;border-radius:28px}
.exemples figcaption{font-weight:600;text-align:center;line-height:1.3}
.exemples figcaption small{display:block;font-weight:400;font-size:.88rem;color:var(--gris)}
.exemples:focus-visible{outline-offset:-3px}
@media (min-width:900px){.exemples{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:40px 24px}.exemples .telephone{width:min(220px,100%)}}

/* ---------- Inclus ---------- */
.inclus{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--filet)}
.inclus li{padding:18px 0;border-bottom:1px solid var(--filet)}
.inclus p{margin:0;color:var(--encre-douce)}
@media (min-width:700px){.inclus{grid-template-columns:1fr 1fr;column-gap:48px}}
@media (min-width:1000px){.inclus{grid-template-columns:repeat(3,1fr)}}

/* ---------- Tarifs ---------- */
.prix-depart{display:grid;gap:18px 48px;background:var(--feuille);border-top:4px solid var(--email);padding:24px 20px;margin-bottom:36px}
.prix-depart .montant{margin:0;font:600 clamp(3.2rem,12vw,4.5rem)/1 var(--plaque);color:var(--email)}
.prix-depart .montant small{display:block;font:400 1rem/1.4 var(--texte);color:var(--gris);margin-top:6px}
.prix-depart .detail{color:var(--encre-douce);margin:0}
.criteres{margin:8px 0 12px;padding-left:1.2em;color:var(--encre-douce)}
.criteres li{margin:2px 0}
@media (min-width:760px){.prix-depart{grid-template-columns:auto 1fr;padding:30px 32px;align-items:start}}
.sous-titre-tarifs{font:400 1.5rem/1.2 var(--titre);margin:0 0 14px}
.paiements{list-style:none;margin:0 0 24px;padding:0;display:grid;background:var(--feuille)}
.paiements li{display:grid;gap:4px;padding:18px 20px}
.paiements li+li{border-top:1px solid var(--filet)}
.paiements strong{font-size:1.1rem}
.paiements span{color:var(--gris)}
@media (min-width:760px){.paiements{grid-template-columns:repeat(3,1fr)}.paiements li+li{border-top:0;border-left:1px solid var(--filet)}}
.tout-compris{color:var(--encre-douce);margin:0;max-width:70ch}
.paiement{margin-top:22px}

/* ---------- Options ---------- */
.options{display:grid;gap:40px}
.option{display:flex;flex-direction:column;border-top:4px solid var(--email);padding-top:18px}
.option-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:6px}
.option-tete h3{font:400 1.6rem/1.15 var(--titre);margin:0}
.option-prix{margin:0;font:600 2.2rem/1 var(--plaque);color:var(--email);white-space:nowrap}
.option-prix small{font:400 .95rem var(--texte);color:var(--gris);margin-left:6px}
.option p{color:var(--encre-douce);margin:10px 0 0}
.option-image{display:block;margin-top:18px;border:1px solid var(--filet);background:#0f1115}
.option-image img{width:100%;height:auto}
.option-image:focus-visible{outline-offset:2px}
@media (min-width:900px){.options{grid-template-columns:1fr 1fr;gap:48px}}
.pack{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:40px;padding:22px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.pack p{margin:0;max-width:52ch;color:var(--encre-douce)}
.pack strong{color:var(--encre)}
@media (max-width:599px){.pack .bouton{width:100%}}
.sante{margin-top:18px;font-size:1rem;color:var(--gris);max-width:80ch}

/* ---------- Questions ---------- */
.faq{max-width:820px;border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-weight:600;font-size:1.12rem;cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--email);border-bottom:2px solid var(--email);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{color:var(--encre-douce);margin:0 0 18px;max-width:62ch}

/* ---------- Qui suis-je ---------- */
.moi{display:grid;gap:8px 56px}
.moi-texte p{font-size:1.15rem;max-width:58ch;color:var(--encre-douce)}
@media (min-width:900px){.moi{grid-template-columns:340px 1fr}}

/* ---------- Contact ---------- */
.contact{display:grid;gap:28px}
@media (min-width:900px){.contact{grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}}
.appel{margin:0}
.bouton-appel{flex-direction:column;align-items:flex-start;gap:2px;min-height:60px;padding:12px 26px}
.bouton-appel small{font-weight:400;font-size:.95rem}
@media (max-width:599px){.bouton-appel{width:100%}}
.coordonnees{margin:0;background:var(--feuille);border-top:4px solid var(--email)}
.coordonnees>div{padding:14px 20px}
.coordonnees>div+div{border-top:1px solid var(--filet)}
.coordonnees dt{font-size:.9rem;color:var(--gris)}
.coordonnees dd{margin:0;font-weight:600}
.coordonnees a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Pied ---------- */
.pied{padding:40px 0 32px;background:var(--feuille);border-top:1px solid var(--filet);font-size:.97rem;color:var(--gris)}
.pied .conteneur{display:grid;gap:14px}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 18px}
.pied ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--encre)}
.pied p{margin:0}

/* ---------- Pages légales et page introuvable ---------- */
.legal{padding:44px 0 72px;background:var(--feuille)}
.legal .conteneur{max-width:780px}
.legal h1{font-size:clamp(2.1rem,6vw,2.9rem);margin-bottom:12px}
.legal h2{font-size:1.5rem;margin:36px 0 10px}
.legal p,.legal li{color:var(--encre)}
.legal .maj{color:var(--gris)}
.legal .encadre{border-left:4px solid var(--email);background:var(--fond);padding:14px 18px;margin:18px 0}
.legal .encadre p:last-child{margin:0}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 16px}
.legal th,.legal td{text-align:left;border-bottom:1px solid var(--filet);padding:10px 8px 10px 0;vertical-align:top}
.retour{margin:0 0 24px}