:root{
  --papier:#f6f1e4; --papier-2:#ede6d4; --carte:#fffdf8;
  --encre:#1a1712; --encre-2:#3a3226; --gris:#524f44;
  --or:#c9a84c; --or-fonce:#6b5320; --or-texte:#5c4718;
  --trait:#d9cfb6;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Source Sans 3', Verdana, sans-serif;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:19px;line-height:1.6;color:var(--encre);background:var(--papier);padding-bottom:84px}
@media(min-width:900px){body{font-size:20px;padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--or-texte);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--or-fonce);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.etroit{max-width:720px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--encre)}
h1{font-size:clamp(36px,7vw,58px)}
h2{font-size:clamp(30px,5vw,42px);margin-bottom:14px}
h3{font-size:27px;margin-bottom:6px}
p+p{margin-top:12px}
.sur-titre{font-size:17px;color:var(--or-texte);font-weight:700;margin-bottom:8px}
section{padding:52px 0;border-top:1px solid var(--trait)}
.saut{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:12px 16px;z-index:99}
.saut:focus{left:12px;top:12px}

/* En-tête */
header{background:var(--carte);border-bottom:1px solid var(--trait)}
.entete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;max-width:1080px;margin:0 auto}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre)}
.marque img{width:40px;height:51px;object-fit:contain}
.marque span{font-family:var(--serif);font-size:26px;font-weight:600}
nav.menu{display:none;gap:22px}
nav.menu a{color:var(--encre-2);text-decoration:none;font-size:18px}
nav.menu a:hover{text-decoration:underline}
@media(min-width:900px){nav.menu{display:flex}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 22px;border-radius:var(--r);font-family:var(--sans);font-size:19px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-tel{background:var(--or-fonce);color:#fff}
.btn-tel:hover{background:#584417}
.btn-mail{background:var(--carte);color:var(--encre);border-color:var(--encre)}
.btn-mail:hover{background:var(--papier-2)}
.btn svg{width:22px;height:22px;flex:none}
.entete .btn{min-height:48px;padding:8px 16px;font-size:18px}

/* Accueil */
.hero{padding:34px 0 44px;border-top:0}
.hero-grille{display:grid;gap:30px}
@media(min-width:900px){.hero-grille{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero p.chapeau{font-size:21px;margin:16px 0 20px;color:var(--encre-2)}
.prix-rapides{list-style:none;display:grid;gap:8px;margin-bottom:22px}
.prix-rapides li{background:var(--carte);border:1px solid var(--trait);border-left:5px solid var(--or);border-radius:8px;padding:10px 14px}
.prix-rapides b{font-size:21px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions .btn{flex:1 1 auto;white-space:normal}
.rappel{margin-top:12px;font-size:18px;color:var(--gris)}
.duo{display:grid;grid-template-columns:323fr 457fr;gap:10px;align-items:end}
.duo figure{margin:0}
.duo img{border-radius:6px;border:1px solid var(--trait);background:#222}
.duo figcaption{font-size:16px;font-weight:700;margin-top:6px;color:var(--encre-2)}
/* Cadres identiques pour le duo C4 de l'accueil */
.duo--c4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.duo--c4 figure {
  min-width: 0;
}
.duo--c4 img {
  width: 100%;
  height: auto;
  aspect-ratio: 457 / 640;
  object-fit: contain;
  object-position: center;
  background: var(--papier-2);
}
.legende{font-size:17px;color:var(--gris);margin-top:12px}

/* Toussaint */
.bandeau{background:var(--encre);color:var(--papier);padding:22px 0;border:0}
.bandeau p{font-size:19px}
.bandeau b{color:#f0dca0}
.bandeau a{color:#f0dca0;font-weight:700}

/* Étapes */
.etapes{list-style:none;display:grid;gap:16px;counter-reset:e;margin-top:22px}
@media(min-width:900px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:22px;counter-increment:e}
.etapes li::before{content:counter(e);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--or);color:var(--encre);font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:10px}

/* Tarifs */
.formules{display:grid;gap:16px;margin-top:22px}
@media(min-width:900px){.formules{grid-template-columns:repeat(3,1fr)}}
.formule{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px}
.formule .prix{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--or-texte)}
.formule .pour{font-weight:700}
.formule ul{padding-left:20px}
.option{margin-top:16px;background:var(--papier-2);border-radius:var(--r);padding:20px 22px}
.encadre{margin-top:16px;border:2px solid var(--or);border-radius:var(--r);padding:18px 22px;background:var(--carte)}
.petit{font-size:17px;color:var(--gris);margin-top:14px}

/* Avant-après */
.exemples{display:grid;gap:34px;margin-top:22px}
@media(min-width:900px){.exemples{grid-template-columns:1fr 1fr}}
.compare{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--trait);background:#222;touch-action:pan-y}
.compare img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.compare .apres{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--pos,50%))}
.compare .ligne{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.compare .poignee{position:absolute;top:50%;left:var(--pos,50%);width:48px;height:48px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--encre)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.etiquettes{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-top:6px}
.exemples figcaption{font-size:18px;margin-top:8px}
.exemples figcaption .verite{display:block;margin-top:6px;font-size:17px;color:var(--or-texte);font-weight:700}

/* IA */
.ia{background:var(--carte)}
.ia blockquote{font-family:var(--serif);font-size:clamp(26px,4vw,34px);line-height:1.25;border-left:5px solid var(--or);padding-left:18px;margin:6px 0 18px}
ul.contraste{list-style:none;display:grid;gap:10px;margin-top:6px}ul.contraste li{background:var(--papier);border-radius:8px;padding:14px 16px}
.tableau{width:100%;border-collapse:collapse;margin-top:18px;font-size:18px}
.tableau th,.tableau td{border-bottom:1px solid var(--trait);padding:12px 8px;text-align:left;vertical-align:top}
.tableau thead th{font-family:var(--serif);font-size:22px}
.tableau tbody th{font-weight:700;width:24%}

/* Questions */
details{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);margin-top:10px}
summary{cursor:pointer;padding:18px 52px 18px 20px;font-weight:700;font-size:19px;list-style:none;position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:28px;color:var(--or-texte)}
details[open] summary::after{content:"−"}
details .rep{padding:0 20px 20px}

/* Artisan */
.artisan-grille{display:grid;gap:26px}
@media(min-width:900px){.artisan-grille{grid-template-columns:.8fr 1.2fr;align-items:start}}
.artisan-grille img{border-radius:8px;border:1px solid var(--trait);max-width:360px;width:100%}
.citation{font-family:var(--serif);font-size:28px;font-style:italic;line-height:1.25;margin:16px 0}
.dessin{display:flex;gap:16px;align-items:center;margin-top:18px}
.dessin img{width:120px;border-radius:6px}
.dessin p{font-size:17px;color:var(--gris)}

/* Paiement */
.payer{background:var(--papier-2)}
.payer .encadre{border-color:var(--encre)}
.liens-paiement{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.liens-paiement .btn{flex:1 1 260px}
.credit{font-size:17px;margin-top:14px}

/* Contact */
.contact{background:var(--encre);color:var(--papier);border:0}
.contact h2{color:var(--papier)}
.contact a{color:#f0dca0}
.contact .btn-mail{background:transparent;color:var(--papier);border-color:var(--papier)}
.contact .btn-tel{background:#f0dca0;color:var(--encre)}
.contact .btn-tel:hover{background:#e8d49a}
.contact .exemple{background:#2a251c;border-radius:8px;padding:14px 16px;margin:16px 0;font-size:18px}
footer{background:#0e0e0b;color:#d9d2bf;font-size:17px;padding:28px 0 36px}
footer a{color:#f0dca0}
footer p+p{margin-top:8px}

/* Barre du bas, téléphone */
.barre{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--carte);border-top:1px solid var(--trait);box-shadow:0 -4px 16px rgba(0,0,0,.08);z-index:50}
.barre.cachee{transform:translateY(110%)}.barre{transition:transform .25s}
.barre .btn{flex:1;min-height:56px;font-size:18px;padding:8px 10px}
@media(min-width:900px){.barre{display:none}}

/* Pages intérieures */
.page-hero{padding:34px 0 26px;border-top:0}
.page-hero h1{font-size:clamp(34px,6vw,50px)}
.page-hero .chapeau{font-size:21px;margin-top:14px;color:var(--encre-2)}
.contenu h2{margin-top:8px}
.contenu h3{margin-top:22px}
.contenu h4{font-size:20px;margin-top:16px}
.contenu ul,.contenu ol{padding-left:24px;margin:10px 0}
.contenu li+li{margin-top:6px}
.contenu blockquote{border-left:5px solid var(--or);padding:6px 0 6px 18px;margin:16px 0;color:var(--encre-2)}
.contenu table{width:100%;border-collapse:collapse;margin:16px 0;font-size:18px;display:block;overflow-x:auto}
.contenu th,.contenu td{border-bottom:1px solid var(--trait);padding:10px 8px;text-align:left;vertical-align:top}
.contenu small{font-size:17px;color:var(--gris)}
.contenu figure{margin:18px 0}
.contenu figure>img{border-radius:8px;border:1px solid var(--trait)}
.contenu figcaption{font-size:17px;color:var(--gris);margin-top:6px}
.contenu .meta{font-size:17px;font-weight:700;color:var(--or-texte);margin-top:14px}
.contenu video{width:100%;max-width:360px;border-radius:8px;background:#000;margin:12px 0}
.contenu .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.contenu hr{border:0;border-top:1px solid var(--trait);margin:22px 0}
.contenu p.btn-ligne{margin-top:18px}
.avis-candidat{background:#fff4d6;border:2px solid var(--or);border-radius:var(--r);padding:16px 20px;margin:16px 0}
.fil{font-size:17px;margin-bottom:6px}

.menu-mobile{border-top:1px solid var(--trait)}
.menu-mobile summary{padding:12px 20px;font-weight:700;min-height:48px;list-style:none;cursor:pointer}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile summary::before{content:"☰  "}
.menu-mobile nav{display:grid;padding:0 20px 14px}
.menu-mobile nav a{padding:12px 0;border-bottom:1px solid var(--trait);color:var(--encre);text-decoration:none;font-size:19px}
@media(min-width:900px){.menu-mobile{display:none}}
nav.menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:3px}
nav.menu{gap:18px}

.contenu article{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:20px 22px;margin:14px 0}
.contenu section.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0;border:0}
.contenu section.trio figure{margin:0}
.contenu section{padding:0;border:0}
.contenu>.wrap>section,.contenu>.wrap>article{margin-top:8px}
.contenu details{margin:14px 0}
.page-hero h1 em{font-style:italic}

.contenu p,.contenu li{overflow-wrap:anywhere}
.contenu video{display:block;margin:12px auto}
.contenu h2{margin-top:40px}
.contenu>.wrap>h2:first-child{margin-top:0}
.contenu article :is(h2,h3)+p{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.1;color:var(--or-texte)}
.contenu article :is(h2,h3){margin-top:0}

/* Candidat 10/10/2026 : barre du bas sans transition si « animations réduites » */
@media (prefers-reduced-motion:reduce){.barre{transition:none}}