/* ================================================================
   MAISON PUNCH — feuille de style unique des huit pages
     index.html · reparation.html · customisation.html
     le-punch-needle/index.html · autres-ateliers.html · entreprise.html
     reservation.html · mentions-legales.html

   Refonte du 2026-09-22 (demande Vincent) : fond unique crème, couleurs
   de la palette en accents seulement, photos droites, plus de bandeau
   défilant, de festons, de médaillon ni de polaroids inclinés. Un seul
   bloc sombre par page : l'encart d'appel (.encart-cta), en sapin.

   Organisation, à respecter :
     1. LE SOCLE : les sélecteurs dont les pages partagent EXACTEMENT les
        mêmes règles, media queries comprises. Le modifier change les huit
        pages — c'est le but.
     2. Les blocs par page. Chaque page porte une classe sur son <body>
        (page-accueil, page-atelier, page-punch, page-entreprise,
        page-reservation, page-mentions) et ses règles propres sont
        portées par « :where(.page-…) ».

   Trois règles apprises en cassant le site pendant la fusion des feuilles :
     · La portée s'écrit avec :where(), jamais « .page-x .truc ». :where()
       n'ajoute RIEN à la spécificité : sans lui, une règle portée passe
       devant des règles qui la battaient avant, et le rendu change.
     · Un sélecteur est soit ENTIÈREMENT dans le socle, soit ENTIÈREMENT dans
       les blocs de page — jamais à cheval, sinon les réglages mobiles sautent.
     · La portée se colle à CHAQUE partie d'un sélecteur multiple.

   Une règle qui ne concerne qu'une page va dans SON bloc, jamais dans le socle.
   ================================================================ */

/* ---------- 1. LE SOCLE ---------- */
:root{--creme:#FDF7EA; --sable:#F3E7C9; --moutarde:#E9B93F; --sauge:#DCE8CE; --sapin:#2F5641; --brique:#C4441F; --terracotta:#D9522F; --rose:#F6D7CB; --encre:#1F2A21; --encre-doux:#4A5A4B; --blanc:#FFFFFF;
  --bord:#E6DDC9; --rayon:20px; --ombre:0 1px 2px rgba(31,42,33,.04);}
*{margin:0;padding:0;box-sizing:border-box}
/* Le site n'a qu'une tenue, claire. Sans cette déclaration, le « thème sombre
   automatique » de Chrome sur Android repeint la page lui-même. « only light »
   lui dit que la page gère ses couleurs et qu'il n'a pas à y toucher.
   scroll-padding-top : la barre collante fait 66 px, les ancres atterrissent
   dessous et non derrière. Recalé à 1279 px et 480 px avec la barre. */
html{color-scheme:only light;scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Outfit',sans-serif;font-weight:400;color:var(--encre);background:var(--creme);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--terracotta)}
::selection{background:var(--moutarde)}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.page{margin:0 auto;background:var(--creme);position:relative;
  /* --marge : la gouttière commune à la barre, au pied de page et aux sections,
     qui centre une colonne de 1200 px sur les grands écrans. La barre et le
     pied de page vont bord à bord, leur contenu s'aligne sur les titres. */
  --marge:max(40px,calc((100% - 1200px) / 2));
  /* « clip » rogne sans créer de conteneur de défilement. « hidden » seul en
     créait un, ce qui neutralisait le position:sticky de .barre. Ne jamais
     remettre « hidden » seul. */
  overflow:hidden;overflow:clip}

h1,h2,h3{font-family:'Newsreader',serif;font-weight:500;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(30px,3.8vw,48px)}
h3{font-size:24px;line-height:1.15}
h1 em,h2 em{font-style:italic;color:var(--terracotta)}
.surtitre{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--sapin)}
.surtitre+h1,.surtitre+h2{margin-top:14px}
.serif-ital{font-family:'Newsreader',serif;font-style:italic;font-weight:500}
.accroche,.chapo,p.texte,.intro{font-size:18px;color:var(--encre-doux);max-width:56ch;text-wrap:pretty}
h1+.accroche,h2+.chapo,h2+.intro{margin-top:22px}
p.texte+p.texte{margin-top:14px}
.texte a,.intro a,.chapo a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* Boutons : pilules. Primaire sapin, secondaire contour ; brique réservé au
   bouton d'envoi des formulaires. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:999px;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;font-family:'Outfit',sans-serif;font-size:16px;padding:14px 26px;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.btn-sapin{background:var(--sapin);color:var(--creme);border-color:var(--sapin)}
.btn-sapin:hover{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.btn-contour{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-contour:hover{background:var(--encre);color:var(--creme)}
.btn-brique{background:var(--brique);color:#FFF;border-color:var(--brique)}
.btn-brique:hover{background:var(--encre);border-color:var(--encre);color:#FFF}
.btn-creme{background:var(--creme);color:var(--sapin);border-color:var(--creme)}
.btn-creme:hover{background:var(--moutarde);border-color:var(--moutarde);color:var(--encre)}
.btn-lg{font-size:17px;padding:17px 32px}
.btn-sm{font-size:14px;padding:10px 18px}
.lien-fleche{font-weight:600;color:var(--sapin);display:inline-flex;align-items:center;gap:6px}
.lien-fleche::after{content:'→';transition:transform .2s}
.lien-fleche:hover{color:var(--terracotta)}
.lien-fleche:hover::after{transform:translateX(3px)}

/* Logo : MAIS◯N PUNCH, le O est une boucle de laine. */
.logo{display:flex;align-items:center;gap:3px;font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.logo .boucle{display:inline-block;width:17px;height:17px;border-radius:50%;border:4px solid var(--terracotta);transform:translateY(1px);flex-shrink:0}
.logo .fanion{margin-left:10px;font-family:'Newsreader',serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;font-size:17px;color:var(--encre-doux)}

/* Barre de navigation collante : bande crème translucide pleine largeur,
   filet en bas. 66 px de haut au-dessus de 1279 px (cinq liens et un bouton,
   pas plus : ajouter un lien ne tient plus sur une ligne). */
.barre{position:sticky;top:0;z-index:80;background:rgba(253,247,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.barre nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px var(--marge);flex-wrap:wrap}
.barre .logo{font-size:19px}
.liens{display:flex;align-items:center;gap:2px;font-weight:500;font-size:15px;flex-wrap:wrap}
.liens a{padding:8px 12px;border-radius:999px}
.liens a:hover{background:rgba(31,42,33,.06);color:var(--encre)}
.liens a[aria-current="page"]{color:var(--sapin);font-weight:600;background:rgba(47,86,65,.09)}
.actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.actions .btn{font-size:15px;padding:11px 20px}

/* Sections : fond unique, séparées par un filet et de l'air. Le padding
   latéral centre un contenu de 1200 px dans la page de 1440 px. */
.section{padding:88px var(--marge)}
.section+.section,.section+.hero,.hero+.section{border-top:1px solid var(--bord)}
.entete{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.entete .apart{font-size:17px;color:var(--encre-doux);max-width:40ch;text-wrap:pretty}
.fil{padding:18px var(--marge) 0;font-size:14px;color:var(--encre-doux)}
.fil span[aria-current]{font-weight:600;color:var(--encre)}

/* Hero : texte à gauche, photo droite à droite. */
.hero{padding:64px var(--marge) 80px}
.hero-grille{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero .boutons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-photo img{width:100%;aspect-ratio:4/5;max-height:600px;object-fit:cover;border-radius:var(--rayon)}
.hero-photo .legende{margin-top:12px;font-size:15px;color:var(--encre-doux)}
.hero.hero-court{padding-bottom:56px}
.hero.hero-court h1{max-width:18ch}

/* Pastilles : contour fin, plus de fonds colorés. */
.jetons,.puces,.parcours,.reperes{display:flex;gap:8px;flex-wrap:wrap}
.jetons{margin-top:28px}
.jetons span,.puces span,.parcours span,.reperes span{border:1px solid var(--bord);background:#FFF;border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:500;line-height:1.3}

/* Cartes : blanches, bordure fine, photo droite en 4:3. */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.carte{background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:14px 14px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--ombre)}
.carte .vignette{position:relative}
.carte .vignette img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.vignette.sans-photo{aspect-ratio:4/3;border-radius:12px;background:var(--sable);display:flex;align-items:center;justify-content:center;font-size:54px;color:rgba(92,68,18,.32)}
.badge{position:absolute;top:12px;left:12px;background:rgba(253,247,234,.95);border:1px solid var(--bord);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre)}
.carte .corps{padding:0 12px;display:flex;flex-direction:column;gap:14px;flex:1}
.ligne-titre{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.carte h3{font-size:26px;line-height:1.12}
.prix{font-family:'Newsreader',serif;font-weight:500;font-size:26px;white-space:nowrap;letter-spacing:-.01em}
.prix small{display:block;text-align:right;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;color:var(--encre-doux);line-height:1.2}
.carte p{font-size:16px;color:var(--encre-doux);text-wrap:pretty}
.carte .btn,.carte .lien-fleche{margin-top:auto;align-self:flex-start}
.carte .num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--sapin);color:var(--creme);font-family:'Newsreader',serif;font-size:19px;font-weight:600;flex:none}
.carte h4{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sapin);margin-bottom:-6px}

/* Étapes numérotées (déroulé, la suite). */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.etapes.trois{grid-template-columns:repeat(3,1fr)}
.etape{background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:28px 26px;box-shadow:var(--ombre)}
.etape .num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--sapin);color:var(--creme);font-family:'Newsreader',serif;font-size:21px;font-weight:600}
.etape .horaire{display:inline-block;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sapin)}
.etape h3{font-size:22px;margin:16px 0 8px}
.etape .horaire+h3{margin-top:6px}
.etape p{font-size:15.5px;color:var(--encre-doux);text-wrap:pretty}

/* Deux colonnes texte + photo droite. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo .photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon)}
.duo.portrait .photo img{aspect-ratio:4/5;max-height:560px}
.duo.photo-droite .photo{order:2}
.duo h2+p.texte{margin-top:20px}
.duo .parcours,.duo .reperes{margin-top:26px}
.duo .encart{margin-top:32px}

/* Liste à puces ✿ (points clés, « on repart avec »). Le texte de chaque puce
   vit dans un <span> : le <li> est en flex. */
.points{list-style:none;display:flex;flex-direction:column;gap:11px}
.points li{display:flex;gap:12px;font-size:16.5px;color:var(--encre-doux);text-wrap:pretty}
.points li::before{content:'✿';color:var(--terracotta);flex:none}
.points strong{color:var(--encre);font-weight:600}

/* Encarts. .encart-cta : LE bloc sombre de la page, un seul par page. */
.encart-cta{background:var(--sapin);color:var(--creme);border-radius:28px;padding:56px 52px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.encart-cta .surtitre{color:var(--moutarde)}
.encart-cta h2{color:var(--creme)}
.encart-cta p{color:rgba(253,247,234,.82);font-size:18px;max-width:46ch;margin-top:14px;text-wrap:pretty}
.encart-cta p a{color:var(--moutarde);text-decoration:underline;text-underline-offset:3px}
.encart-cta .actions{justify-content:flex-end;flex-wrap:wrap}
.encart-cta .actions .btn{font-size:17px;padding:17px 32px}
.encart-cta .ligne{margin-top:22px;font-size:15px;color:rgba(253,247,234,.7)}
.encart{background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:var(--ombre)}
.encart+.encart{margin-top:20px}
.encart h3{font-size:26px}
.encart p{font-size:16px;color:var(--encre-doux);max-width:52ch;margin-top:6px;text-wrap:pretty}
.encart-note{background:#FFF;border:1px solid var(--bord);border-left:3px solid var(--moutarde);border-radius:0 12px 12px 0;padding:14px 18px;font-size:15px;color:var(--encre-doux);text-wrap:pretty}
.encart-note b{color:var(--encre)}

/* Céline en bref : portrait rond + deux phrases, sur les pages atelier. */
.celine-mini{display:flex;gap:26px;align-items:center;background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:26px 30px;box-shadow:var(--ombre)}
.celine-mini img{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.celine-mini h3{font-size:22px}
.celine-mini p{font-size:16px;color:var(--encre-doux);margin-top:6px;text-wrap:pretty}
.celine-mini .lien-fleche{margin-top:8px;font-size:15px}
.ligne-lieu{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;font-size:15.5px;color:var(--encre-doux);margin-top:20px}
.ligne-lieu b{color:var(--encre);font-weight:600}

/* Fiche : les chiffres d'un atelier (durée, prix, jauge). */
.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.fiche div{background:#FFF;border:1px solid var(--bord);border-radius:14px;padding:18px 20px}
.fiche b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sapin);font-weight:600;margin-bottom:6px}
.fiche span{font-family:'Newsreader',serif;font-size:24px;line-height:1.15}
.fiche small{display:block;font-size:14px;color:var(--encre-doux);margin-top:4px}

/* Trois colonnes de promesses. */
.colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.colonnes div{padding:4px 0}
.colonnes h3{font-size:22px;margin-bottom:8px}
.colonnes p{font-size:16px;color:var(--encre-doux);text-wrap:pretty}
.colonnes .glyphe{display:block;font-size:22px;color:var(--terracotta);margin-bottom:12px}

/* Photo pleine largeur. */
.photo-large img{width:100%;height:440px;object-fit:cover;object-position:center 50%;border-radius:var(--rayon)}

/* Sommaire en pilules. */
.sommaire{margin-top:34px}
.sommaire p{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--encre-doux);margin-bottom:12px}
.sommaire ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sommaire a{display:inline-block;background:#FFF;border:1px solid var(--bord);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.sommaire a:hover{background:var(--encre);color:var(--creme);border-color:var(--encre)}

/* FAQ : <details> natif. */
.accordeon{display:flex;flex-direction:column;gap:10px}
.accordeon details{background:#FFF;border:1px solid var(--bord);border-radius:16px;overflow:hidden}
.accordeon summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:20px 24px;list-style:none;font-family:'Newsreader',serif;font-weight:500;font-size:21px;line-height:1.25;color:var(--encre)}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:"+";font-family:'Outfit',sans-serif;font-size:24px;line-height:1;color:var(--terracotta);flex-shrink:0}
.accordeon details[open] summary::after{content:"–"}
.accordeon p{padding:0 24px 22px;font-size:16px;color:var(--encre-doux);max-width:64ch;text-wrap:pretty}
.accordeon p a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* Tableau simple (cycles enfants). */
.tableau{width:100%;border-collapse:collapse}
.tableau th,.tableau td{text-align:left;padding:11px 0;font-size:15.5px;border-bottom:1px solid var(--bord)}
.tableau th{font-weight:600;white-space:nowrap;padding-right:18px}
.tableau tr:last-child th,.tableau tr:last-child td{border-bottom:0}

/* Formulaires. Les champs sont blancs à bordure fine ; « form [hidden] »
   garde le pas sur « label{display:flex} ». */
form{display:flex;flex-direction:column;gap:16px}
form label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--encre-doux)}
input,select,textarea{font-family:'Outfit',sans-serif;font-size:17px;color:var(--encre);background:#FFF;border:1.5px solid var(--bord);border-radius:12px;padding:13px 16px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sapin);box-shadow:0 0 0 3px rgba(47,86,65,.12)}
textarea{resize:vertical}
form [hidden]{display:none!important}
form fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
form legend{font-size:14px;font-weight:600;color:var(--encre-doux);padding:0;margin-bottom:6px}
.duo-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case-date{flex-direction:row;align-items:center;gap:10px;font-weight:400;font-size:16px;color:var(--encre)}
.case-date input{width:19px;height:19px;padding:0;flex:none;accent-color:var(--sapin)}
form .btn{align-self:flex-start;margin-top:6px;font-size:17px;padding:16px 30px}
#confirmation{display:none;font-size:16px;color:var(--sapin);font-weight:500}

/* Pied de page : le seul aplat sombre commun aux huit pages. */
footer{background:var(--encre);color:var(--creme);padding:56px var(--marge);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .logo{font-size:22px;letter-spacing:.1em}
footer .logo .boucle{width:18px;height:18px;border-color:var(--moutarde)}
footer .mentions{font-size:14.5px;line-height:1.9;color:rgba(253,247,234,.78);text-align:right}
footer .mentions a{color:var(--creme);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(253,247,234,.35)}
footer .mentions a:hover{color:var(--moutarde)}

/* Barre collante, compactage sous 1280 px : le logo et le bouton sur une
   ligne, puis les liens sur une ligne unique qui défile horizontalement. */
@media (max-width:1279px){
  html{scroll-padding-top:130px}
  .barre nav{gap:6px;padding:10px var(--marge)}
  .liens{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none;margin:0 -8px;padding:0 8px}
  .liens::-webkit-scrollbar{display:none}
  .liens a{flex:none}
}
@media (max-width:1080px){
  .page{--marge:32px}
  .section{padding-top:72px;padding-bottom:72px}
  .hero{padding-top:48px;padding-bottom:64px}
  .hero-grille,.duo,.encart-cta{grid-template-columns:1fr}
  .duo.photo-droite .photo{order:0}
  .hero-photo img{aspect-ratio:4/3;max-height:460px}
  .duo.portrait .photo img{aspect-ratio:4/3;max-height:460px}
  .etapes,.etapes.trois,.colonnes{grid-template-columns:1fr 1fr}
  .encart-cta .actions{justify-content:flex-start}
  footer .mentions{text-align:left}
}
@media (max-width:860px){
  .page{--marge:22px}
  .section{padding-top:60px;padding-bottom:60px}
  .hero{padding-top:36px;padding-bottom:56px}
  .barre nav{padding:10px var(--marge)}
  .cartes{grid-template-columns:1fr}
  .etapes,.etapes.trois,.colonnes{grid-template-columns:1fr}
  .encart-cta{padding:36px 26px;border-radius:22px}
  .encart{padding:26px 22px}
  .photo-large img{height:260px}
  .duo-champs{grid-template-columns:1fr}
  .celine-mini{flex-direction:column;align-items:flex-start;padding:24px}
  footer{padding-top:36px;padding-bottom:36px}
}
@media (max-width:480px){
  html{scroll-padding-top:110px}
  .page{--marge:14px}
  .barre nav{padding:8px var(--marge);gap:4px}
  .barre .logo{font-size:16px}
  .barre .logo .boucle{width:14px;height:14px;border-width:3px}
  .barre .logo .fanion{font-size:14px;margin-left:6px}
  .actions .btn{font-size:13px;padding:9px 14px}
  .liens{font-size:14px}
  .liens a{padding:7px 9px}
  .hero .boutons .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.lien-fleche::after{transition:none}
}

/* ==================================================================
   LE HERO DE groupe-2.jpg — index.html ET entreprise.html
   Les deux seules pages dont le hero porte la photo des cinq
   participantes. Elle est en 4:3 et elles occupent toute sa largeur :
   le 4:5 du socle n'en gardait que 65 % et coupait celles des deux bouts.
   On la pose donc en paysage, pleine largeur, et c'est la hauteur qui se
   recadre — le plafond et le premier plan, pas les visages.
   Au-dessus de 1080 px seulement : en dessous, le socle passe déjà la
   photo en pleine largeur, il n'y a rien à corriger.
   Règle portée par DEUX pages : elle vit ici, une seule fois, et la
   portée se répète sur chaque partie du sélecteur. Changer la photo du
   hero d'une de ces deux pages, c'est sortir la page de ce bloc.
   ================================================================== */
@media (min-width:1081px){
  :where(.page-accueil) .hero-grille,
  :where(.page-entreprise) .hero-grille{grid-template-columns:1fr 1.06fr}
  :where(.page-accueil) .hero-photo img,
  :where(.page-entreprise) .hero-photo img{aspect-ratio:8/5;max-height:430px;object-position:50% 72%}
}

/* ==================================================================
   index.html — ce qui lui est propre
   ================================================================== */
:where(.page-accueil) .tuiles .carte .lien-fleche{font-size:15px}
:where(.page-accueil) .tuiles .carte h3{font-size:24px}
/* Cinq tuiles : 3 + 2 plutôt que 4 + 1 orpheline. */
@media (min-width:1081px){
  :where(.page-accueil) .tuiles{grid-template-columns:repeat(3,1fr)}
}

/* ==================================================================
   reparation.html, customisation.html, autres-ateliers.html
   Même squelette : hero, fiche, cartes de thèmes/techniques, déroulé,
   bon à savoir, Céline en bref, encart d'appel.
   ================================================================== */
:where(.page-atelier) .fiche{margin-top:36px}
:where(.page-atelier) .fiche+.cartes{margin-top:36px}
:where(.page-atelier) .savoir h2+p.texte{margin-top:20px}
/* Les photos de ces pages sont en 3:2 : un 4:5 les recadrerait trop. */
:where(.page-atelier) .hero-photo img{aspect-ratio:4/3;max-height:520px}
:where(.page-atelier) .themes .carte{padding:26px 26px 28px;gap:12px}
:where(.page-atelier) .themes .carte h3{font-size:23px;margin-top:14px}
:where(.page-atelier) .themes .carte dl{display:flex;flex-direction:column;gap:8px;margin-top:4px}
:where(.page-atelier) .themes .carte dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--sapin)}
:where(.page-atelier) .themes .carte dd{font-size:15.5px;color:var(--encre-doux);text-wrap:pretty}
:where(.page-atelier) .savoir{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
:where(.page-atelier) .savoir .points{margin-top:26px}
:where(.page-atelier) .savoir .encart-note{margin-top:20px}
:where(.page-atelier) .savoir .celine-mini{margin-top:0}
:where(.page-atelier) .savoir .ligne-lieu{margin-top:22px}
@media (max-width:1080px){
  :where(.page-atelier) .savoir{grid-template-columns:1fr}
}

/* ==================================================================
   le-punch-needle/index.html — ce qui lui est propre (préfixe .pn-*)
   Les ateliers d'abord (cartes du socle), puis le long texte : une largeur
   de lecture, des tableaux, des étapes numérotées.
   ================================================================== */
:where(.page-punch) .ce-grille{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
:where(.page-punch) .ce-texte p.texte{margin-bottom:20px}
:where(.page-punch) .ce-cycles{background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:28px 30px;box-shadow:var(--ombre)}
:where(.page-punch) .ce-cycles h3{font-size:24px;margin-bottom:14px}
:where(.page-punch) .ce-note{font-size:15px;color:var(--encre-doux);margin:18px 0 22px;text-wrap:pretty}
:where(.page-punch) .pn-grille{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start}
:where(.page-punch) .pn-grille .photo{position:sticky;top:110px}
:where(.page-punch) .pn-grille .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rayon)}
:where(.page-punch) .pn-grille .photo .legende{margin-top:10px;font-size:14.5px;color:var(--encre-doux)}
:where(.page-punch) .pn-bienfaits .photo img{aspect-ratio:4/3;object-position:62% center}
:where(.page-punch) .pn-corps{max-width:66ch;margin-top:26px}
:where(.page-punch) .pn-corps p{margin-top:18px;font-size:17.5px;text-wrap:pretty}
:where(.page-punch) .pn-corps h3{font-size:clamp(21px,2.6vw,27px);margin-top:40px}
:where(.page-punch) .pn-corps h3+p{margin-top:12px}
:where(.page-punch) .pn-corps ul,:where(.page-punch) .pn-corps ol{margin-top:18px;padding-left:22px}
:where(.page-punch) .pn-corps li{margin-top:10px;font-size:17.5px}
:where(.page-punch) .pn-corps li::marker{color:var(--terracotta);font-weight:600}
:where(.page-punch) .pn-corps strong{font-weight:600}
:where(.page-punch) .pn-corps em{font-style:italic}
:where(.page-punch) .pn-corps a:not(.btn){text-decoration:underline;text-underline-offset:3px;font-weight:500;color:var(--sapin)}
:where(.page-punch) .pn-etapes{list-style:none;counter-reset:etape;margin-top:26px;padding-left:0}
:where(.page-punch) .pn-etapes li{counter-increment:etape;position:relative;padding-left:56px;margin-top:22px;font-size:17.5px}
:where(.page-punch) .pn-etapes li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;background:var(--sapin);color:var(--creme);font-family:'Newsreader',serif;font-size:19px;font-weight:600;display:flex;align-items:center;justify-content:center}
@media (max-width:1080px){
  :where(.page-punch) .ce-grille,:where(.page-punch) .pn-grille{grid-template-columns:1fr}
  :where(.page-punch) .pn-grille .photo{position:static;max-width:460px}
  :where(.page-punch) .pn-grille .photo img{aspect-ratio:4/3}
}
@media (max-width:860px){
  :where(.page-punch) .ce-cycles{padding:22px 20px}
  :where(.page-punch) .pn-corps p,:where(.page-punch) .pn-corps li,:where(.page-punch) .pn-etapes li{font-size:16.5px}
}

/* ==================================================================
   entreprise.html — ce qui lui est propre
   ================================================================== */
:where(.page-entreprise) .citation{padding:64px var(--marge)}
:where(.page-entreprise) .citation blockquote{max-width:32ch;margin:0 auto;text-align:center;font-family:'Newsreader',serif;font-weight:500;font-style:italic;font-size:clamp(26px,3.4vw,42px);line-height:1.2;text-wrap:pretty}
:where(.page-entreprise) .citation .signature{text-align:center;margin-top:18px;font-size:16px;color:var(--encre-doux)}
:where(.page-entreprise) .deroule .intro{margin-bottom:44px}
:where(.page-entreprise) .encart-double{margin-top:36px;grid-template-columns:1fr 1.25fr;padding:40px 44px}
:where(.page-entreprise) .encart-double h3{font-size:28px;color:var(--creme)}
:where(.page-entreprise) .frise{display:flex;flex-direction:column;gap:8px}
:where(.page-entreprise) .frise div{display:flex;align-items:baseline;gap:16px;background:rgba(253,247,234,.1);border-radius:999px;padding:10px 20px;font-size:15.5px;color:rgba(253,247,234,.85)}
:where(.page-entreprise) .frise b{font-family:'Newsreader',serif;font-weight:600;font-size:18px;white-space:nowrap;color:var(--moutarde);min-width:120px;flex:none}
/* Cinq cartes : 3 + 2 plutôt que 4 + 1 orpheline. */
@media (min-width:1081px){
  :where(.page-entreprise) .cartes{grid-template-columns:repeat(3,1fr)}
}
:where(.page-entreprise) .carte{padding:0 0 28px;overflow:hidden}
:where(.page-entreprise) .carte .vignette img,:where(.page-entreprise) .carte .vignette.sans-photo{aspect-ratio:3/2;border-radius:0}
:where(.page-entreprise) .carte .corps{padding:6px 24px 0}
:where(.page-entreprise) .etiquette-theme{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:10px;background:rgba(253,247,234,.95);border:1px solid var(--bord);border-radius:999px;padding:5px 14px 5px 6px}
:where(.page-entreprise) .etiquette-theme b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--sapin);color:var(--creme);font-family:'Newsreader',serif;font-weight:600;font-size:15px;flex:none}
:where(.page-entreprise) .etiquette-theme span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
:where(.page-entreprise) .note-carte{font-size:14px;color:var(--encre-doux);font-style:italic;text-wrap:pretty}
:where(.page-entreprise) .puces{margin-top:auto;padding-top:6px}
:where(.page-entreprise) .puces .fort{border-color:var(--sapin);color:var(--sapin)}
:where(.page-entreprise) .formules{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
:where(.page-entreprise) .formule{border-radius:var(--rayon);padding:36px 34px;display:flex;flex-direction:column;gap:12px;background:#FFF;border:1px solid var(--bord);box-shadow:var(--ombre)}
:where(.page-entreprise) .formule .etiquette{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sapin)}
:where(.page-entreprise) .formule h3{font-size:28px}
:where(.page-entreprise) .formule .montant{font-family:'Newsreader',serif;font-weight:500;font-size:58px;line-height:1;letter-spacing:-.03em}
:where(.page-entreprise) .formule .detail{font-size:16.5px;color:var(--encre-doux)}
:where(.page-entreprise) .formule .menu{font-size:15px;line-height:1.6;color:var(--encre-doux)}
:where(.page-entreprise) .economie{align-self:flex-start;background:var(--moutarde);color:var(--encre);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}
:where(.page-entreprise) .compris{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
:where(.page-entreprise) .compris span{border:1px solid var(--bord);background:#FFF;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}
:where(.page-entreprise) .mentions-prix{font-size:15px;color:var(--encre-doux);margin-top:20px;text-wrap:pretty}
:where(.page-entreprise) .encart-team{margin-top:32px}
:where(.page-entreprise) .suite .etapes{margin-bottom:48px}
:where(.page-entreprise) .contact{margin-top:28px;font-size:15.5px;line-height:1.9;color:rgba(253,247,234,.82)}
:where(.page-entreprise) .contact a{color:var(--moutarde)}
:where(.page-entreprise) .encart-cta form{background:#FFF;border-radius:var(--rayon);padding:28px;color:var(--encre)}
:where(.page-entreprise) .encart-cta form label{color:var(--encre-doux)}
/* Dans l'encart sapin, les <p> du formulaire (note, confirmation) restent
   ceux d'un formulaire, pas ceux de l'encart : la règle .encart-cta p les
   battrait sinon (crème sur blanc). */
:where(.page-entreprise) .encart-cta form p{color:var(--encre-doux);font-size:15px;max-width:none;margin-top:0}
:where(.page-entreprise) .encart-cta form #confirmation{color:var(--sapin)}
:where(.page-entreprise) .etiquette-theme{color:var(--encre)}
:where(.page-entreprise) .photo-large{padding-top:0}
@media (max-width:1080px){
  :where(.page-entreprise) .formules,:where(.page-entreprise) .encart-double{grid-template-columns:1fr}
}
@media (max-width:860px){
  :where(.page-entreprise) .citation{padding-top:48px;padding-bottom:48px}
  :where(.page-entreprise) .encart-double{padding:28px 24px}
  :where(.page-entreprise) .frise div{flex-direction:column;align-items:flex-start;gap:2px;border-radius:16px;padding:12px 18px}
  :where(.page-entreprise) .frise b{min-width:0}
  :where(.page-entreprise) .formule{padding:28px 24px}
  :where(.page-entreprise) .encart-cta form{padding:20px}
}

/* ==================================================================
   reservation.html — ce qui lui est propre
   Le formulaire porte le calendrier (fieldset « Les dates ») ; les étapes
   sont numérotées en CSS, un fieldset [hidden] ne compte pas.
   ================================================================== */
:where(.page-reservation) .resa-grille{display:grid;grid-template-columns:1.22fr .78fr;gap:56px;align-items:start}
:where(.page-reservation) .resa-infos{position:sticky;top:96px}
:where(.page-reservation) .resa-infos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon);margin-top:28px}
:where(.page-reservation) .infos{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:28px}
:where(.page-reservation) .infos li{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--bord);font-size:16px;color:var(--encre-doux)}
:where(.page-reservation) .infos li:last-child{border-bottom:1px solid var(--bord)}
:where(.page-reservation) .infos b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sapin);font-weight:600}
:where(.page-reservation) .infos a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}
:where(.page-reservation) form{counter-reset:etape;gap:20px}
:where(.page-reservation) fieldset.etape{counter-increment:etape;background:#FFF;border:1px solid var(--bord);border-radius:var(--rayon);padding:26px 28px;gap:14px;box-shadow:var(--ombre)}
:where(.page-reservation) fieldset.etape>legend{float:left;width:100%;display:flex;align-items:center;gap:12px;font-family:'Newsreader',serif;font-size:23px;font-weight:500;color:var(--encre);margin-bottom:12px}
:where(.page-reservation) fieldset.etape>legend::before{content:counter(etape);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--sapin);color:var(--creme);font-size:16px;font-weight:600;flex:none}
:where(.page-reservation) fieldset.etape>legend+*{clear:both}
:where(.page-reservation) .aide{font-size:15px;color:var(--encre-doux);text-wrap:pretty}
:where(.page-reservation) .aide a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}
:where(.page-reservation) .cal-legende{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--encre-doux)}
:where(.page-reservation) .cal-legende span{display:inline-flex;align-items:center;gap:7px}
:where(.page-reservation) .cal-legende i{width:14px;height:14px;border-radius:4px;border:1px solid var(--bord);background:#FFF}
:where(.page-reservation) .cal-legende .l-choisi{background:var(--sapin);border-color:var(--sapin)}
:where(.page-reservation) .cal-legende .l-complet{background:#F2EDE1}
:where(.page-reservation) .calendrier{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
:where(.page-reservation) .mois{border:1px solid var(--bord);border-radius:14px;padding:16px 12px 12px}
:where(.page-reservation) .mois-titre{font-family:'Newsreader',serif;font-weight:500;font-size:19px;text-align:center;margin-bottom:10px;text-transform:capitalize}
:where(.page-reservation) .grille{width:100%;border-collapse:collapse;table-layout:fixed}
:where(.page-reservation) .grille caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.page-reservation) .grille th{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#96A08F;padding-bottom:8px}
:where(.page-reservation) .grille abbr{text-decoration:none}
:where(.page-reservation) .grille td{padding:2px;text-align:center}
:where(.page-reservation) .case{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;min-height:46px;border-radius:10px;font-family:inherit;font-size:15px;color:#BAB5A7;padding:3px 2px;border:1px solid transparent}
:where(.page-reservation) .case .h{font-size:10.5px;font-weight:500}
:where(.page-reservation) .case-libre{background:#FFF;border-color:var(--bord);color:var(--sapin);font-weight:600;cursor:pointer;transition:border-color .14s,background .14s}
:where(.page-reservation) .case-libre:hover{border-color:var(--sapin)}
:where(.page-reservation) .case-libre[aria-pressed="true"]{background:var(--sapin);border-color:var(--sapin);color:#FFF}
:where(.page-reservation) .case-complet{background:#F2EDE1;color:#A8A192;text-decoration:line-through}
:where(.page-reservation) .cal-themes{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--encre-doux);border-top:1px solid var(--bord);padding-top:12px}
:where(.page-reservation) .cal-themes b{color:var(--encre);font-weight:600}
:where(.page-reservation) .cal-vide{background:var(--creme);border-radius:12px;padding:16px 18px;font-size:15.5px;color:var(--encre-doux);text-wrap:pretty}
:where(.page-reservation) .cal-vide a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}
:where(.page-reservation) #recap-dates{font-size:15.5px;line-height:1.5;color:var(--encre);background:var(--creme);border:1.5px dashed var(--bord);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:3px}
:where(.page-reservation) #recap-dates a{color:var(--sapin);font-weight:500;text-decoration:underline;text-underline-offset:3px}
:where(.page-reservation) .note-paiement{font-size:15px;color:var(--encre-doux)}
:where(.page-reservation) .accordeon{max-width:880px}
@media (max-width:1080px){
  :where(.page-reservation) .resa-grille{grid-template-columns:1fr}
  :where(.page-reservation) .resa-infos{position:static}
}
@media (max-width:860px){
  :where(.page-reservation) fieldset.etape{padding:20px 18px}
  :where(.page-reservation) .mois{padding:14px 8px 10px}
  :where(.page-reservation) .case{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  :where(.page-reservation) .case-libre{transition:none}
}

/* ==================================================================
   mentions-legales.html — ce qui lui est propre
   La page la plus maigre du site : du texte dans une colonne.
   ================================================================== */
:where(.page-mentions) .legal{padding:64px var(--marge) 80px;max-width:calc(880px + 2 * var(--marge));margin:0 auto}
:where(.page-mentions) .legal h1{font-size:clamp(40px,5vw,60px);margin:14px 0 10px}
:where(.page-mentions) .legal .chapeau{font-size:18px;color:var(--encre-doux);margin-bottom:44px;text-wrap:pretty}
:where(.page-mentions) .legal section{margin-bottom:40px}
:where(.page-mentions) .legal h2{font-size:26px;margin-bottom:14px}
:where(.page-mentions) .legal p{margin-bottom:12px;text-wrap:pretty}
:where(.page-mentions) .legal p:last-child{margin-bottom:0}
:where(.page-mentions) .legal ul{margin:0 0 12px 20px}
:where(.page-mentions) .legal li{margin-bottom:6px;text-wrap:pretty}
:where(.page-mentions) .legal a{color:var(--sapin);text-decoration:underline;text-underline-offset:3px}
:where(.page-mentions) .legal a:hover{color:var(--terracotta)}
:where(.page-mentions) .encart-legal{background:#FFF;border:1px solid var(--bord);border-radius:16px;padding:22px 26px}
:where(.page-mentions) .encart-legal p:first-child{font-weight:600}
:where(.page-mentions) .maj{font-size:15px;color:var(--encre-doux);font-style:italic}
@media (max-width:860px){
  :where(.page-mentions) .legal{padding-top:44px;padding-bottom:60px}
}