/* ============================================================
   QUIETO ENTREPRISE — site vitrine B2B
   Structure inspirée d'organizations.headspace.com (annonce, hero avec
   vignettes produit, chiffres clés, parcours d'une journée, cartes de
   couleur, accordéon numéroté, « pour qui », formulaire de démo, pied en
   colonnes). Direction artistique Quieto (QuietoApp/DIRECTION-ARTISTIQUE.md) :
   « une nuit peinte à la main ». Aplats francs, gouaches de l'app, pas de
   lueur, pas de dégradé, pas d'emoji. Cormorant Garamond pour les titres,
   Hanken Grotesk pour le corps. Le crème (la lune) porte titres et boutons.
   ============================================================ */

:root {
  --encre: #0E1733;        /* fond, ciel profond */
  --nuit: #101B4A;         /* surfaces */
  --nuit-2: #16225A;       /* surfaces survolées */
  --electrique: #1C4FD8;   /* mer, aplats vifs */
  --violet: #7B2FD1;       /* collines */
  --creme: #F5E3C8;        /* lune, titres, boutons */
  --aube: #E8A38C;         /* accent chaud, rare */
  --blanc: #FFFFFF;
  --texte-2: rgba(255, 255, 255, 0.74);
  --texte-3: rgba(255, 255, 255, 0.5);
  --trait: rgba(245, 227, 200, 0.16);

  --titre: "Cormorant Garamond", Georgia, serif;
  --corps: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --largeur: 1180px;
  --gouttiere: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 500; color: var(--creme); line-height: 1.05; }
h1 { font-size: clamp(2.7rem, 6vw, 4.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.6rem; }
h1 em, h2 em { font-style: italic; }

.surtitre {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--aube); margin-bottom: 18px;
}
.surtitre--centre { text-align: center; }
.intro { color: var(--texte-2); font-size: 1.1rem; max-width: 620px; margin-top: 18px; }
.entete-section { margin-bottom: 56px; }
.entete-section--centre { text-align: center; }
.entete-section--centre .intro { margin-left: auto; margin-right: auto; }

/* ----------  Boutons (pilules, comme dans l'app)  ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--creme); color: var(--encre); font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease;
}
.bouton:hover { transform: translateY(-2px); background: #fff1dc; }
.bouton--contour { background: transparent; color: var(--creme); border: 1.5px solid var(--trait); }
.bouton--contour:hover { background: rgba(245, 227, 200, 0.08); }
.bouton--petit { min-height: 42px; padding: 0 20px; }

/* ----------  Barre d'annonce  ---------- */
.annonce {
  display: block; text-align: center; padding: 10px var(--gouttiere);
  background: var(--aube); color: var(--encre); font-size: 0.9rem; font-weight: 500;
}
.annonce:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------  En-tête  ---------- */
.entete {
  position: sticky; top: 0; z-index: 20; padding: 16px 0;
  background: var(--encre); border-bottom: 1px solid rgba(245, 227, 200, 0.08);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo__lotus {
  width: 32px; height: 32px; background: var(--creme); flex: none;
  -webkit-mask: url(../img/lotus-creme.png) center / contain no-repeat;
  mask: url(../img/lotus-creme.png) center / contain no-repeat;
}
.logo__nom { font-family: var(--titre); font-size: 1.65rem; font-weight: 600; color: var(--creme); line-height: 1; }
.logo__pro {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre); background: var(--aube); padding: 3px 8px; border-radius: 999px;
}
.nav { display: flex; align-items: center; gap: 26px; font-size: 0.95rem; color: var(--texte-2); }
.nav a:not(.bouton):hover { color: var(--creme); }

/* ----------  Vignettes façon écran de l'app  ---------- */
.vignette {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: var(--nuit); border: 1px solid rgba(245, 227, 200, 0.14);
  border-radius: 18px; padding: 12px 16px; max-width: 280px;
}
.vignette img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; }
.vignette > div { display: flex; flex-direction: column; }
.vignette__type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aube); }
.vignette__titre { font-family: var(--titre); font-size: 1.25rem; color: var(--creme); line-height: 1.15; }
.vignette__bulle { font-size: 0.92rem; color: var(--blanc); line-height: 1.4; }
.vignette--louane, .vignette--demo, .vignette--atout { flex-direction: column; align-items: flex-start; gap: 4px; }
.vignette--offert { background: var(--creme); border-color: var(--creme); }
.vignette--offert .vignette__titre { color: var(--encre); font-size: 1.1rem; }

/* ----------  1. Hero  ---------- */
.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 110px); }
.hero__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero__texte > p:not(.surtitre) { color: var(--texte-2); font-size: 1.15rem; margin-top: 22px; max-width: 510px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__visuel { position: relative; padding: 28px 0 28px 28px; }
.hero__peinture { width: 100%; aspect-ratio: 5 / 5.4; object-fit: cover; object-position: 62% 50%; border-radius: 28px; }
.vignette--seance { top: 8%; left: 0; }
.vignette--louane { top: 62%; right: -18px; max-width: 250px; }
.vignette--offert { bottom: 4%; left: 8%; }

/* ----------  2. Bandeau de confiance  ---------- */
.confiance { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 22px 0; }
.confiance__liste {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte-2);
}
.confiance__liste span { display: inline-flex; align-items: center; gap: 12px; }
.confiance__liste span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--creme); }

/* ----------  Sections : rythme général  ---------- */
section { padding: clamp(80px, 10vw, 130px) 0; }

/* ----------  3. Chiffres clés  ---------- */
.cles { padding-bottom: 40px; }
.cles__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 36px; text-align: center; }
.cles__grille > div { display: flex; flex-direction: column; gap: 6px; color: var(--texte-2); }
.cles__valeur { font-family: var(--titre); font-size: clamp(2.6rem, 5vw, 3.8rem); color: var(--creme); line-height: 1; }

/* ----------  4. Une journée avec Quieto  ---------- */
.journee__onglets {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 36px;
}
.journee__onglets button {
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--trait);
  color: var(--texte-2); font-weight: 500;
}
.journee__onglets button[aria-selected="true"] { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.journee__panneau {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch;
  background: var(--nuit); border-radius: 28px; overflow: hidden;
}
.journee__panneau[hidden] { display: none; }
.journee__panneau img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.journee__panneau > div { padding: clamp(28px, 4vw, 56px); align-self: center; }
.journee__heure { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aube); margin-bottom: 14px; }
.journee__panneau h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.journee__panneau p:not(.journee__heure) { color: var(--texte-2); margin-top: 14px; font-size: 1.05rem; }
.journee__conclusion {
  max-width: 720px; margin: 48px auto 0; text-align: center;
  font-family: var(--titre); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--creme); line-height: 1.3;
}

/* ----------  5. Pourquoi agir : cartes de couleur  ---------- */
.cartes-couleur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.carte-couleur { border-radius: 22px; padding: 26px 22px 24px; display: flex; flex-direction: column; min-height: 300px; }
.carte-couleur__etiquette { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.carte-couleur__valeur { font-family: var(--titre); font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; margin: 18px 0 12px; }
.carte-couleur p { font-size: 1rem; line-height: 1.45; }
.carte-couleur small { margin-top: auto; padding-top: 18px; font-size: 0.78rem; opacity: 0.75; }
.carte-couleur--bleu { background: var(--electrique); color: var(--blanc); }
.carte-couleur--violet { background: var(--violet); color: var(--blanc); }
.carte-couleur--aube { background: var(--aube); color: var(--encre); }
.carte-couleur--creme { background: var(--creme); color: var(--encre); }
.pourquoi__note { margin-top: 32px; color: var(--texte-2); max-width: 720px; }

/* ----------  6. Pourquoi Quieto : accordéon numéroté  ---------- */
.atouts__grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.atouts__visuel { position: relative; padding: 0 28px 28px 0; }
.atouts__visuel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 72% 50%; border-radius: 28px; }
.vignette--atout { bottom: 0; right: 0; }
.atouts__liste { margin-top: 32px; }
.atouts__liste details { border-top: 1.5px solid var(--trait); padding: 18px 0; }
.atouts__liste details:last-child { border-bottom: 1.5px solid var(--trait); }
.atouts__liste summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px; font-size: 1.12rem; font-weight: 500; }
.atouts__liste summary::-webkit-details-marker { display: none; }
.atouts__liste summary span { font-family: var(--titre); font-size: 1.2rem; color: var(--aube); min-width: 26px; }
.atouts__liste summary::after { content: "+"; margin-left: auto; color: var(--aube); font-size: 1.4rem; line-height: 1; }
.atouts__liste details[open] summary::after { content: "–"; }
.atouts__liste p { color: var(--texte-2); margin: 10px 0 4px 42px; }

/* ----------  7. Pour qui  ---------- */
.pour-qui__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pour-qui__carte {
  background: var(--nuit); border-radius: 22px; padding: 32px 28px 30px; display: flex; flex-direction: column;
  border-top: 4px solid var(--violet);
}
.pour-qui__carte:nth-child(2) { border-top-color: var(--electrique); }
.pour-qui__carte:nth-child(3) { border-top-color: var(--aube); }
.pour-qui__carte p { color: var(--texte-2); margin: 14px 0 22px; }
.pour-qui__carte a { margin-top: auto; color: var(--creme); font-weight: 600; }
.pour-qui__carte a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------  8. Tarifs  ---------- */
.bascule {
  display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 28px;
  border: 1.5px solid var(--trait); border-radius: 999px;
}
.bascule button { padding: 10px 20px; border-radius: 999px; color: var(--texte-2); font-weight: 500; }
.bascule button[aria-pressed="true"] { background: var(--creme); color: var(--encre); }
.bascule small { font-size: 0.78rem; margin-left: 6px; color: var(--aube); font-weight: 600; }
.bascule button[aria-pressed="true"] small { color: var(--encre); }

/* Accroche tarif de la page d'accueil (le calcul est sur tarifs.html) */
.accroche-tarif {
  display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
  background: var(--nuit); border-radius: 26px; padding: clamp(26px, 4vw, 44px);
}
.accroche-tarif > div { max-width: 640px; }
.accroche-tarif__prix { font-family: var(--titre); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--creme); line-height: 1.15; }
.accroche-tarif__prix b { font-weight: 600; }
.accroche-tarif p:not(.accroche-tarif__prix) { color: var(--texte-2); margin-top: 10px; }

.faq { margin-top: 72px; max-width: 780px; }
.faq h3 { margin-bottom: 18px; }
.faq details { border-top: 1.5px solid var(--trait); padding: 20px 0; }
.faq details:last-child { border-bottom: 1.5px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; font-size: 1.06rem; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--aube); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--texte-2); margin-top: 12px; }

/* ----------  9. Demande de démo  ---------- */
.demo { background: var(--nuit); }
.demo__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.demo__visuel { position: relative; margin-top: 40px; padding-bottom: 36px; }
.demo__visuel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; }
.vignette--demo { bottom: 0; left: 24px; background: var(--encre); }

.formulaire {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--encre); border-radius: 26px; padding: clamp(24px, 3.5vw, 40px);
}
.formulaire label { display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; font-weight: 500; color: var(--texte-2); }
.formulaire label span { color: var(--aube); margin-left: 2px; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire input, .formulaire select, .formulaire textarea {
  font: inherit; font-size: 1rem; color: var(--blanc); background: var(--nuit);
  border: 1.5px solid var(--trait); border-radius: 12px; padding: 12px 14px; width: 100%;
}
.formulaire select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5E3C8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--creme); }
.formulaire [aria-invalid="true"] { border-color: var(--aube); }
.formulaire textarea { resize: vertical; }
.formulaire__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__rgpd { font-size: 0.82rem; color: var(--texte-3); }
.formulaire__rgpd a { text-decoration: underline; }
.formulaire .bouton { align-self: flex-start; }
.formulaire__etat { font-size: 0.95rem; color: var(--creme); min-height: 1.2em; }
.formulaire__etat a { text-decoration: underline; }

/* ----------  Pied de page en colonnes  ---------- */
.pied { padding: 64px 0 40px; font-size: 0.92rem; color: var(--texte-2); }
.pied__grille { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.pied__marque p { margin-top: 14px; max-width: 280px; color: var(--texte-3); }
.pied nav { display: flex; flex-direction: column; gap: 10px; }
.pied h4 { font-family: var(--corps); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aube); margin-bottom: 4px; }
.pied nav a:hover { color: var(--creme); }
.pied__bas { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; gap: 24px; font-size: 0.82rem; color: var(--texte-3); }
.pied__bas p { max-width: 760px; }
.pied__bas span { white-space: nowrap; }

/* ----------  Page Tarifs : calculateur (structure de la page « small business » de Headspace)  ---------- */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calcul { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 88px) 0; }
/* Les collines peintes en bas, comme les mascottes en bas à gauche chez Headspace :
   le ciel reste libre derrière le titre. */
.calcul__fond {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  /* Bord haut fondu dans le ciel : pas de ligne nette entre la page et la peinture. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.calcul__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 100%; }
.calcul h1 { font-size: clamp(2.5rem, 4.6vw, 3.6rem); }
.calcul__grille { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.calcul__texte { padding-top: 12px; }
.calcul__texte > p:not(.surtitre) { color: var(--texte-2); font-size: 1.15rem; margin-top: 22px; max-width: 470px; }

.calculateur {
  background: var(--creme); color: var(--encre); border-radius: 28px;
  padding: clamp(24px, 3.5vw, 44px); text-align: center;
}
.calculateur h2 { color: var(--encre); font-size: clamp(1.9rem, 3vw, 2.4rem); }
.calculateur__consigne { margin-top: 8px; color: rgba(14, 23, 51, 0.75); }
.bascule--claire { margin: 20px auto 18px; border-color: rgba(14, 23, 51, 0.18); }
.bascule--claire button { color: rgba(14, 23, 51, 0.7); }
.bascule--claire button[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.bascule--claire small { color: #B4552F; }
.bascule--claire button[aria-pressed="true"] small { color: var(--aube); }
.calculateur__nombre input {
  width: 190px; max-width: 100%; text-align: center; font-family: var(--titre); font-size: 3rem; font-weight: 600;
  color: var(--encre); background: #FFF8EE; border: 1.5px solid rgba(14, 23, 51, 0.18); border-radius: 16px; padding: 6px 10px;
  -moz-appearance: textfield;
}
.calculateur__nombre input::-webkit-outer-spin-button, .calculateur__nombre input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calculateur__nombre input:focus { outline: none; border-color: var(--encre); }
.calculateur__curseur { width: 100%; margin: 26px 0 6px; accent-color: var(--encre); height: 28px; }
.calculateur__reperes { display: flex; justify-content: space-between; font-size: 0.88rem; color: rgba(14, 23, 51, 0.7); }
.calculateur__plus { display: block; text-align: right; font-size: 0.88rem; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; }
.calculateur__ligne {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; text-align: left;
  border-top: 1px solid rgba(14, 23, 51, 0.14); padding-top: 18px; margin-top: 18px;
}
.calculateur__ligne strong { display: block; font-size: 1.05rem; }
.calculateur__ligne span { font-size: 0.9rem; color: rgba(14, 23, 51, 0.7); }
.calculateur__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; white-space: nowrap; }
.calculateur__prix s { font-size: 0.95rem; color: rgba(14, 23, 51, 0.55); }
.calculateur__prix b { font-family: var(--titre); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.calculateur__total { font-size: 2.1rem !important; }
.calculateur__economie { background: var(--encre); color: var(--creme) !important; font-size: 0.82rem !important; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.calculateur__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.calculateur__actions a { color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bouton--sombre { background: var(--encre); color: var(--creme); min-width: 200px; }
.bouton--sombre:hover { background: #1a2550; }
.bouton--sombre[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.calculateur__etat { margin-top: 12px; font-size: 0.92rem; min-height: 1.2em; }
.calculateur__etat a { text-decoration: underline; }
.calculateur__note { font-size: 0.82rem; color: rgba(14, 23, 51, 0.6); }
.calculateur__note a { color: var(--encre); text-decoration: underline; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.etape { border-top: 1.5px solid var(--trait); padding-top: 26px; }
.etape__num { font-family: var(--titre); font-size: 3rem; color: var(--aube); line-height: 1; margin-bottom: 14px; }
.etape p { color: var(--texte-2); margin-top: 10px; }
.etape strong { color: var(--creme); font-weight: 600; }

/* ----------  Page Merci  ---------- */
.merci__grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.merci__peinture { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 72% 50%; border-radius: 28px; }
.etapes--serrees { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
.merci__aide { margin-top: 36px; color: var(--texte-2); }
.merci__aide a { color: var(--creme); text-decoration: underline; }

/* ----------  Pages légales  ---------- */
.legal { padding: clamp(56px, 8vw, 100px) 0; }
.legal__corps { max-width: 820px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.legal__maj { color: var(--texte-3); margin: 14px 0 40px; font-size: 0.92rem; }
.legal h2 { font-size: 1.7rem; margin: 40px 0 12px; }
.legal p { color: var(--texte-2); margin-bottom: 14px; }
.legal a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--blanc); font-weight: 600; }

/* ----------  Écrans moyens  ---------- */
@media (max-width: 1000px) {
  .nav a:not(.bouton) { display: none; }
  .hero__grille, .atouts__grille, .demo__grille, .calcul__grille, .merci__grille, .etapes { grid-template-columns: 1fr; }
  .calcul__fond { height: 30%; }
  .merci__peinture { aspect-ratio: 16 / 10; }
  .hero__visuel { max-width: 560px; }
  .cartes-couleur { grid-template-columns: repeat(2, 1fr); }
  .cles__grille { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .pour-qui__grille { grid-template-columns: 1fr; }
  .journee__panneau { grid-template-columns: 1fr; }
  .journee__panneau img { min-height: 0; aspect-ratio: 16 / 9; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .atouts__visuel { max-width: 520px; }
}

/* ----------  Téléphones  ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .logo__pro { display: none; }
  .annonce { font-size: 0.82rem; }
  .hero__actions .bouton { width: 100%; }
  .hero__visuel { padding: 20px 0 24px 0; }
  .hero__peinture { aspect-ratio: 4 / 4.2; }
  .vignette { max-width: 230px; padding: 10px 12px; }
  .vignette img { width: 42px; height: 42px; }
  .vignette__titre { font-size: 1.08rem; }
  .vignette--seance { top: 0; left: -4px; }
  .vignette--louane { top: 46%; right: -4px; max-width: 200px; }
  .vignette--offert { bottom: 0; left: 12px; }
  .cartes-couleur { grid-template-columns: 1fr; }
  .carte-couleur { min-height: 0; }
  .journee__onglets { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gouttiere)) 28px; padding: 0 var(--gouttiere) 4px; scrollbar-width: none; }
  .journee__onglets::-webkit-scrollbar { display: none; }
  .journee__onglets button { flex: none; }
  .formulaire__ligne { grid-template-columns: 1fr; }
  .formulaire .bouton { width: 100%; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__bas { flex-direction: column; }
  .atouts__liste p { margin-left: 0; }
  .calculateur__actions { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .bouton--sombre { width: 100%; }
  .etapes--serrees { grid-template-columns: 1fr; }
  .calculateur__ligne { flex-direction: column; gap: 8px; }
  .calculateur__prix { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}