/* =========================================================
   Armonel – feuille de style v6 (responsive)
   Police : Riope · Couleurs et motifs d'origine conservés
   Points de rupture : 480 / 820 / 900 / 1024 / 1440
   ========================================================= */
@font-face{font-family:"Riope";src:url("assets/Riope.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --gris:#F5F5F5;--corail:#ED6F51;--ciel:#A2BCD8;--jaune:#E7B645;--creme:#EDE3CF;--encre:#4a413c;
  --gut:clamp(1.25rem,4vw,2.5rem);      /* marge latérale */
  --hh:82px;                            /* hauteur de l'en-tête */
  --r-l:clamp(1.9rem,5.2vw,3.5rem);     /* grands coins arrondis */
  --r-m:clamp(1.5rem,3.6vw,2.5rem);
  --r-s:clamp(1.2rem,2.6vw,2rem);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 1rem)}
body{font-family:"Riope",Georgia,serif;font-weight:400;font-synthesis:none;color:var(--encre);background:var(--gris);line-height:1.6;font-size:clamp(1.02rem,.98rem + .25vw,1.14rem);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:400;color:var(--corail);line-height:1.08;overflow-wrap:break-word}
h1,h2{color:var(--encre)}
h1 em,h2 em{font-style:normal;color:var(--corail)}
p+p{margin-top:1rem}
p{overflow-wrap:break-word}
.w{max-width:1180px;margin:0 auto;padding:0 var(--gut);position:relative}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.9rem;border-radius:999px;background:var(--corail);color:var(--gris);text-decoration:none;border:1.5px solid var(--corail);font-family:inherit;font-size:1rem;line-height:1.2;text-align:center}
.btn:hover{background:#e0603f;border-color:#e0603f}
.btn.petit{min-height:40px;padding:.4rem 1.2rem;font-size:.95rem}
.lien{color:var(--corail);text-decoration:none;border-bottom:1.5px solid var(--jaune);padding-bottom:1px}
.lien:hover{border-bottom-color:var(--corail)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center;margin-top:1.8rem}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ciel);outline-offset:3px}
.ac{border-bottom:2px dotted var(--jaune)}
.saut{position:absolute;left:-999px;top:0;background:var(--gris);padding:.6rem 1rem;z-index:100}
.saut:focus{left:.5rem;top:.5rem}

/* ---------- En-tête et navigation ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(245,245,245,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1.5px solid var(--jaune)}
header .w{display:flex;justify-content:space-between;align-items:center;height:var(--hh);position:static}
header .logo{display:block;flex:none}
header img{height:54px;width:auto}
nav ul{list-style:none;padding:0;display:flex;gap:clamp(.9rem,2vw,2.2rem);align-items:center}
nav a{text-decoration:none}
nav a[aria-current]{color:var(--corail);border-bottom:1.5px solid var(--jaune)}
details.menu{display:none}

/* ---------- Accueil : composition d'ouverture ---------- */
.hero{position:relative;max-width:1260px;margin:0 auto;padding:clamp(.8rem,3vw,2.5rem) var(--gut) clamp(3.8rem,7vw,6rem);display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.band{grid-column:5/13;grid-row:1;position:relative;z-index:1;min-height:clamp(380px,46vw,600px);background:var(--ciel) url(assets/fond-bleu.webp) center/cover;border-radius:0 var(--r-l) 0 var(--r-l);display:grid;place-items:center;padding:1.5rem 1.5rem 1.5rem 40%}
.band img{width:min(100%,460px)}
.intro{grid-column:1/8;grid-row:1;position:relative;z-index:2;margin-bottom:-3.6rem;background:var(--creme) url(assets/fond-beige.webp) center/cover;border:1.5px solid var(--jaune);border-radius:0 var(--r-l) 0 var(--r-l);padding:clamp(1.6rem,4vw,3.2rem)}
.intro h1{font-size:clamp(1.9rem,4.5vw,3.8rem);margin:.7rem 0 .9rem}
.accroche{font-size:1.2em;line-height:1.4;max-width:26ch}

/* ---------- Sections génériques ---------- */
section{padding:clamp(2.2rem,5vw,5.5rem) 0}
.mots .w{display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.5rem;align-items:start}
.mots h2{grid-column:1/9;font-size:clamp(2.1rem,6.4vw,5.4rem)}
.mots .txt{grid-column:9/13;margin-top:clamp(.6rem,5vw,4.5rem);border-left:1.5px solid var(--jaune);padding-left:1.6rem}
.note{margin-top:1.4rem;font-size:.95em}

/* ---------- Mosaïque de tuiles qui se chevauchent ---------- */
.pourquoi{padding-top:clamp(.5rem,2vw,1.5rem)}
.pourquoi h2,.voix .w>h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.mosaique{margin-top:1.4rem;display:grid;grid-template-columns:repeat(12,1fr)}
.tuile{position:relative;padding:1.4rem 1.6rem 2.8rem}
.tuile h3{font-size:clamp(1.5rem,3.1vw,2.5rem);margin-bottom:.45rem;color:var(--encre)}
.tuile p{font-size:.97em;margin:0;line-height:1.5}
.t1{grid-column:1/8;grid-row:1;background:var(--ciel) url(assets/fond-bleu.webp) center/cover;border-radius:0 var(--r-m) 0 var(--r-m);z-index:2}
.t2{grid-column:6/13;grid-row:1;margin-top:2.6rem;padding-left:calc(28.6% + 1.4rem);background:var(--jaune) url(assets/fond-jaune.webp) center/cover;border-radius:0 var(--r-m) 0 var(--r-m);z-index:1}
.t3{grid-column:2/8;grid-row:2;margin-top:-1.2rem;padding-bottom:1.6rem;background:var(--creme) url(assets/fond-beige.webp) center/cover;border:1.5px solid var(--jaune);border-radius:0 var(--r-m) 0 var(--r-m);z-index:3}
.t3 h3{color:var(--corail)}
.t4{grid-column:7/13;grid-row:2;margin-top:1.2rem;padding-bottom:1.6rem;padding-left:calc(16.7% + 1.4rem);border:1.5px solid var(--jaune);background:var(--gris);z-index:2}
.tuile .liste li::before{border-top-color:var(--encre)}

/* ---------- Adultes et enfants ---------- */
.voix{padding:clamp(1.6rem,4vw,3.5rem) 0 clamp(.6rem,2vw,1.5rem)}
.voix .duo{display:grid;grid-template-columns:5fr 5fr;gap:clamp(1.2rem,7vw,6rem);margin-top:1.4rem;padding-left:8%}
.voix .v1,.voix .v2{font-size:1.1em}
.voix .v2{margin-top:clamp(0rem,5vw,4.5rem);border-left:1.5px solid var(--jaune);padding-left:clamp(1rem,3vw,2.2rem)}

/* ---------- Présentation (photo + texte) ---------- */
.laur{padding:clamp(1.6rem,4vw,3.5rem) 0}
.laur .w{display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.5rem;align-items:center}
.pile{grid-column:1/6;position:relative;padding:0 0 2.2rem 2.2rem}
.pile::before{content:"";position:absolute;left:0;bottom:0;width:78%;height:78%;background:var(--creme) url(assets/fond-beige.webp) center/cover;border-radius:0 var(--r-m) 0 var(--r-m)}
.photo{position:relative;aspect-ratio:4/5;background:var(--gris);border:1.5px solid var(--jaune);border-radius:0 var(--r-m) 0 var(--r-m);display:grid;place-items:center;text-align:center;padding:1.5rem}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;border-radius:inherit}
.photo{overflow:hidden}
.laur .txt{grid-column:7/13}
.laur h2{font-size:clamp(2.1rem,5vw,4.2rem);margin:.5rem 0 .9rem}
.laur h3{margin-top:1.4rem;color:var(--corail);font-size:clamp(1.35rem,2.2vw,1.7rem)}

/* ---------- Panneau d'appel à l'action ---------- */
.appel{padding:clamp(.6rem,2vw,1.5rem) 0 clamp(2rem,5vw,4.5rem)}
.panneau{--gw:clamp(160px,28vw,340px);position:relative;overflow:hidden;background:var(--creme) url(assets/fond-beige.webp) center/cover;border:1.5px solid var(--jaune);border-radius:0 var(--r-l) 0 var(--r-l);padding:clamp(1.6rem,5vw,4rem);padding-right:calc(var(--gw) - 1rem)}
.panneau .txt{position:relative;z-index:1;max-width:540px}
.panneau h2{font-size:clamp(1.8rem,4vw,3.1rem);margin-bottom:.7rem}
.ghost{position:absolute;pointer-events:none;z-index:0}
.g2{right:-3rem;bottom:-4rem;width:var(--gw)}

/* ---------- Pages intérieures ---------- */
.liste{list-style:none;padding:0;display:grid;gap:.3rem;margin:0}
.liste li{padding-left:1.3rem;position:relative;line-height:1.45}
.liste li::before{content:"";position:absolute;left:0;top:.72em;width:.7rem;border-top:1.5px solid var(--encre)}
.entete{padding:clamp(.8rem,3vw,2rem) 0 clamp(1.4rem,3vw,2.4rem)}
.bande{background:var(--ciel) url(assets/fond-bleu.webp) center/cover;border-radius:0 var(--r-l) 0 var(--r-l);padding:clamp(1.4rem,4vw,3.2rem) clamp(1.3rem,4vw,3rem);min-height:clamp(120px,20vw,220px);display:flex;align-items:center}
.bande.avec-mot{padding-bottom:calc(clamp(1.4rem,4vw,3.2rem) + 1.6rem)}
.bande h1{color:var(--gris);font-size:clamp(2.2rem,7vw,5.6rem)}
.bande.long h1{font-size:clamp(1.7rem,4.6vw,3.4rem)}
.mot{position:relative;margin:-1.5rem clamp(0rem,6vw,5rem) 0 auto;width:min(100%,520px);background:var(--creme) url(assets/fond-beige.webp) center/cover;border:1.5px solid var(--jaune);border-radius:0 var(--r-s) 0 var(--r-s);padding:1rem 1.4rem}
.page-s h2{font-size:clamp(2rem,6vw,4.4rem)}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.5rem;margin-top:1rem;align-items:start}
.cols .t{grid-column:1/8}
.avis{grid-column:8/13;margin-top:2.4rem;background:var(--creme) url(assets/fond-beige.webp) center/cover;border:1.5px solid var(--jaune);border-radius:0 var(--r-s) 0 var(--r-s);padding:1.2rem 1.5rem;font-size:.97em}
.avis h3{color:var(--corail);font-size:1.3rem;margin-bottom:.5rem}
.etapes{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem clamp(1.5rem,6vw,5rem);padding-left:6%}
.etape{border-top:1.5px solid var(--jaune);padding-top:.8rem;display:grid;grid-template-columns:auto 1fr;gap:0 1rem;align-items:start}
.etape .n{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;color:var(--corail);min-width:.7em}
.etape:nth-child(even) .n{color:var(--encre)}
.etape:nth-child(even){margin-top:clamp(0rem,4vw,3rem)}
.etape h3{color:var(--encre);font-size:1.35rem;margin-bottom:.3rem}

/* À propos : le nom */
.nom .w,.tarif .w,.contact .w{display:grid;grid-template-columns:repeat(12,1fr);gap:0 1.5rem;align-items:center}
.bloc-nom{grid-column:1/7;grid-row:1;background:var(--ciel) url(assets/fond-bleu.webp) center/cover;border-radius:0 var(--r-l) 0 var(--r-l);min-height:clamp(180px,30vw,340px);display:grid;place-items:center;padding:1.5rem}
.bloc-nom img{width:64%}
.txt-nom{grid-column:6/13;grid-row:1;position:relative;background:var(--gris);border:1.5px solid var(--jaune);border-radius:0 var(--r-s) 0 var(--r-s);padding:clamp(1.3rem,3vw,2.4rem);margin-left:2rem}
.txt-nom h2{margin-bottom:.8rem}

/* Tarifs */
.prixbloc{grid-column:1/6;align-self:start;background:var(--jaune) url(assets/fond-jaune.webp) center/cover;border-radius:0 var(--r-l) 0 var(--r-l);padding:clamp(1.6rem,4vw,2.8rem)}
.prixbloc .prix{font-size:clamp(3.4rem,8vw,6rem);line-height:1;color:var(--encre);margin:.4rem 0 .8rem}
.modal{grid-column:6/13;margin-top:clamp(0rem,4vw,3rem);padding-left:clamp(0rem,4vw,3rem)}
.modal h2{margin-bottom:.8rem}
dl.liste-dl{margin-top:1rem}
.r{display:grid;grid-template-columns:7.5rem 1fr;gap:.2rem 1rem;padding:.7rem 0;border-top:1.5px solid var(--jaune)}
.r dt{color:var(--corail)}
.r dd{margin:0;overflow-wrap:anywhere}

/* Contact */
.contact .gauche{grid-column:1/8}
.contact .gauche h2{margin-bottom:.8rem}
.contact .pile{grid-column:8/13}
.contact .photo.carte{aspect-ratio:4/3}
.legal{max-width:760px;margin:0 auto}
.legal h3{margin:1.6rem 0 .4rem;color:var(--encre)}

/* ---------- Pied de page ---------- */
footer{background:var(--creme);border-top:1.5px solid var(--jaune);padding:2.4rem 0;font-size:.95rem}
footer .w{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:center;justify-content:space-between}
footer img{height:40px;width:auto;flex:none}
footer a{text-decoration:none}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
footer li a{display:inline-block;padding:.35rem 0}
footer p{margin:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =========================================================
   ≤ 1024 px : petits ordinateurs et tablettes en paysage
   ========================================================= */
@media(max-width:1024px){
  .mots .txt{grid-column:5/13}
  .mots h2{grid-column:1/13}
  .cols .t{grid-column:1/8}
  .avis{grid-column:8/13}
}

/* =========================================================
   ≤ 900 px : menu pour le doigt
   ========================================================= */
@media(max-width:900px){
  :root{--hh:68px}
  header img{height:44px}
  header nav{display:none}
  details.menu{display:block}
  details.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:46px;padding:0 1.4rem;border:1.5px solid var(--jaune);border-radius:999px;background:var(--gris);-webkit-tap-highlight-color:transparent;user-select:none}
  details.menu summary::-webkit-details-marker{display:none}
  details.menu[open] summary{background:var(--creme)}
  details.menu ul{position:absolute;left:0;right:0;top:100%;background:var(--gris);padding:.4rem var(--gut) 1.6rem;list-style:none;display:grid;gap:0;border-bottom:1.5px solid var(--jaune);max-height:calc(100vh - var(--hh));max-height:calc(100dvh - var(--hh));overflow-y:auto;box-shadow:0 14px 24px -18px rgba(74,65,60,.5)}
  details.menu li a{display:flex;align-items:center;min-height:54px;font-size:1.3rem;text-decoration:none;border-bottom:1px solid rgba(231,182,69,.5)}
  details.menu li a[aria-current]{color:var(--corail)}
  details.menu li:last-child a{margin-top:1.2rem;border-bottom:0;justify-content:center;font-size:1.05rem}
}

/* =========================================================
   ≤ 820 px : tablettes en portrait et smartphones
   Les blocs passent en colonne, avec de légers décalages
   ========================================================= */
@media(max-width:820px){
  section{padding:clamp(1.8rem,6vw,2.6rem) 0}
  .actions{margin-top:1.3rem}

  /* Accueil */
  .hero{display:block;padding-bottom:2.6rem}
  .band{min-height:clamp(190px,52vw,300px);padding:1.2rem;display:grid}
  .band img{width:min(66%,320px)}
  .intro{margin:-2.2rem 0 0 1.1rem;padding:1.4rem 1.3rem 1.6rem}
  .intro h1{margin:.5rem 0 .7rem}

  .mots .w{display:block}
  .mots .txt{margin-top:1rem;padding-left:1.1rem}

  /* Tuiles : colonne décalée */
  .mosaique{display:block;margin-top:1.1rem}
  .tuile{width:92%;padding:1.1rem 1.3rem 2.2rem;margin:0 0 -1rem}
  .t1{z-index:1}
  .t2{margin:0 0 -1rem 8%;padding-left:1.3rem;z-index:2}
  .t3{margin-left:0;z-index:3}
  .t4{margin:0 0 0 8%;padding:1.1rem 1.3rem 1.3rem;z-index:4}

  .voix .duo{grid-template-columns:1fr;padding-left:0;gap:1.2rem;margin-top:1rem}
  .voix .v2{margin-top:0;padding-left:1.1rem}

  .laur .w{display:block}
  .pile{padding:0 0 1.4rem 1.4rem}
  .photo{aspect-ratio:1/1}
  .laur .txt{margin-top:.8rem}

  /* Panneau d'appel : la marque passe sous le texte */
  .panneau{--gw:clamp(120px,32vw,180px);padding:1.6rem 1.4rem calc(var(--gw) * .75 + 1.2rem)}
  .g2{right:-1.4rem;bottom:-2.6rem}

  /* Pages intérieures */
  .entete{padding-bottom:1.2rem}
  .mot{margin:-1.4rem 0 0 auto;width:92%}
  .cols{display:block}
  .avis{margin-top:1.4rem}
  .etapes{grid-template-columns:1fr;padding-left:0;gap:1.2rem}
  .etape:nth-child(even){margin-top:0}

  .nom .w,.tarif .w,.contact .w{display:block}
  .bloc-nom{min-height:clamp(170px,46vw,260px)}
  .bloc-nom img{width:min(62%,300px)}
  .txt-nom{margin:-1.6rem 0 0 1.1rem}
  .prixbloc{margin-bottom:0}
  .modal{margin-top:1.8rem;padding-left:0}
  .contact .gauche{margin-bottom:0}
  .contact .pile{margin-top:1.8rem}

  footer .w{flex-direction:column;align-items:flex-start;gap:1.1rem}
}

/* =========================================================
   ≤ 480 px : smartphones étroits (375 / 390 / 430)
   ========================================================= */
@media(max-width:480px){
  body{font-size:1.02rem}
  .btn{width:100%}
  .btn.petit{width:auto}
  .actions{flex-direction:column;align-items:stretch;gap:1rem}
  .actions .lien{align-self:flex-start}
  .intro .lien{margin-top:.2rem}
  .eyebrow{font-size:.72rem;letter-spacing:.1em}
  .r{grid-template-columns:5.8rem 1fr;gap:.2rem .8rem}
  .tuile{width:94%}
  .etape{gap:0 .8rem}
  .mot{width:94%;padding:.9rem 1.1rem}
  footer li a{padding:.5rem 0}
}

/* =========================================================
   ≥ 1440 px : grands écrans, la composition reste centrée
   ========================================================= */
@media(min-width:1440px){
  .w{max-width:1240px}
  .hero{max-width:1320px}
  body{font-size:1.16rem}
}