/* VoltGestion — feuille de style unique du site vitrine.
   Mobile d'abord : les règles de base visent le téléphone, les @media
   ajoutent la mise en page large. */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Couleurs relevées sur le logo officiel */
  --terre: #C63106;          /* rouge du logo : boutons, liens, petits accents */
  --terre-fonce: #A82904;
  --terre-claire: #CE4524;   /* grandes surfaces rouges — texte blanc à 4,7:1 */
  --orange: #E86606;
  --safran: #F29A12;
  --safran-pale: #FFD08A;    /* accent sur rouge, grands titres uniquement (3,2:1) */
  --brun: #2A1409;           /* texte courant */
  --brun-doux: #4A2A18;
  --brun-texte-clair: #F3DCCB;
  --bleu-nuit: #1B2B4B;      /* bleu de l'application (page de connexion) */
  --creme: #FFF6EC;
  --bordure: #F3E3D3;
  --blanc: #FFFFFF;
  --whatsapp: #25D366;
  --whatsapp-fonce: #1A9E4B; /* icône blanche à 3,5:1 */

  --largeur: 1240px;
  --gouttiere: 16px;
  --police: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 768px) { :root { --gouttiere: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.55; color: var(--brun); background: var(--blanc); }
@media (min-width: 768px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
p, ul, ol { margin: 0; }
a { color: var(--terre); }
a:hover { color: var(--terre-fonce); }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 3px; border-radius: 6px; }
.section--safran :focus-visible, .entete :focus-visible { outline-color: var(--brun); }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.aller-contenu { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brun); color: var(--blanc); padding: 12px 16px; }
.aller-contenu:focus { left: 16px; top: 16px; color: var(--blanc); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texte-doux { color: var(--brun-doux); }
.accent { color: var(--terre); }

/* Étiquette « Bientôt disponible » — inutilisée au 13/10/2026 (rappels et
   assistant sont disponibles). La poser sur une fonction à venir :
   <span class="bientot">Bientôt disponible</span> ; la retirer suffit. */
.bientot { display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--blanc); background: var(--brun); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 20px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.bouton svg { flex-shrink: 0; }
.bouton--terre { background: var(--terre); color: var(--blanc); }
.bouton--terre:hover { background: var(--terre-fonce); color: var(--blanc); }
.bouton--safran { background: var(--safran); color: var(--brun); }
.bouton--safran:hover { background: #F5AA35; color: var(--brun); }
.bouton--brun { background: var(--brun); color: var(--blanc); }
.bouton--brun:hover { background: #3D1F0E; color: var(--blanc); }
.bouton--contour-blanc { border-color: var(--blanc); color: var(--blanc); }
.bouton--contour-blanc:hover { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.bouton--contour-brun { border-color: var(--brun); color: var(--brun); }
.bouton--contour-brun:hover { background: var(--brun); color: var(--blanc); }
.bouton--whatsapp { background: var(--whatsapp); color: var(--brun); }
.bouton--whatsapp:hover { background: #3EDC7B; color: var(--brun); }
.bouton--relief { box-shadow: 0 5px 0 var(--safran); }
.bouton--relief:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--safran); }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } .bouton--relief:hover { transform: none; } }

.groupe-boutons { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) {
  .bouton { padding: 14px 26px; font-size: 1.0625rem; }
  .groupe-boutons { flex-direction: row; flex-wrap: wrap; }
  .groupe-boutons--centre { justify-content: center; }
}
.lien-fleche { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete { position: relative; z-index: 10; background: var(--blanc); box-shadow: 0 10px 30px rgba(42, 20, 9, 0.08); }
.lisere { display: grid; grid-template-columns: repeat(3, 1fr); height: 5px; }
.lisere span:nth-child(1) { background: var(--terre); }
.lisere span:nth-child(2) { background: var(--orange); }
.lisere span:nth-child(3) { background: var(--safran); }

.bandeau-info { background: var(--bleu-nuit); color: var(--brun-texte-clair); font-size: 0.8125rem; }
.bandeau-info__dedans { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.bandeau-info strong { color: var(--blanc); }
.point { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--safran); vertical-align: middle; }
.bandeau-info__plus, .bandeau-info__liens { display: none; }

.barre { display: flex; align-items: center; gap: 8px; padding-top: 6px; padding-bottom: 6px; }
.barre__logo { flex-grow: 1; display: flex; }
.barre__logo img { height: 60px; width: auto; }
.nav-principale, .bouton-rond { display: none; }
.barre__actions { display: flex; align-items: center; gap: 8px; }
.barre .bouton { min-height: 44px; padding: 10px 16px; font-size: 0.9375rem; box-shadow: 0 4px 0 var(--safran); }
.barre .masque-mobile { display: none; }

.menu-btn { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--brun); color: var(--blanc); align-items: center; justify-content: center; cursor: pointer; }
.js .menu-btn { display: flex; }
.menu-btn .icone-fermer { display: none; }
.menu-btn[aria-expanded="true"] .icone-ouvrir { display: none; }
.menu-btn[aria-expanded="true"] .icone-fermer { display: block; }

.menu-mobile { background: var(--creme); padding: 12px var(--gouttiere) 20px; }
.js .menu-mobile:not(.ouvert) { display: none; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.menu-mobile ul a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 12px 18px; border-radius: 16px; background: var(--blanc); color: var(--brun); font-weight: 700; font-size: 1.375rem; text-decoration: none; }
.menu-mobile ul a svg { color: var(--terre); }
.menu-mobile ul a[aria-current="page"] { background: var(--terre); color: var(--blanc); }
.menu-mobile ul a[aria-current="page"] svg { color: var(--blanc); }
.menu-mobile__actions { display: flex; gap: 10px; margin-top: 10px; }
.menu-mobile__actions .bouton { flex: 1 1 0; min-height: 48px; padding: 10px; font-size: 0.9375rem; }

@media (min-width: 1100px) {
  .bandeau-info { font-size: 0.875rem; }
  .bandeau-info__dedans { min-height: 44px; justify-content: space-between; text-align: left; }
  .bandeau-info__plus { display: inline; }
  .bandeau-info__liens { display: flex; gap: 28px; }
  .bandeau-info__liens a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brun-texte-clair); text-decoration: none; }
  .bandeau-info__liens a:hover { color: var(--blanc); text-decoration: underline; }
  .bandeau-info__liens .connexion { color: var(--blanc); font-weight: 700; }

  .barre { gap: 28px; padding-top: 12px; padding-bottom: 12px; }
  .barre__logo { flex-grow: 0; }
  .barre__logo img { height: 88px; }
  .nav-principale { display: flex; flex-grow: 1; justify-content: center; }
  .nav-pastille { display: flex; gap: 4px; list-style: none; margin: 0; padding: 6px; background: var(--creme); border-radius: 999px; }
  .nav-pastille a { display: block; padding: 12px 20px; border-radius: 999px; color: var(--brun); font-weight: 700; font-size: 1rem; text-decoration: none; }
  .nav-pastille a:hover { background: var(--blanc); color: var(--terre); }
  .nav-pastille a[aria-current="page"] { background: var(--terre); color: var(--blanc); }
  .barre__actions { gap: 12px; }
  .bouton-rond { display: flex; width: 54px; height: 54px; border: 2px solid var(--bordure); border-radius: 50%; align-items: center; justify-content: center; color: var(--terre); }
  .bouton-rond:hover { border-color: var(--terre); }
  .barre .bouton { min-height: 52px; padding: 14px 26px; font-size: 1.0625rem; box-shadow: 0 5px 0 var(--safran); }
  .barre .masque-mobile { display: block; }
  .js .menu-btn, .menu-mobile, .js .menu-mobile.ouvert { display: none; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 120px 0; } }
.section--creme { background: var(--creme); }
.section--brun { background: var(--brun); color: var(--blanc); }
.section--brun p { color: var(--brun-texte-clair); }
.section--brun .accent { color: var(--safran); }
.section--safran { background: var(--safran); color: var(--brun); }
.section--terre { background: var(--terre-claire); color: var(--blanc); }
.titre-section { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); }
.entete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 32px; }
@media (min-width: 768px) { .entete-section { margin-bottom: 56px; } }
.surtitre { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 768px) { .surtitre { font-size: 0.9375rem; } }
.surtitre--terre { color: var(--terre); }
.chapo { font-size: 1.125rem; max-width: 34em; }
@media (min-width: 960px) { .chapo { font-size: 1.3125rem; } }

/* ── Bandeau d'ouverture (accueil) ───────────────────────────────────── */
.ouverture { background: var(--terre-claire); color: var(--blanc); overflow: hidden; }
.ouverture__grille { display: grid; gap: 12px; padding-top: 44px; }
.ouverture__texte { display: flex; flex-direction: column; gap: 20px; }
.ouverture h1 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.025em; }
.ouverture h1 .accent { color: var(--safran-pale); }
.ouverture .reassurance { font-size: 0.875rem; }
.ouverture__visuel { position: relative; height: 440px; }
.disque { position: absolute; top: 40px; right: -90px; width: 360px; height: 360px; border-radius: 50%; background: var(--orange); }
.carres { position: absolute; top: 24px; left: 8px; display: grid; grid-template-columns: repeat(2, 22px); gap: 6px; }
.carres span { height: 22px; border-radius: 5px; background: var(--safran-pale); }
.legende-capture { position: relative; font-size: 0.8125rem; line-height: 1.4; color: var(--brun-doux); text-align: center; max-width: 22em; }
.ouverture .legende-capture { position: absolute; top: 0; right: 0; left: 64px; max-width: none; color: var(--blanc); text-align: right; font-size: 0.75rem; }
.ouverture__visuel { height: 468px; }
.telephone { position: absolute; top: 48px; left: 50%; width: 230px; height: 420px; margin-left: -115px; padding: 10px 10px 0; border-radius: 36px 36px 0 0; background: var(--brun); }
.telephone__ecran { height: 100%; border-radius: 28px 28px 0 0; background: var(--creme); overflow: hidden; }
.telephone__ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 960px) {
  .ouverture__grille { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 96px; padding-bottom: 112px; }
  .ouverture__texte { gap: 28px; }
  .ouverture .reassurance { font-size: 1rem; }
  .ouverture__visuel { height: 690px; }
  .ouverture .legende-capture { top: auto; bottom: 0; left: 0; text-align: center; font-size: 0.8125rem; }
  .disque { top: 40px; right: -60px; width: 520px; height: 520px; }
  .carres { top: 70px; left: 20px; grid-template-columns: repeat(2, 30px); gap: 8px; }
  .carres span { height: 30px; border-radius: 6px; }
  .telephone { top: 10px; width: 300px; height: 620px; margin-left: -150px; padding: 12px; border-radius: 46px; box-shadow: 0 30px 60px rgba(42, 20, 9, 0.35); transform: rotate(-4deg); }
  .telephone__ecran { border-radius: 36px; }
}

/* ── Problèmes du quotidien ──────────────────────────────────────────── */
.trio { display: grid; gap: 36px; }
.probleme { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 3px solid var(--brun); }
.probleme__num { font-size: 3.25rem; line-height: 1; font-weight: 700; color: var(--orange); }
.probleme h3 { font-size: 1.375rem; line-height: 1.2; }
@media (min-width: 768px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .probleme { gap: 14px; padding-top: 24px; border-top-width: 4px; }
  .probleme__num { font-size: 4.5rem; }
  .probleme h3 { font-size: 1.625rem; }
}

/* ── Mosaïque des fonctionnalités ────────────────────────────────────── */
.mosaique { display: grid; gap: 12px; }
.tuile { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; border-radius: 24px; }
.tuile h3 { font-size: 1.375rem; line-height: 1.15; }
.tuile p { font-size: 1rem; margin-top: 6px; }
.tuile__icone { width: 40px; height: 40px; }
.tuile--terre { background: var(--terre-claire); color: var(--blanc); }
.tuile--safran { background: var(--safran); color: var(--brun); }
.tuile--creme { background: var(--creme); }
.tuile--creme p { color: var(--brun-doux); }
.tuile--creme .tuile__icone { color: var(--terre); }
.tuile--orange { background: var(--orange); color: var(--brun); }
.tuile--brun { background: var(--brun); color: var(--blanc); }
.tuile--brun p { color: var(--brun-texte-clair); }
.tuile--brun .tuile__icone { color: var(--safran); }
@media (min-width: 700px) {
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .tuile { gap: 28px; padding: 36px; border-radius: 28px; }
  .tuile h3 { font-size: 1.625rem; }
  .tuile p { font-size: 1.0625rem; }
  .tuile__icone { width: 44px; height: 44px; }
  .tuile--large, .tuile--pleine { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuile--large { grid-column: span 2; min-height: 260px; }
  .tuile--large h3 { font-size: 2.125rem; }
  .tuile--large p { font-size: 1.1875rem; max-width: 30em; }
  .tuile--pleine { flex-direction: row; align-items: center; justify-content: flex-start; gap: 32px; }
  .tuile--pleine .tuile__icone { width: 56px; height: 56px; flex-shrink: 0; }
  .tuile--pleine h3 { font-size: 1.875rem; }
}

/* ── Étapes ──────────────────────────────────────────────────────────── */
.etapes { list-style: none; padding: 0; display: grid; gap: 32px; }
.etape { display: flex; gap: 18px; }
.etape__num { flex-shrink: 0; width: 44px; font-size: 4.5rem; line-height: 0.85; font-weight: 700; }
.etape:nth-child(1) .etape__num { color: var(--safran); }
.etape:nth-child(2) .etape__num { color: var(--orange); }
.etape:nth-child(3) .etape__num { color: #FF6A3D; }
.etape h3 { font-size: 1.3125rem; line-height: 1.2; margin-bottom: 6px; }
.etape p { font-size: 1rem; }
@media (min-width: 768px) {
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .etape { flex-direction: column; gap: 16px; }
  .etape__num { width: auto; font-size: 7.5rem; }
  .etape h3 { font-size: 1.625rem; }
  .etape p { font-size: 1.125rem; }
}

/* ── Tarif ───────────────────────────────────────────────────────────── */
.tarif { display: grid; gap: 28px; grid-template-areas: "titre" "carte" "liste"; }
.tarif__titre { grid-area: titre; }
.tarif__carte { grid-area: carte; }
.tarif__liste { grid-area: liste; }
@media (min-width: 960px) {
  .tarif { grid-template-columns: 1fr 1fr; grid-template-areas: "titre carte" "liste carte"; column-gap: 64px; row-gap: 32px; }
  .tarif__titre { align-self: end; }
  .tarif__liste { align-self: start; }
  .tarif__carte { align-self: center; }
}
.carte-prix { display: flex; flex-direction: column; gap: 22px; margin-right: 10px; padding: 30px 26px; border-radius: 28px; background: var(--terre-claire); color: var(--blanc); box-shadow: 10px 10px 0 var(--safran); }
.carte-prix__prix { display: flex; flex-direction: column; gap: 4px; }
.carte-prix__barre { font-size: 1.0625rem; }
.carte-prix__etiquette { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.carte-prix__montant { font-size: 4rem; line-height: 0.95; font-weight: 700; letter-spacing: -0.03em; }
.carte-prix__unite { font-size: 1.25rem; font-weight: 700; }
.carte-prix__note { font-size: 0.9375rem; margin-top: 6px; }
@media (min-width: 960px) {
  .carte-prix { gap: 28px; margin-right: 16px; padding: 48px; border-radius: 36px; box-shadow: 16px 16px 0 var(--safran); }
  .carte-prix__barre { font-size: 1.25rem; }
  .carte-prix__etiquette { font-size: 1rem; }
  .carte-prix__montant { font-size: 5.25rem; }
  .carte-prix__unite { font-size: 1.5rem; }
  .carte-prix__note { font-size: 1.0625rem; }
}

.liste-cochee { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.liste-cochee li { display: flex; gap: 12px; align-items: center; }
.coche { display: flex; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--terre); color: var(--blanc); align-items: center; justify-content: center; }
@media (min-width: 960px) {
  .liste-cochee { gap: 14px; }
  .liste-cochee--grande li { font-size: 1.25rem; gap: 14px; }
  .liste-cochee--grande .coche { width: 30px; height: 30px; }
}

/* ── Offre d'essai ───────────────────────────────────────────────────── */
.pilote { display: grid; gap: 20px; }
.pilote h2 { font-size: clamp(2.625rem, 1.6rem + 3.6vw, 4.5rem); line-height: 0.98; letter-spacing: -0.025em; }
.pilote p { font-size: 1.125rem; }
.pilote__suite { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 600px) { .pilote__suite { align-items: flex-start; } }
@media (min-width: 960px) {
  .pilote { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .pilote p { font-size: 1.3125rem; }
}

/* ── Questions (accordéon sans JavaScript) ───────────────────────────── */
.questions { display: grid; gap: 28px; }
.questions__titre { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 960px) {
  .questions { grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
}
.accordeon { display: flex; flex-direction: column; gap: 12px; }
.accordeon details { padding: 0 20px; border-radius: 20px; background: var(--creme); }
.accordeon summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 44px; padding: 18px 0; font-weight: 700; font-size: 1.125rem; line-height: 1.3; cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon .reponse { padding-bottom: 18px; color: var(--brun-doux); }
.plus { display: flex; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--terre); color: var(--blanc); align-items: center; justify-content: center; }
.accordeon details[open] .plus__vertical { display: none; }
.section--creme .accordeon details { background: var(--blanc); }
@media (min-width: 768px) {
  .accordeon details { padding: 0 28px; border-radius: 22px; }
  .accordeon summary { padding: 24px 0; font-size: 1.3125rem; }
  .accordeon .reponse { padding-bottom: 24px; }
  .plus { width: 40px; height: 40px; }
}

/* ── Bandeau final (contact, essai) ──────────────────────────────────── */
.appel .conteneur { display: flex; flex-direction: column; gap: 18px; }
.appel h2 { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; }
.appel p { font-size: 1.125rem; max-width: 34em; }
.section--terre.appel p { color: var(--blanc); }
@media (min-width: 768px) {
  .appel .conteneur { align-items: center; gap: 28px; text-align: center; }
  .appel p { font-size: 1.3125rem; }
}

/* ── Pied de page ────────────────────────────────────────────────────── */
.pied { padding: 48px 0 104px; background: var(--brun); color: var(--brun-texte-clair); font-size: 0.9375rem; }
.pied__grille { display: flex; flex-direction: column; gap: 28px; }
.pied__marque { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pied__logo { display: inline-block; padding: 4px 12px; border-radius: 16px; background: var(--blanc); }
.pied__logo img { height: 56px; width: auto; }
.pied__accroche, .pied__titre { color: var(--blanc); font-weight: 700; }
.pied__accroche { font-size: 1.0625rem; }
.pied__titre { margin-bottom: 4px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied a { display: inline-block; padding: 6px 0; color: var(--blanc); }
.pied a:hover { color: var(--safran-pale); }
.pied .pied__logo { padding: 4px 12px; }
.pied__bas { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--brun-doux); color: #D9BBA6; }
@media (min-width: 768px) {
  .pied { padding: 64px 0 48px; font-size: 1rem; }
  .pied__grille { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
  .pied__logo img { height: 64px; }
  .pied__accroche { font-size: 1.125rem; }
}

/* ── Bouton WhatsApp flottant ────────────────────────────────────────── */
.whatsapp-flottant { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; width: 58px; height: 58px; border-radius: 50%; background: var(--whatsapp-fonce); color: var(--blanc); align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(42, 20, 9, 0.3); }
.whatsapp-flottant:hover { background: #158A40; color: var(--blanc); }
@media (min-width: 768px) { .whatsapp-flottant { right: 24px; bottom: 24px; width: 62px; height: 62px; } }

/* ── Pages intérieures ───────────────────────────────────────────────── */
.intro-page { padding: 48px 0 56px; background: var(--creme); }
.intro-page .conteneur { display: flex; flex-direction: column; gap: 18px; }
.intro-page h1 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem); line-height: 1; letter-spacing: -0.025em; max-width: 16em; }
.intro-page .chapo { color: var(--brun-doux); }
@media (min-width: 768px) { .intro-page { padding: 96px 0 104px; } .intro-page .conteneur { gap: 24px; } }

/* Modules (page Fonctionnalités) : visuel et texte alternés */
.module { display: grid; gap: 40px; align-items: center; }
.module__visuel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; }
.module__visuel::before { content: ""; position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; border-radius: 50%; background: var(--disque, var(--safran)); transform: translate(-50%, -50%); }
.cadre-capture { position: relative; width: 220px; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 34px; background: var(--brun); box-shadow: 0 24px 48px rgba(42, 20, 9, 0.25); }
.cadre-capture__ecran { height: 100%; border-radius: 26px; background: var(--blanc); overflow: hidden; }
.cadre-capture__ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.module__texte { display: flex; flex-direction: column; gap: 18px; }
.module__icone { display: flex; width: 56px; height: 56px; border-radius: 16px; background: var(--creme); color: var(--terre); align-items: center; justify-content: center; }
.section--creme .module__icone { background: var(--blanc); }
.module h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); line-height: 1.1; }
.module p { color: var(--brun-doux); }
@media (min-width: 900px) {
  .module { grid-template-columns: 1fr 1fr; gap: 72px; }
  .module__visuel { order: -1; }
  .module--inverse .module__visuel { order: 0; }
  .module__visuel::before { width: 360px; height: 360px; transform: translate(-25%, -50%); }
  .cadre-capture { width: 270px; border-radius: 40px; padding: 12px; }
  .cadre-capture__ecran { border-radius: 30px; }
}

/* Page Tarif */
.colonnes { display: grid; gap: 48px; }
@media (min-width: 960px) { .colonnes { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.bloc-titre { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: 24px; }
.essai { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: essai; }
.essai li { padding: 20px 22px; border-radius: 20px; background: var(--creme); }
.section--creme .essai li { background: var(--blanc); }
.essai strong { display: block; color: var(--terre); }

/* Page Contact */
.blocs-contact { display: grid; gap: 16px; }
.bloc { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: var(--creme); }
.bloc h2 { font-size: 1.75rem; }
.bloc p { color: var(--brun-doux); }
.bloc a:not(.bouton) { font-weight: 700; overflow-wrap: anywhere; }
.bloc--principal { background: var(--terre-claire); color: var(--blanc); }
.bloc--principal p { color: var(--blanc); }
@media (min-width: 768px) {
  .blocs-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bloc { padding: 40px; }
  .bloc h2 { font-size: 2.25rem; }
  .bloc--principal { grid-column: 1 / -1; }
}
@media (min-width: 600px) { .bloc--principal .bouton { align-self: flex-start; } }

/* Pages légales */
.texte-legal { max-width: 760px; }
.texte-legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { color: var(--brun-doux); }
.texte-legal p + p { margin-top: 12px; }

/* Espace réservé VISIBLE : information légale ou texte qui manque encore.
   Doit disparaître avant la mise en ligne (voir A-COMPLETER.md). */
.a-completer { background: #FFE58A; color: var(--brun); font-weight: 700; padding: 0 6px; border-radius: 4px; }
.pied__editeur { font-size: 0.875rem; color: var(--brun-texte-clair); }
.bandeau-provisoire { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--brun); color: var(--blanc); font-size: 0.875rem; font-weight: 700; }
.texte-legal h3 { font-size: 1.125rem; margin: 24px 0 8px; }
.texte-legal ul { margin: 12px 0; padding-left: 1.25em; color: var(--brun-doux); }
.texte-legal li + li { margin-top: 6px; }
.texte-legal ul + p, .texte-legal p + ul { margin-top: 12px; }