/* Facteur Femmes : composants des pages du site (accueil, services, ateliers, offres, paiement, etc.)
   Dépend de tokens.css + article.css (en-tête, pied de page, boutons, cartes de thème, carton Plan d'action).
   Source de vérité : design system « Facteur Femmes » (README, tokens). Règles clés :
   - coins asymétriques (haut gauche et bas droite seulement), contour 2px filet, ombre shadow
   - couleur unie pour les thèmes, dégradé pour les offres
   - un seul bouton principal par zone, liens toujours soulignés
   - thème clair et foncé : on utilise les jetons de rôle, jamais la palette brute sur les fonds de page */

/* ---------- Bases ---------- */
[hidden] { display: none !important; }
.titre-page { font: var(--text-H1); letter-spacing: -0.01em; color: var(--accent); margin: 8px 0 12px; }
.titre-page .mot-cle-doux { color: var(--texte-doux); }
.titre-section { font: var(--text-H2); color: var(--accent); margin: 8px 0 16px; }
.sous-titre { font: var(--text-H3); color: var(--texte); margin: 0 0 8px; }
.etiquette { font: var(--text-Etiquette); letter-spacing: 0.16em; text-transform: uppercase; color: var(--texte-doux); margin: 0; }
.chapeau { font: var(--text-Normal); max-width: 62ch; margin: 0; }
.petit { font: var(--text-Petit); }
.doux { color: var(--texte-doux); }
.band { padding: 56px 0; }
.band-sombre { background: #170c13; color: #f7efe4; }
.band-sombre :focus-visible, .band-rose :focus-visible { outline-color: currentColor; }
.band-sombre a:not(.btn) { color: #f7efe4; }
.band-sombre .titre-section, .band-sombre h2 { color: #f7efe4; }
.band-sombre .etiquette { color: #e9cfc6; }
.band-rose { background: var(--fond-secondaire); color: var(--texte); }
.band-rose .etiquette, .band-rose .doux { color: var(--texte); }
.band-rose a:not(.btn) { color: var(--texte); }
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile-l { display: flex; flex-direction: column; gap: 28px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; align-items: start; }
.cols-centre { align-items: center; }
.rangee-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.btn-turquoise { background: #3dbdb0; color: #170c13; border-color: #3dbdb0; box-shadow: var(--shadow); }
.btn-contour-creme { background: transparent; color: #f7efe4; border-color: #f7efe4; }
.btn-contour-noir { background: transparent; color: #170c13; border-color: #170c13; }
.btn-noir { background: #170c13; color: #f7efe4; border-color: #170c13; box-shadow: -4px 4px 3px 1px #00000044; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn-petit { min-height: 42px; padding: 0 18px; font-size: 16px; }
.btn-plein { width: 100%; }
.lien-souligne { text-decoration: underline; text-underline-offset: 3px; }
.entete-nav-actuel { text-decoration-thickness: 3px; }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* Chemin de fer (fil d'Ariane) hors bande sombre */
.chemin { font: var(--text-Petit); color: var(--texte-doux); margin: 0 0 20px; }
.chemin a { color: var(--texte-doux); }
.band-sombre .chemin, .band-sombre .chemin a { color: #e9cfc6; }

/* Cartons */
.carton { background: var(--fond); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); padding: var(--Carton); min-width: 0; }
.carton h2, .carton h3 { margin-top: 0; }
.carton p { margin: 0 0 12px; }
.carton p:last-child { margin-bottom: 0; }
.carton-rose { background: var(--fond-secondaire); }
.carton-sombre { background: #170c13; color: #f7efe4; border-color: #5b3a5a; }
.carton-sombre a:not(.btn) { color: #f7efe4; }
.cartons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--Carton); }
.carton-theme { background: var(--th-bg); color: var(--th-fg); border-color: var(--th-bg); }

/* Grain et dégradés (réservés aux offres) */
.grain { position: relative; overflow: hidden; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.grain > * { position: relative; z-index: 1; }
.offre-1 { background: #f7efe4; color: #170c13; background-image: radial-gradient(60% 70% at 100% 0%, #efb9a5 0%, transparent 70%), radial-gradient(70% 80% at 0% 100%, #e9cfc6 0%, transparent 75%), radial-gradient(40% 50% at 55% 55%, #f3d9c4 0%, transparent 80%); }
.offre-2 { background: #0a4a47; color: #f7efe4; background-image: radial-gradient(60% 75% at 100% 0%, #3dbdb0 0%, transparent 70%), radial-gradient(70% 80% at 0% 100%, #0f6b66 0%, transparent 75%), radial-gradient(35% 45% at 50% 60%, #1f8a82 0%, transparent 80%); }
.offre-3 { background: #a8203f; color: #f7efe4; background-image: radial-gradient(60% 75% at 100% 0%, #e9cfc6 0%, transparent 65%), radial-gradient(70% 80% at 0% 100%, #5b3a5a 0%, transparent 75%), radial-gradient(40% 50% at 55% 50%, #c43a5a 0%, transparent 80%); }
.offre-4 { background: #170c13; color: #f7efe4; background-image: radial-gradient(60% 75% at 100% 0%, #5b3a5a 0%, transparent 70%), radial-gradient(70% 80% at 0% 100%, #a8203f 0%, transparent 70%), radial-gradient(35% 45% at 50% 60%, #2a1424 0%, transparent 80%); }
.offre-1 a:not(.btn), .offre-2 a:not(.btn), .offre-3 a:not(.btn), .offre-4 a:not(.btn) { color: inherit; }
.carte-offre { border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: var(--shadow); }
.pastille-offre { display: inline-flex; align-items: center; gap: 10px; font: var(--text-Etiquette); letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border: 2px solid currentColor; border-radius: var(--coins); }
.pastille-offre a { color: inherit; }
.num-offre { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #f7efe4; color: #170c13; border-radius: 8px 0 8px 0; font: 700 22px/1 var(--font-georgia); }
.offre-1 .num-offre { background: #170c13; color: #f7efe4; }

/* Carrés Toi / Moi : le même sens de couleur sur tous les fonds */
.toi-moi { background: #170c13; color: #f7efe4; border-radius: 8px 0 8px 0; padding: 8px 10px 6px; display: inline-block; }
.toi-moi svg { display: block; }
.toi-moi .legende { display: flex; gap: 14px; justify-content: flex-end; font-size: 13px; font-weight: 700; margin-top: 4px; }
.toi-moi .legende i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.toi-moi .legende .t i { background: #f7efe4; }
.toi-moi .legende .m i { background: #3dbdb0; }

/* ---------- Accueil ---------- */
.hero { padding: 56px 0; }
.hero-grille { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero-texte { flex: 1 1 520px; min-width: 0; }
.hero-texte .titre-page { font-size: 50px; line-height: 1.12; margin: 12px 0 18px; }
.hero-texte .chapeau { font-size: 22px; margin-bottom: 24px; }
.preuves { display: flex; flex-wrap: wrap; gap: 8px 28px; font: var(--text-Petit); font-weight: 700; color: var(--texte-doux); margin: 0; padding: 0; list-style: none; }
.hero-cadeau { flex: 1 1 420px; min-width: 0; }
.cadeau-carte { background: #170c13; color: #f7efe4; border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.cadeau-entete { display: flex; gap: 18px; align-items: center; }
.cadeau-entete .etiquette { color: #e9cfc6; }
.cadeau-titre { font: 700 26px/1.25 var(--font-georgia); margin: 4px 0 0; }
.cadeau-carte p { margin: 0; font-size: 18px; }
.cadeau-carte label { display: block; font: var(--text-Petit); font-weight: 700; margin: 0 0 6px; }
.cadeau-carte .input { background: #fff8f0; color: #170c13; border-color: #5b3a5a; }
.cadeau-carte .petit { color: #e9cfc6; }
.cadeau-carte .consent span { color: #f7efe4; }
.offres-compactes { display: flex; flex-wrap: wrap; gap: 24px; }
.offre-compacte { flex: 1 1 240px; min-width: 0; padding: 22px; min-height: 250px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.offre-compacte .nom { font: 700 28px/1.2 var(--font-georgia); }
.offre-compacte .accroche { font-size: 17px; flex: 1; }
.offre-compacte .voir { font: var(--text-Bouton); text-decoration: underline; text-underline-offset: 3px; }
.appel-bloc { margin-top: 28px; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); background: var(--fond); display: flex; flex-wrap: wrap; overflow: hidden; }
.appel-gauche { flex: 1 1 460px; padding: 36px 40px; }
.appel-gauche .etiquette { color: var(--accent); }
.appel-gauche h2 { font: 700 38px/1.15 var(--font-georgia); color: var(--accent); margin: 6px 0 10px; }
.appel-gauche p { margin: 0; font-size: 19px; }
.appel-droite { flex: 0 1 380px; background: #170c13; color: #f7efe4; padding: 32px 36px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.appel-droite ul { margin: 0; padding: 0; list-style: none; font-size: 18px; display: grid; gap: 8px; }
.appel-droite li::before { content: "\2713"; margin-right: 10px; color: #3dbdb0; font-weight: 700; }
.appel-droite .btn { align-self: flex-start; margin-top: 8px; }

/* Fenêtre d'inscription (pop-up) */
.popup-voile { position: fixed; inset: 0; z-index: 200; background: rgba(23, 12, 19, 0.7); display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.popup-voile.ouvert { display: flex; }
.popup-boite { position: relative; width: 520px; max-width: 100%; background: #170c13; color: #f7efe4; border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: -8px 8px 4px 1px #00000066; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.popup-boite label { font: var(--text-Petit); font-weight: 700; }
.popup-boite .input { background: #fff8f0; color: #170c13; border-color: #5b3a5a; }
.popup-fermer { position: absolute; top: 6px; right: 10px; width: 44px; height: 44px; background: transparent; border: 0; color: #f7efe4; font-size: 30px; cursor: pointer; }
.popup-non { align-self: center; background: none; border: 0; color: #f7efe4; font: var(--text-Petit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px; }

/* ---------- Services ---------- */
.services-grille { display: flex; flex-wrap: wrap; gap: 28px; }
.carte-service { flex: 1 1 460px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.carte-service .tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.carte-service .tete-gauche { display: flex; align-items: center; gap: 12px; }
.carte-service h2 { font: 700 40px/1.15 var(--font-georgia); margin: 6px 0 2px; color: inherit; }
.carte-service .phrase { margin: 0; font-weight: 700; font-size: 20px; }
.carte-service ul { margin: 0; padding-left: 22px; font-size: 18px; flex: 1; max-width: 62%; }
.carte-service li { margin: 3px 0; }
.carte-service .bas { border-top: 1px solid currentColor; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.carte-service .bas .prix { font: 700 28px/1.2 var(--font-georgia); }
.carte-service .bas .duree { font-size: 16px; }
.carte-service .dessin { position: absolute; right: 18px; bottom: 74px; width: 38%; max-width: 190px; opacity: 0.9; pointer-events: none; z-index: 0; }

/* ---------- Pages d'offre ---------- */
.hero-offre { padding: 40px 0 56px; }
.hero-offre .chemin, .hero-offre .chemin a { color: inherit; }
.hero-offre-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-offre h1 { font: var(--text-H1); letter-spacing: -0.01em; margin: 16px 0; color: inherit; font-size: 44px; line-height: 1.15; }
.hero-offre h1 .mot-cle { color: #e9cfc6; }
.offre-1 h1 .mot-cle { color: #a8203f; }
.hero-offre .chapeau { margin-bottom: 24px; }
.panneau-faits { background: #170c13; color: #f7efe4; border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 14px; }
.panneau-faits dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; }
.panneau-faits dt { font: var(--text-Etiquette); letter-spacing: 0.16em; text-transform: uppercase; color: #e9cfc6; align-self: center; }
.panneau-faits dd { margin: 0; font-size: 18px; }
.panneau-faits .prix-fort { font: 700 28px/1.2 var(--font-georgia); }
.panneau-faits .note { font: var(--text-Petit); color: #e9cfc6; margin: 0; }
.panneau-faits .toi-moi { background: #2a1424; justify-self: start; }
.liste-cartons { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.liste-cartons li { background: var(--fond); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); padding: var(--Carton); font-size: 18px; }
.etapes-num { display: grid; gap: var(--Carton); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: etape; }
.etape { background: var(--fond); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); padding: var(--Carton); }
.etape .n { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--fond); border-radius: 8px 0 8px 0; font: 700 22px/1 var(--font-georgia); margin-bottom: 12px; }
.etape h3 { font: var(--text-H3); margin: 0 0 8px; }
.etape p { margin: 0; font-size: 18px; }
.livrables { padding: 56px 0; }
.livrables .carton { background: rgba(247, 239, 228, 0.1); color: #f7efe4; border-color: #f7efe4; box-shadow: none; }
.livrables h3 { color: #f7efe4; }
.animatrice { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.animatrice .photo { width: 200px; flex: none; }
.animatrice .photo img { width: 100%; height: auto; display: block; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); }
.animatrice .texte { flex: 1 1 320px; min-width: 0; }
.faq { display: grid; gap: 14px; }
.faq details { background: var(--fond); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; padding: 16px 20px; font: var(--text-H3); font-size: 20px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 24px/1 var(--font-arial); color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .reponse { padding: 0 20px 18px; display: grid; gap: 10px; }
.faq .reponse p { margin: 0; font-size: 18px; max-width: 70ch; }

/* « Et ensuite ? » */
.ensuite-offre { padding: 56px 0; }
.ensuite-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.gros-carton { padding: 32px; border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.gros-carton h2 { font: var(--text-H1); color: inherit; margin: 0; }
.gros-carton .btn { align-self: flex-start; margin-top: 8px; }
.echelle { display: flex; flex-wrap: wrap; gap: 6px 18px; font: var(--text-Petit); margin: 12px 0 0; padding: 0; list-style: none; }
.echelle .actuelle { font-weight: 700; }
.lire-attendant { display: grid; gap: 12px; align-content: start; }
.mini-carte { display: block; background: var(--th-bg, #5b3a5a); color: var(--th-fg, #f7efe4); border-radius: var(--coins); box-shadow: var(--shadow); padding: 16px; text-decoration: none; }
.mini-carte .titre { font: 700 20px/1.3 var(--font-georgia); text-decoration: underline; text-underline-offset: 3px; display: block; margin-top: 4px; }

/* ---------- Formulaires ---------- */
.champ { display: grid; gap: 6px; margin: 0 0 16px; }
.champ > label, .champ > legend, .etiq { font: var(--text-Petit); font-weight: 700; }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 0 14px; font: var(--text-Petit); font-size: 17px; background: #fff8f0; color: #170c13; border: 2px solid var(--filet); border-radius: 6px; box-sizing: border-box; }
.textarea { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select { appearance: auto; }
.aide { font: var(--text-Petit); color: var(--texte-doux); margin: 0; }
.band-sombre .aide, .carton-sombre .aide { color: #e9cfc6; }
.consent { display: flex; gap: 12px; align-items: flex-start; font: var(--text-Petit); font-weight: 400; }
.consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--action); }
.consent span { max-width: 62ch; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.erreur { color: var(--accent); font: var(--text-Petit); font-weight: 700; margin: 8px 0 0; min-height: 1.4em; }
.band-sombre .erreur, .carton-sombre .erreur, .cadeau-carte .erreur, .popup-boite .erreur { color: #e9cfc6; }
.groupe-radios { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; min-width: 0; }
.groupe-radios legend { font: var(--text-Petit); font-weight: 700; padding: 0; margin-bottom: 8px; }
.choix { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--filet); border-radius: var(--coins); background: var(--fond); color: var(--texte); cursor: pointer; font: var(--text-Petit); font-size: 17px; }
.choix input { width: 22px; height: 22px; flex: none; accent-color: var(--action); }
.choix:has(input:checked) { border-color: var(--action); box-shadow: var(--shadow); }
.choix .prix { margin-left: auto; font: 700 22px/1 var(--font-georgia); white-space: nowrap; }
.puces-themes { display: flex; flex-wrap: wrap; gap: 10px; }
.puce { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--filet); border-radius: var(--coins); background: var(--fond); font: var(--text-Petit); font-weight: 700; cursor: pointer; color: var(--texte); }
.puce input { width: 18px; height: 18px; accent-color: var(--action); }
.puce:has(input:checked) { background: var(--th-bg, var(--accent)); color: var(--th-fg, var(--fond)); border-color: var(--th-bg, var(--accent)); }
.form-ok { background: var(--fond-secondaire); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); padding: 20px; box-shadow: var(--shadow); }
.carton-sombre .form-ok, .cadeau-carte .form-ok, .popup-boite .form-ok { background: #f7efe4; color: #170c13; }

/* ---------- Ateliers ---------- */
.bandeau-preinscription { background: #170c13; color: #f7efe4; font: var(--text-Petit); }
.bandeau-preinscription .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: center; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.bandeau-preinscription a { color: #f7efe4; font-weight: 700; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.filtres button, .filtres a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font: var(--text-Petit); font-weight: 700; border: 2px solid var(--filet); border-radius: var(--coins); background: var(--fond); color: var(--texte); cursor: pointer; text-decoration: none; }
.filtres [aria-pressed="true"], .filtres [aria-current="true"] { background: var(--accent); color: var(--fond); border-color: var(--accent); }
.rangees { display: grid; gap: var(--Carton); }
.rangee { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; background: var(--fond); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); overflow: hidden; }
.rangee[hidden] { display: none; }
.rangee .bloc { background: var(--th-bg); color: var(--th-fg); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; }
.rangee .bloc svg { width: 100%; height: auto; max-height: 90px; }
.rangee .bloc .etiquette { color: inherit; }
.rangee .corps-rangee { padding: 18px 22px; display: grid; gap: 6px; align-content: center; }
.rangee .date { font: 700 20px/1.3 var(--font-georgia); }
.rangee h3 { font: var(--text-H3); margin: 0; }
.rangee h3 a { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.rangee .phrase { margin: 0; font-size: 18px; }
.rangee .action-rangee { padding: 18px 22px; display: grid; gap: 8px; align-content: center; justify-items: start; }
.th-prioriser, .th-planifier, .th-equipe, .th-outils { }
.suite-liste { text-align: center; margin-top: 24px; }

/* Page d'un atelier */
.bande-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--Carton); margin-top: 28px; }
.fait { border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); padding: 14px 18px; background: var(--fond); color: var(--texte); }
.fait .etiquette { display: block; margin-bottom: 4px; }
.fait b { font: 700 20px/1.3 var(--font-georgia); display: block; }
.fait span { font: var(--text-Petit); color: var(--texte-doux); }
.band-sombre .fait { background: transparent; border-color: #e9cfc6; color: #f7efe4; }
.band-sombre .fait span { color: #e9cfc6; }
.barre-prix { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.barre-prix .gros { font: 700 48px/1 var(--font-georgia); }
.barre-prix s { font-size: 20px; opacity: 0.85; }
.deroule { display: grid; gap: 16px; }
.moment { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.moment .heure { font: 700 20px/1.3 var(--font-georgia); padding-top: 18px; }
.moment.pause .heure { padding-top: 0; }
.moment.pause > div:last-child { color: var(--texte-doux); font: var(--text-Petit); }
ol.liste-etapes { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 10px; }
ol.liste-etapes li::marker { font-weight: 700; color: var(--accent); }
.livre { font: var(--text-Petit); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); }
.deux-prea { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px; align-items: stretch; }
.prea { border: 2px solid #f7efe4; border-radius: var(--coins); box-shadow: -5px 5px 3px 1px #00000055; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.prea-gratuit { background: #f7efe4; color: #170c13; border-color: #5b3a5a; }
.prea-gratuit .etiquette { color: #5b3a5a; }
.prea-gratuit h2 { color: #a8203f; }
.prea-payant { background: #a8203f; color: #f7efe4; }
.prea-payant .etiquette { color: #f7efe4; }
.prea .btn-contour-action { background: transparent; color: #0f6b66; border-color: #0f6b66; align-self: flex-start; box-shadow: none; }
.prea h2 { font: var(--text-H2); margin: 0; }
.prea label { font: var(--text-Petit); font-weight: 700; display: block; margin: 0 0 6px; }
.prea .input { background: #fff8f0; border-color: #f7efe4; }
.prea-payant .input { background: #f7efe4; }
.prea .erreur { color: inherit; }
.prea-gratuit .erreur { color: #a8203f; }
.zone-prix { font: var(--text-Petit); }

/* ---------- Blog / liste des articles ---------- */
.band-articles { background: #170c13; color: #f7efe4; padding: 40px 0 64px; }
.band-articles h1 { font: var(--text-H1); color: #f7efe4; margin: 8px 0 12px; }
.band-articles .etiquette { color: #e9cfc6; }
.band-articles a:not(.carte-art) { color: #f7efe4; }
.band-articles .filtres button { background: transparent; color: #f7efe4; border-color: #e9cfc6; }
.band-articles .filtres [aria-pressed="true"] { background: #f7efe4; color: #170c13; border-color: #f7efe4; }
.a-la-une { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin: 12px 0 40px; }
.a-la-une .vignette { border-radius: var(--coins); border: 2px solid #e9cfc6; overflow: hidden; box-shadow: var(--shadow); background: #f7efe4; }
.a-la-une .vignette img { display: block; width: 100%; height: auto; }
.a-la-une h2 { font: var(--text-H2); margin: 8px 0 12px; color: #f7efe4; }
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--Carton); }
.carte-art { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--th-bg); color: var(--th-fg); border: 2px solid #5b3a5a; border-radius: var(--coins); box-shadow: -5px 5px 3px 1px #00000066; padding: var(--Carton); }
.carte-art[hidden] { display: none; }
.carte-art .etiquette { color: inherit; }
.carte-art .titre { font: var(--text-H3); font-size: 22px; text-decoration: underline; text-underline-offset: 3px; margin: 0; }
.carte-art .resume { font-size: 16px; margin: 0; }
.carte-art .lecture { font: var(--text-Petit); margin: auto 0 0; }
.carte-art .vignette-petite { border-radius: var(--coins); overflow: hidden; border: 2px solid currentColor; }
.carte-art .vignette-petite img { display: block; width: 100%; height: auto; }

/* ---------- Confirmations, paiement, questionnaire, calendrier ---------- */
.confirm-tete { padding: 56px 0; }
.confirm-tete .wrap { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 28px; align-items: start; }
.coche { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: #a8203f; border-radius: var(--coins); }
.coche svg { width: 48px; height: 48px; }
.coche-creme { background: #f7efe4; }
.confirm-tete h1 { font: var(--text-H1); margin: 8px 0 12px; color: var(--accent); }
.confirm-tete.offre-2 h1, .confirm-tete.offre-4 h1, .confirm-tete.offre-3 h1 { color: #f7efe4; }
.confirm-tete .etiquette { color: inherit; opacity: 0.9; }
.parcours-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 18px; }
.parcours-etapes li { display: flex; gap: 12px; align-items: center; }
.parcours-etapes .rond { width: 28px; height: 28px; border-radius: 6px 0 6px 0; background: var(--action); color: var(--sur-action); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.parcours-etapes .rond.vide { background: transparent; border: 2px solid currentColor; color: inherit; }
.page-paiement { padding: 40px 0 64px; }
.paiement-grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.recap { padding: 28px; }
.recap h2 { font: var(--text-H2); margin: 4px 0 6px; color: inherit; }
.recap ul { margin: 12px 0 18px; padding-left: 20px; display: grid; gap: 6px; }
.totaux { border-top: 1px solid currentColor; padding-top: 12px; display: grid; gap: 6px; }
.totaux .ligne { display: flex; justify-content: space-between; gap: 12px; }
.totaux .total { font: 700 24px/1.3 var(--font-georgia); }
.paypal-zone { min-height: 60px; margin: 8px 0; }
.avis-ferme { background: var(--fond-secondaire); border: 2px solid var(--filet); border-radius: var(--coins); padding: 20px; color: var(--texte); }
.prive-note { font: var(--text-Petit); border: 2px dashed var(--filet); border-radius: var(--coins); padding: 10px 14px; color: var(--texte-doux); margin: 0 0 20px; }
.quest-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.bloc-quest { margin: 0 0 28px; }
.bloc-quest > h2 { display: flex; gap: 14px; align-items: center; font: var(--text-H2); font-size: 26px; margin: 0 0 16px; color: var(--accent); }
.bloc-quest > h2 .n { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--fond); border-radius: 8px 0 8px 0; font: 700 20px/1 var(--font-georgia); flex: none; }
.cote-sticky { position: sticky; top: 20px; display: grid; gap: 20px; }
.cal-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.cal { padding: 24px; position: relative; }
.cal h2 { font: var(--text-H2); margin: 0 0 16px; }
.cal-mois { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-mois .nom { font: 700 22px/1.2 var(--font-georgia); text-transform: capitalize; }
.cal-nav { width: 44px; height: 44px; border: 2px solid var(--filet); border-radius: var(--coins); background: var(--fond); color: var(--texte); font-size: 22px; cursor: pointer; }
.cal-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.cal-semaine, .cal-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-semaine span { font: var(--text-Etiquette); text-align: center; color: var(--texte-doux); padding: 6px 0; }
.cal-jour { min-height: 46px; border: 2px solid transparent; background: transparent; color: var(--texte); font: var(--text-Petit); font-size: 17px; border-radius: 6px 0 6px 0; }
.cal-jour:disabled { color: var(--texte-doux); opacity: 0.45; }
.cal-jour.dispo { border-color: var(--filet); cursor: pointer; font-weight: 700; background: var(--fond); }
.cal-jour.choisi { background: var(--action); color: var(--sur-action); border-color: var(--action); }
.heures { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.heure-btn { min-height: 44px; padding: 0 16px; border: 2px solid var(--filet); border-radius: var(--coins); background: var(--fond); color: var(--texte); font: var(--text-Petit); font-weight: 700; cursor: pointer; }
.heure-btn[aria-pressed="true"] { background: var(--action); color: var(--sur-action); border-color: var(--action); }
.cal-verrou { position: absolute; inset: 0; background: color-mix(in srgb, var(--fond) 82%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px; border-radius: inherit; z-index: 2; }
.resume-reservation { padding: 24px; display: grid; gap: 12px; }
.resume-reservation h2 { color: #f7efe4; font: var(--text-H3); margin: 0; }
.resume-reservation dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.resume-reservation dt { color: #e9cfc6; font: var(--text-Petit); }
.resume-reservation dd { margin: 0; font-size: 18px; }

/* ---------- À propos ---------- */
.bande-preuves { background: #170c13; color: #f7efe4; }
.bande-preuves .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.preuve .chiffre { font: 700 48px/1.1 var(--font-georgia); color: #e9cfc6; display: block; }
.preuve .legende { font: var(--text-Petit); }
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.colonne-photos { display: grid; gap: 20px; }
.colonne-photos figure { margin: 0; }
.colonne-photos img { width: 100%; height: auto; display: block; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); }
.colonne-photos figcaption { font: var(--text-Petit); color: var(--texte-doux); margin-top: 6px; }
.trois-cartons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--Carton); }
.trois-cartons .c1 { background: #a8203f; color: #f7efe4; }
.trois-cartons .c2 { background: #0f6b66; color: #f7efe4; }
.trois-cartons .c3 { background: #5b3a5a; color: #f7efe4; }
.trois-cartons .carton { border-color: transparent; }
.trois-cartons h3 { color: inherit; }

/* ---------- Légal, 404, divers ---------- */
.legal-grille { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-grille > *, .cols > *, .quest-grille > *, .paiement-grille > *, .cal-grille > *, .ensuite-grille > *, .hero-offre-grille > * { min-width: 0; }
.legal-menu { position: sticky; top: 20px; display: grid; gap: 8px; font: var(--text-Petit); }
.legal-texte h2 { font: var(--text-H2); color: var(--accent); margin: 48px 0 12px; scroll-margin-top: 20px; }
.legal-texte h2:first-of-type { margin-top: 0; }
.legal-texte h3 { font: var(--text-H3); margin: 28px 0 8px; }
.legal-texte p, .legal-texte li { max-width: 70ch; }
.legal-brouillon { border: 2px dashed var(--accent); border-radius: var(--coins); padding: 14px 18px; margin: 0 0 28px; background: var(--fond-secondaire); color: var(--texte); font: var(--text-Petit); }
.legal-tableau { overflow-x: auto; }
.legal-tableau table { border-collapse: collapse; width: 100%; font: var(--text-Petit); min-width: 520px; }
.legal-tableau th, .legal-tableau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.page-404 { padding: 72px 0; }
.liens-404 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--Carton); margin-top: 20px; }
.liens-404 a { display: block; padding: var(--Carton); background: var(--fond); color: var(--texte); border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); font: var(--text-H3); font-size: 20px; }

/* Texte à compléter (visible seulement dans la version de travail) */
.ac { background: #ffe9a8; color: #170c13; outline: 1px dashed #8a6a00; }
.sans-ac .ac { background: transparent; outline: 0; }

/* ---------- Petits écrans ---------- */
@media (max-width: 980px) {
  .hero-offre-grille, .ensuite-grille, .cal-grille, .quest-grille, .paiement-grille, .histoire, .a-la-une, .legal-grille { grid-template-columns: 1fr; }
  .cote-sticky, .legal-menu { position: static; }
  .carte-service ul { max-width: none; }
  .carte-service .dessin { display: none; }
  .rangee { grid-template-columns: 1fr; }
  .rangee .bloc { flex-direction: row; align-items: center; }
  .rangee .bloc svg { max-width: 120px; }
}
@media (max-width: 640px) {
  .hero-texte .titre-page, .hero-offre h1 { font-size: 34px; }
  .titre-page { font-size: 32px; }
  .band, .hero, .confirm-tete { padding: 36px 0; }
  .appel-gauche, .appel-droite { padding: 24px 20px; }
  .appel-gauche h2 { font-size: 30px; }
  .moment { grid-template-columns: 1fr; gap: 6px; }
  .moment .heure { padding-top: 0; }
  .confirm-tete .wrap { grid-template-columns: 1fr; }
  .carte-service h2 { font-size: 32px; }
  .choix { flex-wrap: wrap; }
  .choix .prix { margin-left: 36px; }
  .gros-carton { padding: 24px 20px; }
  .popup-boite { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Texte révisé (21 oct. 2026) ---------- */
.band-constats { border-top: 2px solid var(--filet); border-bottom: 2px solid var(--filet); }
.note-subvention { margin: 16px 0 0; font: var(--text-Petit); font-weight: 700; color: var(--texte-doux); }
.constats { display: flex; flex-wrap: wrap; gap: 20px; }
.constats p { flex: 1 1 300px; min-width: 0; margin: 0; background: #f7efe4; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); padding: 20px; font-size: 18px; }
.puces-offre { margin: 0; padding-left: 20px; }
.puces-offre li { margin: 3px 0; }

/* ---------- Calendly (choix de la date) ---------- */
.calendly-zone { min-height: 660px; }
.calendly-zone iframe { border: 0; }

/* ---------- Liste des articles : voir plus ---------- */
.voir-plus { display: flex; justify-content: center; margin: 40px 0 0; }

/* ---------- Image « à la une » : prend la couleur du thème choisi (même dessin : le fond prend exactement la couleur du thème) ---------- */
.a-la-une .vignette { position: relative; }
.a-la-une .vignette::after { content: ''; position: absolute; inset: 0; background: var(--teinte, transparent); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.a-la-une[data-theme-actif="prioriser"] { --teinte: #a8203f; }
.a-la-une[data-theme-actif="planifier"] { --teinte: #0f6b66; }
.a-la-une[data-theme-actif="equipe"] { --teinte: #5b3a5a; }
.a-la-une[data-theme-actif="outils"] { --teinte: #e9cfc6; }
.a-la-une[data-theme-actif="coulisses"] { --teinte: #f7efe4; }
.a-la-une[data-theme-actif]:not([data-theme-actif="tous"]) .vignette::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .a-la-une .vignette::after { transition: none; } }

/* ---------- Ateliers 2027 ---------- */
.journees-2027 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.carte-journee-2027 { padding: 24px; }
.liste-ateliers-2027 { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 16px; }

/* Cartons « Pour qui » en prune (25 oct. 2026) : contraste sur fond crème */
.liste-prune li { background: #5b3a5a; color: #f7efe4; border-color: #3a2339; }
.liste-prune li strong, .liste-prune li b { color: #fff; }
.liste-prune li a { color: #f7efe4; }

/* En-tête qui suit la page (26 oct. 2026). Le menu Services déroulant garde son z-index; les ancres ne passent pas sous l'en-tête. */
/* Sur cellulaire l'en-tête fait ~180 px de haut (menu sur plusieurs lignes) : il ne suit la page que sur écran large. */
@media (min-width: 781px) {
  .site-header { position: sticky; top: 0; z-index: 150; }
  html { scroll-padding-top: 96px; }
}

/* 26 oct. 2026 : bas de page des forfaits */
.ensuite-offre .gros-carton { text-align: center; align-items: center; justify-content: center; }
.ensuite-offre .gros-carton .btn { align-self: center; }
.mini-appel { background: #0f6b66; color: #f7efe4; }
.echelle-cartons { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 8px; }
.echelle-cartons .bout { align-self: center; font: var(--text-Petit); color: #e9cfc6; font-weight: 700; }
.echelle-carton { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1 1 150px; min-width: 130px; padding: 12px 14px; background: transparent; color: #f7efe4; border: 2px solid #5b3a5a; border-radius: var(--coins); text-decoration: none; }
.echelle-carton .num { font: 700 14px/1 var(--font-georgia); color: #e9cfc6; }
.echelle-carton .nom { font: 700 16px/1.25 var(--font-georgia); }
.echelle-carton.actuelle { background: #5b3a5a; border-color: #e9cfc6; }
.echelle-carton:hover { border-color: #e9cfc6; }
/* « Lire l'article » : texte lisible sur le bouton crème (blogue, article à la une) */
.band-articles .a-la-une a.btn, .band-articles .a-la-une a.btn-creme { color: #170c13; }

/* 26 oct. 2026 : cartons « Ça te dit quelque chose? » : fond crème fixe, donc texte foncé fixe (en mode sombre le texte héritait du crème et devenait invisible). */
.constats p { color: #170c13; }
.constats p strong { color: #170c13; }
/* « liste-cartons » : en mode sombre, le carton prend --fond (foncé) et --texte (crème) : cohérent. Les cartons prune restent crème sur prune. */

/* Mini-cartes (« Pour continuer », « Les ateliers de la journée ») : le texte suit la couleur du thème, même dans une bande sombre (sinon texte crème sur fond crème pour Outils et Coulisses). */
.band-sombre a.mini-carte, .ensuite-offre a.mini-carte, a.mini-carte { color: var(--th-fg, #f7efe4); }
.band-sombre .mini-carte .etiquette, .mini-carte .etiquette { color: inherit; }

/* 27 oct. 2026 : cellulaire plus aéré (bandes, cartons, écarts entre les blocs) */
@media (max-width: 640px) {
  .band, .hero, .confirm-tete { padding: 60px 0; }
  .hero-grille { gap: 44px; }
  .hero-texte .titre-page { margin: 16px 0 24px; }
  .hero-texte .chapeau { margin-bottom: 32px; }
  .titre-section { margin: 12px 0 24px; }
  .chapeau { line-height: 1.7; }
  .pile { gap: 24px; }
  .pile-l { gap: 40px; }
  .cols { gap: 48px; }
  .cartons { gap: 28px; }
  .offres-compactes, .journees-2027 { gap: 32px; }
  .constats { gap: 28px; }
  .carton { padding: 28px 24px; }
  .carton p { margin-bottom: 18px; }
  .cadeau-carte { padding: 32px 24px; gap: 20px; }
  .offre-compacte { padding: 28px 24px; gap: 14px; }
  .appel-gauche, .appel-droite { padding: 36px 24px; }
  .appel-droite { gap: 16px; }
  .appel-droite ul { gap: 14px; }
  .appel-bloc { margin-top: 40px; }
  .gros-carton, .popup-boite { padding: 32px 24px; }
  .carte-journee-2027 { padding: 28px 24px; }
  .liste-ateliers-2027 { gap: 22px; }
  .rangee-actions { gap: 18px 24px; }
  .constats p { padding: 26px 24px; }
  .preuves { gap: 12px 28px; }
}

/* 29 oct. 2026 : alignements. Déroulement : heures sur une ligne et alignées sur le texte; colonnes « problème » : titres et cartons à la même hauteur. */
@media (min-width: 641px) {
  .moment { grid-template-columns: 230px minmax(0, 1fr); align-items: baseline; }
  .moment .heure { padding-top: 0; white-space: nowrap; }
}
@media (min-width: 781px) {
  #probleme .cols { row-gap: 0; }
  #probleme .cols > .pile { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 16px; align-content: start; }
  #probleme .cols > .pile > .etiquette { align-self: end; }
}
/* Étapes déjà numérotées dans le texte (« 1 · Extraire. ») : pas de deuxième numéro. */
ol.liste-etapes.etapes-numerotees { list-style: none; padding-left: 0; }
/* Journée du 24 nov. : 4 ateliers en 2 colonnes (4 colonnes étroites cassaient les étiquettes et les titres). */
@media (min-width: 781px) {
  #deroulement .cartons { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  #livrables .cols { align-items: stretch; }
}
/* Colonne de gauche de « Réserver ma place » : les 3 prix en pile (2 + 1 orphelin en grille). */
#reserver .cols > .pile > .cartons { grid-template-columns: 1fr; }
/* Bande de faits : chaque ligne de détail sur sa propre ligne (« 229 $.Prix spécial » collés). « Et ensuite » : deux cartons de même hauteur. */
.fait > span:not(.etiquette) { display: block; }
@media (min-width: 781px) { #ensuite .cols { align-items: stretch; } }

/* 29 oct. 2026 : en-tête sombre qui suit la page (partout, cellulaire compris) + bandeau promo du 24 novembre. */
.site-header { position: sticky; top: 0; z-index: 150; background: #170c13; border-bottom: 2px solid #5b3a5a; color: #f7efe4; }
.site-header .logo { color: #f7efe4; }
.site-header .site-nav a, .site-header .menu-deroulant summary { color: #f7efe4; }
.site-header .site-nav a[aria-current="page"], .site-header .menu-deroulant details[data-actuel] summary { color: #e9cfc6; text-decoration-thickness: 3px; }
.site-header .btn-principal { background: #3dbdb0; color: #170c13; border-color: #3dbdb0; box-shadow: none; }
.site-header .sous-menu { background: #f7efe4; border-color: #e9cfc6; }
.site-header .sous-menu a { color: #170c13; }
.site-header .sous-menu a[aria-current="page"] { color: #a8203f; }
.site-header :focus-visible { outline-color: #f7efe4; }
html { scroll-padding-top: 130px; }
.bandeau-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding: 8px 16px; color: #170c13; border-top: 2px solid #5b3a5a; font: var(--text-Petit); text-decoration: none; text-align: center; }
.bandeau-barre { text-decoration-thickness: 2px; opacity: 0.75; }
.bandeau-promo:hover .bandeau-lien { text-decoration-thickness: 3px; }
.bandeau-etiquette { font: var(--text-Etiquette); letter-spacing: 0.14em; text-transform: uppercase; background: #170c13; color: #f7efe4; padding: 3px 10px; border-radius: 999px; }
.bandeau-lien { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 780px) {
  .site-header .wrap { padding-top: 8px; padding-bottom: 8px; gap: 4px 16px; }
  .site-header .site-nav ul { gap: 0 16px; }
  .bandeau-texte { flex-basis: 100%; }
  .bandeau-promo { gap: 2px 10px; padding: 6px 12px; font-size: 14px; }
  html { scroll-padding-top: 190px; }
}
/* 10 nov. 2026 : bandeau promo en turquoise, plus gros (2-3 lignes), bouton d'en-tête rose, forfait annuel en vedette. */
.site-header .btn-principal { background: #f2709c; border-color: #f2709c; color: #170c13; }
.site-header .btn-principal:hover { background: #f58aae; border-color: #f58aae; }
.bandeau-promo { background: #3dbdb0; flex-direction: row; gap: 8px 24px; padding: 14px 20px; font-size: 21px; line-height: 1.3; border-top: 0; border-bottom: 3px solid #170c13; }
.bandeau-promo:hover { background: #4fcabd; }
.bandeau-promo .bandeau-etiquette { font-size: 14px; padding: 5px 14px; }
.bandeau-texte { font-weight: 500; max-width: 640px; text-align: left; }
.bandeau-texte b { font-size: 1.25em; font-weight: 800; }
.bandeau-promo .bandeau-lien { background: #170c13; color: #f7efe4; text-decoration: none; font-size: 18px; padding: 10px 22px; border-radius: 999px; }
.bandeau-promo:hover .bandeau-lien { background: #5b3a5a; }
@media (min-width: 781px) and (max-width: 1100px) { .bandeau-promo .bandeau-etiquette { display: none; } .bandeau-promo { font-size: 19px; } }
@media (max-width: 780px) {
  .bandeau-promo { flex-direction: column; gap: 2px; padding: 8px 12px 9px; font-size: 15px; }
  .bandeau-texte { text-align: center; }
}
/* Fenêtre d'infolettre : case de consentement lisible, et de l'air entre « Je m'abonne » et « Non merci ». */
.popup-boite .consent span { color: #f7efe4; }
.popup-boite .article-guide-form { display: flex; flex-direction: column; gap: 16px; }
.popup-boite .popup-non { margin-top: 12px; }
/* Cellulaire : en-tête compact (logo + bouton sur une ligne, menu sous eux, bandeau court) pour ne pas manger l'écran quand il suit la page. */
@media (max-width: 780px) {
  .site-header .wrap { padding-top: 6px; padding-bottom: 6px; gap: 0 12px; }
  .site-header .logo { font-size: 20px; }
  .site-header .btn-principal { min-height: 36px; padding: 0 12px; font-size: 14px; order: 2; }
  .site-header .site-nav { order: 3; flex-basis: 100%; }
  .site-header .site-nav ul { gap: 0 16px; }
  .site-header .menu-deroulant summary { min-height: 36px; }
  .site-header .site-nav a { display: inline-flex; align-items: center; min-height: 36px; }
  .bandeau-etiquette, .bandeau-lien { display: none; }
  .bandeau-promo { padding: 5px 12px; font-size: 13px; line-height: 1.35; }
  html { scroll-padding-top: 130px; }
}

/* Appel vers les ateliers 2027 (page Ateliers) et pastille « Offre 1 sur 4 » lisible sur mobile */
.cta-2027 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 0; }
@media (max-width: 640px) {
  .pastille-offre { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100% !important; letter-spacing: 0.1em; justify-content: space-between; }
  .pastille-offre a { white-space: nowrap; }
  .cta-2027 .btn { width: 100%; }
}

/* Photos de Michelle : accueil, contact */
.hero-photo { flex: 1 1 380px; max-width: 480px; min-width: 0; margin: 0; }
.hero-photo img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); }
.hero-photo figcaption { margin-top: 12px; font: var(--text-Petit); color: var(--texte-doux); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.hero-photo figcaption b { color: var(--texte); }
.band-infolettre { padding: 32px 0; }
.band-infolettre .wrap > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.contact-intro { display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center; }
.contact-intro > .pile { flex: 1 1 380px; min-width: 0; }
.contact-photo { flex: 0 1 300px; width: 100%; max-width: 300px; height: auto; border: 2px solid var(--filet); border-radius: var(--coins); box-shadow: var(--shadow); }
@media (max-width: 640px) { .hero-photo { max-width: none; } .contact-photo { max-width: 240px; } }
.texte-vision { max-width: 820px; } .texte-vision p { font-size: 20px; line-height: 1.6; margin: 0 0 16px; } .texte-vision p:last-child { margin-bottom: 0; }

/* Photos des animatrices (pages de journée) : garder les proportions de la photo (2 nov. 2026) */
.photo img { max-width: 100%; height: auto; }

.texte-vision ul { font-size: 20px; line-height: 1.6; margin: 0 0 16px; padding-left: 24px; display: grid; gap: 8px; }

/* Accueil (nov. 2026) : liste de preuves du héros, citation « carré de sable », cartes des 3 façons */
.liste-preuves { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 6px; font-weight: 700; }
.texte-vision .citation-carre { font-size: 24px; line-height: 1.4; margin: 28px 0 32px; padding-left: 18px; border-left: 4px solid var(--texte); }
.band-vision .titre-section { margin-top: 0; }
.band-vision .cartons { margin-top: 20px; }
.band-vision .cartons .carton p { font-size: 18px; line-height: 1.5; margin: 0; }
.band-vision .wrap.texte-vision { max-width: 980px; }

/* Accueil, cellulaire plus aéré (8 nov. 2026) */
@media (max-width: 640px) {
  .hero-texte p { margin-bottom: 22px; }
  .hero-texte .chapeau { line-height: 1.7; margin-bottom: 28px; }
  .liste-preuves { gap: 16px; margin-top: 26px; padding-left: 20px; line-height: 1.55; }
  .hero-texte .btn { margin-top: 8px; }
  .hero-photo { margin-top: 12px; }
  #loi-1-pourcent { padding: 28px 24px; margin-top: 56px !important; line-height: 1.7; }
  .texte-vision p { line-height: 1.75; margin-bottom: 24px; }
  .texte-vision ul { gap: 18px; margin-bottom: 28px; line-height: 1.65; }
  .texte-vision .citation-carre { font-size: 21px; line-height: 1.55; margin: 40px 0 44px; padding-left: 20px; }
  .band-vision .titre-section { line-height: 1.25; margin-bottom: 28px; }
  .band-vision .titre-section + p { margin-top: 0; }
  .band-vision .cartons { margin-top: 28px; gap: 28px; }
  .band-vision .cartons .carton { padding: 28px 24px; }
  .band-vision .cartons .carton h3 { margin-bottom: 14px; }
  .band-vision .cartons .carton p { line-height: 1.6; }
}

/* Journée du 24 novembre : conversion cellulaire (8 nov. 2026) */
.mobile-seul { display: none; }
.cta-sticky-barre { display: none; }
.cta-atelier { margin: 22px 0 0 !important; }
.cta-atelier .btn { width: 100%; }
@media (min-width: 641px) { .cta-atelier .btn { width: auto; } }
@media (max-width: 640px) {
  p.mobile-seul { display: block; }
  span.mobile-seul { display: inline; }
  .bureau-seul { display: none; }
  .hero-journee { padding: 12px 0 36px !important; }
  .hero-journee .wrap { gap: 20px; }
  .hero-journee .chemin, .hero-journee .hero-etiquette, .hero-journee .cols > .carton.carte-offre { display: none; }
  .hero-journee .pile > :first-child:not(h1):not(.hero-date) { display: none; }
  .hero-journee .cols { gap: 24px !important; }
  .hero-journee .pile { gap: 14px; }
  .hero-journee .pile > * { order: 5; }
  .hero-journee .pile > h1 { order: 1; font-size: 30px; line-height: 1.15; margin: 0; }
  .hero-journee .hero-date { order: 2; margin: 4px 0 0; font-size: 18px; }
  .hero-journee .hero-benefice { order: 3; margin: 0; font-size: 19px; line-height: 1.45; }
  .hero-journee .hero-cta { order: 4; margin: 6px 0 12px; }
  .hero-journee .hero-cta .btn { width: 100%; }
  .cta-sticky-barre { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 2px solid var(--filet); box-shadow: 0 -4px 14px rgba(23, 12, 19, 0.18); transition: transform 0.2s ease; }
  .cta-sticky-barre.cache { transform: translateY(120%); }
  .cta-sticky-barre .btn { width: 100%; }
  body:has(.cta-sticky-barre) { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .cta-sticky-barre { transition: none; } }

/* « 1 % » : lien vers le guide de la CPMT, invisible (aucun style de lien); le focus clavier reste visible */
a.lien-1pct, .band-rose a.lien-1pct, .band-sombre a.lien-1pct, .carton a.lien-1pct { color: inherit !important; text-decoration: none !important; font: inherit; cursor: inherit; }
a.lien-1pct:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Journée du 24 novembre, cellulaire (8 nov. 2026, 2e passe) : titre, bénéfice, faits compacts, puis le bouton */
@media (max-width: 640px) {
  .hero-journee .cols, .hero-journee .cols > .pile { display: contents; }
  .hero-journee .wrap { gap: 14px; }
  .hero-journee .hero-benefice { order: 2; }
  .hero-journee .bande-faits { order: 3; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
  .hero-journee .hero-cta { order: 4; margin: 2px 0 10px; }
  .hero-journee .fait { padding: 9px 12px; font-size: 15px; line-height: 1.3; box-shadow: none; border-width: 1px; }
  .hero-journee .fait .etiquette { font-size: 11px; margin: 0 0 2px; display: block; }
  .hero-journee .fait b { display: block; font-size: 15px; }
  .hero-journee .fait > span:not(.etiquette) { font-size: 13px; display: block; margin-top: 2px; }
  .hero-journee .fait:nth-child(2) > span:not(.etiquette) { display: none; }
  .hero-journee .fait:nth-child(n+3) { grid-column: 1 / -1; }
  /* « Appel découverte » en en-tête : secondaire sur cette page, pour que le bouton d'inscription soit le seul bouton plein */
  .page-journee .site-header a.btn[href="contact.html"] { background: transparent; color: #f7efe4; border: 2px solid #f7efe4; box-shadow: none; font-weight: 600; }
}

/* Accueil : les 3 cartes « façons » ne sont pas des liens, elles ne doivent pas en avoir l'air */
.band-vision .cartons .carton { border: 0; border-left: 4px solid var(--texte); box-shadow: none; background: rgba(255, 255, 255, 0.45); border-radius: 4px; cursor: default; }

/* Journée du 24 novembre, cellulaire, 3e passe : le bouton doit rester au-dessus de la bannière de témoins */
@media (max-width: 640px) {
  .page-journee .bandeau-promo { display: none; }
  .hero-journee { padding-top: 14px !important; }
  .hero-journee .wrap { gap: 12px; }
  .hero-journee .pile > h1 { font-size: 28px; }
  .hero-journee .hero-benefice { font-size: 18px; }
  .hero-journee .fait:nth-child(3) > span:not(.etiquette) { display: none; }
}

/* Journée du 24 novembre (8 nov. 2026, 4e passe) : bouton en haut à droite, plus gros; photos des animatrices plus petites */
.hero-journee .cols-centre { align-items: start; }
.hero-droite { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-droite .hero-cta { margin: 0; }
.hero-droite .hero-cta .btn { width: 100%; min-height: 76px; font-size: 22px; padding: 0 32px; }
#michelle .photo, #karine .photo { max-width: 170px !important; }
@media (max-width: 640px) {
  .hero-journee .cols > .hero-droite { display: contents; }
  .hero-journee .hero-droite > .carton { display: none; }
  .hero-droite .hero-cta .btn { min-height: 58px; font-size: 19px; padding: 0 20px; }
  #michelle .photo, #karine .photo { max-width: 140px !important; }
}

/* Journée du 24 novembre : les cartes de prix sont aussi le choix d'option; conditions de vente repliables */
.choix-carte { position: relative; display: block; cursor: pointer; padding-right: 64px !important; }
.choix-carte input { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; accent-color: var(--action); cursor: pointer; margin: 0; }
.choix-carte:hover { border-color: var(--action); }
.choix-carte:has(input:checked) { border-color: var(--action); box-shadow: var(--shadow); outline: 3px solid var(--action); outline-offset: -3px; }
.choix-carte:has(input:focus-visible) { outline: 3px solid currentColor; outline-offset: 2px; }
.choix-etat { display: block; margin-top: 14px; font: 700 15px/1.2 var(--font-arial); color: var(--action); }
.choix-carte:has(input:checked) .choix-etat { font-size: 0; }
.choix-carte:has(input:checked) .choix-etat::after { content: "✓ Option choisie"; font-size: 15px; }
.conditions-vente summary { cursor: pointer; font: 700 18px/1.3 var(--font-georgia); padding: 8px 0; }
.conditions-vente ol { margin-top: 12px !important; }

/* Journée du 24 novembre : parcours facile (étapes numérotées, navigation interne, ateliers repliables) */
.etape-num { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--font-arial); margin: 0 0 12px; }
.etape-num b { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--texte); color: var(--fond); font-size: 16px; }
.nav-page { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav-page::-webkit-scrollbar { display: none; }
.nav-page a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--filet); border-radius: 999px; background: var(--fond); color: var(--texte); font: 700 15px/1 var(--font-arial); text-decoration: none; }
.nav-page a:hover { border-color: var(--action); }
.atelier-etapes { margin-top: 8px; }
.atelier-etapes summary { cursor: pointer; font: 700 16px/1.3 var(--font-arial); padding: 10px 0; color: var(--action); }
.aide-bouton { margin: 10px 0 0 !important; }
html:has(body.page-journee) { scroll-padding-top: 130px; }
@media (max-width: 640px) { .nav-page { order: 5; } .etape-num { font-size: 18px; } }
@media (max-width: 640px) { .hero-journee .pile > :not(h1):not(.hero-benefice):not(.hero-cta) { order: 6; } }

/* Journée du 24 novembre, cellulaire : page plus courte (28 000 px avant), texte et espaces resserrés */
.repli-mobile > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none; font: 700 17px/1.3 var(--font-arial); color: var(--action); }
.repli-mobile > summary::-webkit-details-marker { display: none; }
.repli-mobile > summary::before { content: "+"; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; font-size: 18px; line-height: 1; }
.repli-mobile[open] > summary::before { content: "\2212"; }
.repli-mobile > :not(summary) { margin-top: 14px; }
.repli-mobile > summary + * { margin-top: 6px; }
@media (max-width: 640px) {
  .page-journee .band { padding: 36px 0; }
  .page-journee .band p, .page-journee .band li { font-size: 17px; line-height: 1.55; }
  .page-journee .band p { margin-bottom: 12px; }
  .page-journee .titre-section { font-size: 26px; line-height: 1.2; margin: 6px 0 14px; }
  .page-journee .pile-l { gap: 22px; }
  .page-journee .pile { gap: 14px; }
  .page-journee .cols { gap: 28px; }
  .page-journee .cartons { gap: 16px; }
  .page-journee .carton { padding: 20px 18px; }
  .page-journee .carton p { margin-bottom: 10px; }
  .page-journee .liste-cartons li { padding: 14px 16px; }
  .page-journee .moment { padding: 10px 0; }
  .page-journee .liste-etapes li, .page-journee ol li { margin-bottom: 6px; }
  .page-journee details:not(.repli-mobile):not(.atelier-etapes):not(.conditions-vente) summary { padding: 14px 16px; font-size: 17px; line-height: 1.35; }
  .page-journee details .reponse { padding: 0 16px 16px; }
  .page-journee .temoin, .page-journee .carton > p:first-child { margin-bottom: 8px; }
  .page-journee .gros-carton { padding: 24px 20px; }
  .page-journee .photo { margin: 0; }
}

@media (max-width: 640px) {
  #livrables .cartons { grid-template-columns: 1fr 1fr; gap: 10px; }
  #livrables .cartons .carton { padding: 14px 12px; }
  #livrables .cartons .carton .sous-titre { font-size: 17px !important; }
  #livrables .cartons .carton p { font-size: 15px; margin: 0 0 6px; }
  .page-journee .liste-cartons { gap: 10px; }
  .page-journee .liste-cartons li { padding: 12px 14px; box-shadow: none; border-width: 1px; font-size: 16px; }
  .page-journee #infolettre { padding: 24px 0; }
  .page-journee #infolettre .cadeau-carte { padding: 20px 18px; gap: 12px; }
  .page-journee #infolettre .champ { margin-bottom: 8px; }
  .page-journee .carton[id^="atelier-"] .sous-titre { font-size: 21px; }
  .page-journee .carton[id^="atelier-"] > p:nth-of-type(2) { font-size: 16px; }
  .page-journee .repli-mobile .repli-mobile { margin-top: 8px; }
}
.faq > .repli-mobile > summary { background: none; border: 0; box-shadow: none; padding: 8px 0; margin: 0; font: 700 17px/1.3 var(--font-arial); color: var(--action); }
.faq > .repli-mobile > summary::after { content: none; }
.faq > .repli-mobile { display: grid; gap: 12px; }
.faq details.repli-mobile { background: none !important; border: 0 !important; box-shadow: none !important; }
.faq details.repli-mobile > summary { padding: 8px 0; justify-content: flex-start; font: 700 17px/1.3 var(--font-arial); color: var(--action); }
.faq details.repli-mobile > summary::after, .faq details.repli-mobile[open] > summary::after { content: none; }
.faq details.repli-mobile > summary::before { content: "+"; }
.faq details.repli-mobile[open] > summary::before { content: "\2212"; }
.faq details.repli-mobile > details:not([open]) > summary::after { content: "+"; }

/* Journée du 24 novembre, ordinateur : page plus courte et plus dense (8 nov. 2026) */
@media (min-width: 781px) {
  .page-journee .band { padding: 40px 0; }
  .page-journee .titre-section { font-size: 28px; line-height: 1.2; margin: 4px 0 14px; }
  .page-journee .band p, .page-journee .band li { font-size: 18px; line-height: 1.55; }
  .page-journee .band p { margin-bottom: 10px; }
  .page-journee .pile-l { gap: 22px; }
  .page-journee .pile { gap: 12px; }
  .page-journee .cols { gap: 32px; }
  .page-journee .cartons { gap: 16px; }
  .page-journee .carton { padding: 20px; }
  .page-journee .liste-cartons li { padding: 12px 16px; }
  .page-journee .moment { padding: 8px 0; }
  .page-journee .faq { gap: 10px; }
  .page-journee .faq summary { padding: 12px 18px; font-size: 18px; }
  .hero-journee { padding: 14px 0 28px !important; }
  .hero-journee .wrap.pile-l { gap: 18px; }
  .hero-journee .cols-centre { gap: 32px !important; }
  .hero-journee .pile > h1 { font-size: 38px; line-height: 1.15; margin: 0 0 6px; }
  .hero-journee .pile p { margin-bottom: 8px; }
  .hero-journee .chemin { margin-bottom: 6px; }
  .hero-droite { gap: 16px; }
  .hero-droite .hero-cta .btn { min-height: 64px; font-size: 21px; }
  .hero-droite .carton { padding: 16px 18px !important; }
  .hero-droite .carton svg { max-height: 150px; }
  .hero-journee .bande-faits { gap: 12px; margin-top: 0; }
  .hero-journee .fait { padding: 10px 14px; }
  .hero-journee .fait b { font-size: 17px; }
  .nav-page { padding: 0; }
  #livrables .cartons { grid-template-columns: repeat(4, 1fr); }
  #deroulement .cartons { grid-template-columns: repeat(2, 1fr); }
  .page-journee #options { padding: 28px 0; }
  .page-journee #infolettre .cadeau-carte { padding: 24px; }
}

/* Journée du 24 novembre : marges du haut superflues entre paragraphes; cartes de faits à leur hauteur; listes plus compactes (ordinateur) */
.page-journee .band .pile > p { margin-top: 0 !important; }
@media (min-width: 781px) {
  .hero-journee .bande-faits { align-items: start; }
  #pour-qui .liste-cartons { gap: 8px; }
  #pour-qui .liste-cartons li { padding: 8px 14px; box-shadow: none; border-width: 1px; font-size: 17px; }
  #probleme .liste-cartons { gap: 8px; }
  #probleme .liste-cartons li { padding: 10px 14px; box-shadow: none; border-width: 1px; font-size: 17px; }
}

/* Journée du 24 novembre : bouton « Retour en haut » */
.retour-haut { position: fixed; right: 20px; bottom: 24px; z-index: 110; width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #f7efe4; border-radius: 50%; background: #170c13; color: #f7efe4; box-shadow: -3px 3px 3px 1px #00000044; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.retour-haut.visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut:hover { background: #5b3a5a; }
.retour-haut:focus-visible { outline: 3px solid #3dbdb0; outline-offset: 3px; }
@media (max-width: 640px) { .retour-haut { right: 14px; bottom: 20px; width: 48px; height: 48px; } .page-journee .retour-haut { bottom: 92px; } }
@media (prefers-reduced-motion: reduce) { .retour-haut { transition: none; } }

/* 10 nov. 2026 (cellulaire) : bandeau GROS et turquoise en haut de page, qui se réduit dès qu'on défile pour ne pas manger l'écran. */
@media (max-width: 780px) {
  .site-header .logo { font-size: 18px; }
  .site-header .btn-principal { min-height: 34px; padding: 0 10px; font-size: 13px; }
  .site-header .wrap { padding-left: 16px; padding-right: 16px; }
  .bandeau-promo { flex-direction: column; gap: 6px; padding: 14px 14px 16px; font-size: 18px; line-height: 1.3; }
  .bandeau-promo .bandeau-etiquette { display: inline-block; font-size: 13px; padding: 4px 12px; }
  .bandeau-promo .bandeau-lien { display: inline-block; font-size: 16px; padding: 9px 20px; }
  .bandeau-texte b { font-size: 1.3em; }
  html.bandeau-reduit .bandeau-promo { gap: 2px; padding: 5px 12px; font-size: 13px; }
  html.bandeau-reduit .bandeau-promo .bandeau-etiquette, html.bandeau-reduit .bandeau-promo .bandeau-lien { display: none; }
  html.bandeau-reduit .bandeau-texte b { font-size: 1.1em; }
}

/* 10 nov. 2026 (cellulaire, 2e passe) : libérer le premier écran. Bandeau plus court, hero plus court (le bouton monte avant la photo). */
@media (max-width: 780px) {
  .bandeau-promo { gap: 6px; padding: 10px 14px 12px; font-size: 16px; }
  .bandeau-promo .bandeau-etiquette { display: none; }
  .bandeau-promo .bandeau-lien { font-size: 15px; padding: 7px 18px; }
  html.bandeau-reduit .bandeau-promo { padding: 5px 12px; }
  .hero { padding: 24px 0 32px; }
  .hero-grille { gap: 24px; }
  .hero .liste-preuves, .hero .hero-texte:has(.liste-preuves) > p:not(.etiquette):not(.chapeau):not(:last-child) { display: none; }
  .hero .hero-texte:has(.liste-preuves) > p:last-child { margin-top: 18px !important; }
  .hero .hero-texte:has(.liste-preuves) > p:last-child .btn { width: 100%; justify-content: center; }
}