/* Polices hébergées sur le site (aucun appel à Google) */
@font-face { font-family: "Lexend"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/lexend-700.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/lexend-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/nunito-700.woff2") format("woff2"); }
:root {
  /* Couleurs du logo des marches */
  --nuit: #1B2A41;          /* le P, FAMILY, le texte */
  --orange: #FF6B1A;        /* la marche du milieu, PRO, le bouton principal */
  --orange-texte: #C2410C;  /* orange lisible pour le petit texte */
  --jaune: #FFC21A;         /* la première marche, les touches de joie */
  --fond: #FFFFFF;
  --brume: #F3F6FA;         /* sections calmes */
  --soleil: #FFF4D1;        /* la section « On vous ment » */
  --gris: #55606E;          /* texte secondaire, 6,4:1 sur blanc */
  --trait: #DCE3EC;
  --titre: "Lexend", "Trebuchet MS", system-ui, sans-serif;
  --texte: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* Mise en page : colonne de 1120 px, texte aligné à gauche, les marches comme fil conducteur */
  --large: 1120px;
  --rayon: 22px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--fond); color: var(--nuit); font-family: var(--texte); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(38px, 5.4vw, 60px); font-weight: 800; }
h1 .bloc { display: block; }
h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0; }
.conteneur { width: min(var(--large), 100% - 40px); margin-inline: auto; }
.section { padding: 96px 0; }
.chapeau { font-size: 20px; color: var(--gris); max-width: 62ch; margin-top: 16px; }
.petit { font-size: 15px; color: var(--gris); }
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 6px; }
.lien-evitement { position: absolute; left: -9999px; top: 8px; background: var(--nuit); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.lien-evitement:focus { left: 12px; }

/* Boutons : une pilule, comme les barres du logo */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 28px; border-radius: 999px; border: 3px solid transparent; font-family: var(--titre); font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.btn-principal { background: var(--orange); color: var(--nuit); }
.btn-principal:hover { background: var(--jaune); }
.btn-secondaire { background: transparent; color: var(--nuit); border-color: var(--nuit); }
.btn-secondaire:hover { background: var(--nuit); color: #fff; }
.btn-clair { background: #fff; color: var(--nuit); }
.btn-clair:hover { background: var(--jaune); }
.btn:active { transform: translateY(1px); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--trait); backdrop-filter: blur(6px); }
.entete .conteneur { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: block; color: var(--nuit); }
.logo svg { display: block; height: 42px; width: auto; aspect-ratio: 3016 / 675; }
.menu { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.menu a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 17px; }
.menu a:hover { background: var(--brume); }
.entete .btn { min-height: 46px; padding: 10px 20px; font-size: 16px; }
.bouton-menu { display: none; margin-left: auto; background: var(--brume); border: 0; border-radius: 999px; padding: 10px 18px; font-family: var(--titre); font-weight: 700; font-size: 16px; color: var(--nuit); cursor: pointer; }

/* Accueil */
.accueil { padding: 72px 0 88px; }
.accueil .conteneur { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.accueil .chapeau { font-size: 21px; color: var(--nuit); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.rassurance { margin-top: 16px; font-size: 16px; color: var(--gris); }
.soiree { background: var(--brume); border-radius: 28px; padding: 28px; display: grid; gap: 14px; }
.soiree-titre { font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--gris); }
.moment { background: #fff; border-radius: 18px; padding: 20px 22px; }
.moment b { font-family: var(--titre); font-weight: 700; font-size: 18px; display: block; margin-bottom: 8px; }
.moment ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 17px; }
.moment li { display: flex; gap: 10px; align-items: baseline; }
.moment li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--trait); transform: translateY(-2px); }
.moment.apres { background: var(--nuit); color: #fff; }
.moment.apres li::before { background: var(--jaune); }
.heure { font-family: var(--titre); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Ça vous parle */
.douleurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.douleur { background: #fff; border-radius: var(--rayon); padding: 24px 26px; font-size: 19px; }
.douleur strong { font-family: var(--titre); font-weight: 700; }
.constat { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.constat .chiffre { font-family: var(--titre); font-weight: 800; font-size: 72px; line-height: 1; color: var(--nuit); font-variant-numeric: tabular-nums; }
.constat .chiffre span { font-size: 28px; }
.constat p { font-size: 20px; max-width: 54ch; }

/* On vous ment */
.mensonge { background: var(--soleil); }
.mensonge .conteneur { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.idees { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.idees li { font-family: var(--titre); font-weight: 700; font-size: 21px; text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.mensonge p + p { margin-top: 16px; }
.comparaison { background: #fff; border-radius: 28px; padding: 32px; display: grid; gap: 22px; }
.ligne-prix { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding-bottom: 20px; border-bottom: 2px dashed var(--trait); }
.ligne-prix:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ligne-prix .quoi { font-size: 17px; }
.ligne-prix .combien { font-family: var(--titre); font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-prix.nous .combien { color: var(--nuit); background: var(--jaune); padding: 6px 14px; border-radius: 14px; }
.nuance { font-size: 16px; color: var(--gris); }

/* Services */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.service { border: 2px solid var(--trait); border-radius: var(--rayon); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.service .picto { width: 52px; height: 52px; }
.service p { font-size: 17px; flex: 1; }
.service .des { font-family: var(--titre); font-weight: 700; font-size: 16px; color: var(--orange-texte); }

/* Prix */
.prix-section { background: var(--brume); }
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.offre { background: #fff; border-radius: 28px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.offre .etiquette { align-self: flex-start; background: var(--jaune); color: var(--nuit); font-family: var(--titre); font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px; }
.offre .montant { font-family: var(--titre); font-weight: 800; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.offre .montant small { font-size: 18px; font-weight: 700; }
.offre .ensuite { font-size: 16px; color: var(--gris); margin-top: -6px; }
.offre ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 17px; flex: 1; align-content: start; }
.offre li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.offre li::before { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg) translate(2px, 6px); }
.offre.phare { background: var(--nuit); color: #fff; }
.offre.phare .ensuite { color: #C9D3E0; }
.offre.phare li::before { border-color: var(--jaune); }
.offre .btn { margin-top: 8px; }
.fondateurs { margin-top: 22px; background: #fff; border-radius: var(--rayon); padding: 22px 26px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fondateurs .nb { font-family: var(--titre); font-weight: 800; font-size: 44px; line-height: 1; }
.fondateurs p { flex: 1; min-width: 260px; }
.fondateurs .nb { flex: none; min-width: 0; }
details.toutes { margin-top: 22px; background: #fff; border-radius: var(--rayon); }
details.toutes summary { cursor: pointer; padding: 20px 26px; font-family: var(--titre); font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.toutes summary::-webkit-details-marker { display: none; }
details.toutes summary::after { content: "+"; font-size: 26px; line-height: 1; }
details.toutes[open] summary::after { content: "−"; }
.tableau-defile { overflow-x: auto; padding: 0 26px 22px; }
table { width: 100%; border-collapse: collapse; font-size: 17px; min-width: 560px; }
th, td { text-align: left; padding: 12px 10px; border-top: 1px solid var(--trait); vertical-align: top; }
th { font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--gris); border-top: 0; }
td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }

/* Transparence */
.transparence { margin-top: 64px; }
.trois-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.colonne { background: #fff; border-radius: var(--rayon); padding: 26px; }
.colonne h3 { font-size: 20px; margin-bottom: 12px; }
.colonne ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; }
.accompagnements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.accomp { background: #fff; border-radius: var(--rayon); padding: 26px; display: flex; flex-direction: column; gap: 10px; border-top: 8px solid var(--jaune); }
.accomp:nth-child(2) { border-top-color: var(--orange); }
.accomp:nth-child(3) { border-top-color: var(--nuit); }
.accomp .promesse { font-family: var(--titre); font-weight: 700; font-size: 19px; }
.accomp .mensuel { font-family: var(--titre); font-weight: 800; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.accomp .mensuel small { font-size: 16px; font-weight: 700; }
.accomp p { font-size: 17px; }
.phrase-cle { margin-top: 28px; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); max-width: 30ch; }

/* Comment ça marche : les marches */
.marches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; margin-top: 48px; }
.marche { border-radius: 28px; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.marche .num { font-family: var(--titre); font-weight: 800; font-size: 54px; line-height: 1; }
.marche h3 { font-size: 26px; }
.marche p { font-size: 18px; }
.marche-1 { background: var(--jaune); min-height: 260px; }
.marche-2 { background: var(--orange); min-height: 320px; }
.marche-3 { background: var(--nuit); color: #fff; min-height: 380px; }

/* Famille */
.famille { background: var(--brume); }
.famille .conteneur { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.avantages { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.avantages li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; font-size: 18px; }
.avantages .puce { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; }
.avantages li:nth-child(4n+1) .puce { background: var(--jaune); }
.avantages li:nth-child(4n+2) .puce { background: var(--orange); }
.avantages li:nth-child(4n+3) .puce { background: var(--nuit); color: #fff; }
.avantages li:nth-child(4n+4) .puce { background: #fff; }
.avantages strong { font-family: var(--titre); font-weight: 700; display: block; }
.table-famille { background: #fff; border-radius: 28px; padding: 32px; }
.table-famille .titre-carte { font-family: var(--titre); font-weight: 700; font-size: 15px; color: var(--gris); }
.table-famille .rdv { font-family: var(--titre); font-weight: 800; font-size: 30px; line-height: 1.15; margin-top: 8px; }
.deroule { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.deroule li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--trait); font-size: 17px; }
.deroule .duree { font-family: var(--titre); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Gaëtan */
.fondateur .conteneur { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.photo { aspect-ratio: 4 / 5; border-radius: 28px; background: var(--brume); border: 2px dashed var(--trait); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--gris); font-size: 16px; }
.photo svg { width: 96px; height: 96px; color: var(--nuit); margin-bottom: 12px; }
.fondateur p + p { margin-top: 16px; }
.signature { font-family: var(--titre); font-weight: 700; font-size: 20px; margin-top: 20px; }

/* Questions */
.questions { display: grid; gap: 12px; margin-top: 36px; max-width: 860px; }
.questions details { border: 2px solid var(--trait); border-radius: 18px; }
.questions summary { cursor: pointer; padding: 18px 22px; font-family: var(--titre); font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font-size: 24px; line-height: 1; flex: none; }
.questions details[open] summary::after { content: "−"; }
.questions details[open] { border-color: var(--nuit); }
.questions details p { padding: 0 22px 20px; font-size: 18px; max-width: 68ch; }

/* Contact */
.contact { background: var(--nuit); color: #fff; }
.contact .chapeau { color: #C9D3E0; }
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.carte-contact { background: #fff; color: var(--nuit); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.carte-contact h3 { font-size: 26px; }
.carte-contact .adresse { font-family: var(--titre); font-weight: 700; font-size: 22px; word-break: break-word; }
.carte-contact .boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
.copie-ok { font-size: 15px; color: var(--gris); min-height: 1.5em; }
.pas-de-numero { margin-top: 28px; color: #C9D3E0; font-size: 17px; max-width: 70ch; }

/* Pied de page */
.pied { background: var(--nuit); color: #C9D3E0; border-top: 1px solid rgba(255,255,255,.12); padding: 48px 0 40px; font-size: 16px; }
.pied .conteneur { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.pied .logo { color: #fff; }
.pied .logo svg { height: 46px; }
.pied p + p { margin-top: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied .titre-pied { font-family: var(--titre); font-weight: 700; color: #fff; margin-bottom: 10px; }
.sources { grid-column: 1 / -1; font-size: 14px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; }

/* Téléphone et tablette */
@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .offres { grid-template-columns: 1fr; max-width: 560px; }
  .trois-colonnes, .accompagnements { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .menu { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--trait); padding: 12px 20px 20px; gap: 2px; }
  .menu.ouvert { display: flex; }
  .menu a { font-size: 19px; padding: 12px 14px; }
  .bouton-menu { display: inline-flex; }
  .entete .btn { display: none; }
  .accueil { padding: 48px 0 64px; }
  .accueil .conteneur, .mensonge .conteneur, .famille .conteneur, .fondateur .conteneur { grid-template-columns: 1fr; gap: 36px; }
  .fondateur .photo { max-width: 260px; }
  .douleurs { grid-template-columns: 1fr; }
  .marches { grid-template-columns: 1fr; gap: 14px; }
  .marche { min-height: 0 !important; }
  .marche-2 { margin-left: 24px; }
  .marche-3 { margin-left: 48px; }
  .contacts { grid-template-columns: 1fr; }
  .pied .conteneur { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .logo svg { height: 34px; }
  .constat { grid-template-columns: 1fr; gap: 8px; }
  .services { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .actions .btn, .carte-contact .btn { width: 100%; }
  .marche-2 { margin-left: 12px; }
  .marche-3 { margin-left: 24px; }
  .ligne-prix .combien { font-size: 32px; }
}

/* ===== Version 3 : site en plusieurs pages ===== */
.logo img { display: block; height: 42px; width: auto; }
.pied .logo img { height: 46px; }
.menu a[aria-current="page"] { background: var(--brume); box-shadow: inset 0 -3px 0 var(--orange); }
.icone { width: 52px; height: 52px; flex: none; }
.fond-brume { background: var(--brume); }

/* Les quatre spécialités */
.piliers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.pilier { background: #fff; border-radius: var(--rayon); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.pilier .icone { width: 60px; height: 60px; }
.pilier h3 { font-size: 23px; }
.pilier p { font-size: 17px; }

/* Les tuiles de services */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.tuile { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--trait); border-radius: var(--rayon); padding: 24px; text-decoration: none; color: var(--nuit); background: #fff; transition: border-color .15s, transform .15s; }
.tuile:hover { border-color: var(--nuit); transform: translateY(-2px); }
.tuile h3 { font-size: 21px; }
.tuile p { font-size: 17px; flex: 1; }
.tuile .plus { font-family: var(--titre); font-weight: 700; font-size: 16px; color: var(--orange-texte); }
.tuile-appel { background: var(--nuit); color: #fff; border-color: var(--nuit); justify-content: space-between; }
.tuile-appel:hover { border-color: var(--nuit); }
.tuile-appel h3 { color: #fff; }
.tuile-appel .btn { align-self: flex-start; }

/* Les prix en bref */
.prix-bref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.voir-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }

/* Les pages intérieures */
.titre-page { padding: 64px 0 40px; }
.titre-page .chapeau { font-size: 21px; color: var(--nuit); }
.puces-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.puces-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--brume); text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 16px; }
.puces-nav a:hover { background: var(--jaune); }
.puces-nav .icone { width: 26px; height: 26px; }

/* Un service détaillé */
.service-bloc { padding: 72px 0; scroll-margin-top: 80px; }
.service-bloc:nth-of-type(even) { background: var(--brume); }
.service-entete { display: flex; align-items: center; gap: 18px; }
.service-entete .icone { width: 64px; height: 64px; }
.pese { margin-top: 14px; font-family: var(--titre); font-weight: 700; font-size: 21px; color: var(--gris); }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.carte { background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon); padding: 26px; }
.service-bloc:nth-of-type(even) .carte { border-color: #fff; }
.carte h3 { font-size: 20px; margin-bottom: 12px; }
.carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 18px; }
.carte li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.carte li::before { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg) translate(2px, 7px); }
.carte.change li::before { border-color: var(--nuit); }
.service-prix { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.service-prix p { font-family: var(--titre); font-weight: 700; font-size: 19px; }
.encart { margin-top: 22px; background: var(--soleil); border-radius: var(--rayon); padding: 22px 26px; font-size: 18px; }
.encart strong { font-family: var(--titre); }
.encart .petit { margin-top: 8px; }

/* Page des prix */
.table-prix { background: #fff; border-radius: var(--rayon); padding: 8px 26px 22px; margin-top: 28px; overflow-x: auto; }
.regles { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.regles li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 18px; }
.regles li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--jaune); transform: translateY(8px); }
.autres { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.autres a { text-decoration: none; }

/* Contact : la phrase d'accroche */
.contact h2 .suite { display: block; color: var(--jaune); }

@media (max-width: 1000px) {
  .piliers, .tuiles { grid-template-columns: repeat(2, 1fr); }
  .prix-bref, .autres { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 860px) {
  .deux-col, .regles { grid-template-columns: 1fr; }
  .service-bloc { padding: 56px 0; }
  .titre-page { padding: 44px 0 28px; }
}
@media (max-width: 480px) {
  .piliers, .tuiles { grid-template-columns: 1fr; }
  .logo img { height: 34px; }
  .service-entete .icone { width: 52px; height: 52px; }
}

/* Mentions légales */
.texte-legal .conteneur { max-width: 820px; }
.texte-legal h2 { font-size: 24px; margin: 40px 0 10px; }
.texte-legal p { margin: 0 0 12px; max-width: 68ch; }
.a-remplir { background: var(--jaune); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.note { background: var(--brume); border-radius: 18px; padding: 18px 22px; font-size: 16px; color: var(--gris); margin-top: 24px; }
.tuile-appel .btn { white-space: nowrap; min-height: 48px; padding: 12px 20px; font-size: 16px; }

/* Photos de Gaëtan */
.portrait img, .contact-photo img { display: block; width: 100%; height: auto; border-radius: 28px; background: var(--brume); }
.contact-haut { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; }
/* Pourquoi tout le monde y gagne */
.gagnant { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.gagnant article { background: var(--brume); border-radius: var(--rayon); padding: 22px 24px; border-top: 8px solid var(--jaune); }
.gagnant article:nth-child(2) { border-top-color: var(--orange); }
.gagnant article:nth-child(3) { border-top-color: var(--nuit); }
.gagnant h3 { font-size: 20px; margin-bottom: 8px; }
.gagnant p { font-size: 17px; }
@media (max-width: 860px) {
  .contact-haut { grid-template-columns: 1fr; gap: 24px; }
  .contact-photo { max-width: 220px; }
  .portrait { max-width: 260px; }
  .gagnant { grid-template-columns: 1fr; }
}

/* Gaëtan dès l'accueil */
.avec-gaetan { display: flex; align-items: center; gap: 14px; margin-top: 20px; max-width: 520px; }
.avec-gaetan img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--jaune); flex: none; }
.avec-gaetan p { font-size: 16px; color: var(--gris); }
.avec-gaetan picture { flex: none; display: block; width: 64px; height: 64px; }

/* v3.3 : l'histoire de Gaëtan */
.fondateur .conteneur { align-items: start; }
.fondateur .phrase-forte, .famille .phrase-forte { font-family: var(--titre); font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--nuit); border-left: 5px solid var(--orange); padding: 4px 0 4px 18px; margin-top: 22px; }
.fondateur .phrase-forte + p { margin-top: 22px; }
.lien-histoire { font-weight: 700; color: var(--nuit); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.lien-histoire:hover { color: var(--orange-texte); }

/* v3.4 : la famille */
.boutons-haut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.titre-page .marches { margin-top: 44px; }
.titre-page .marche-1 { min-height: 190px; } .titre-page .marche-2 { min-height: 230px; } .titre-page .marche-3 { min-height: 270px; }
.h3-marche { font-family: var(--titre); font-size: 26px; font-weight: 800; line-height: 1.15; }
.marche-3 .h3-marche { color: #fff; }
.grille-famille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.quatre-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.quatre-tuiles .tuile:hover { transform: none; border-color: var(--trait); }
.etapes-rejoindre { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.etapes-rejoindre li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; font-size: 17px; align-items: start; }
.etapes-rejoindre strong { display: block; font-family: var(--titre); font-size: 19px; margin-bottom: 4px; }
.puce-etape { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 20px; background: var(--jaune); }
.etapes-rejoindre li:nth-child(2) .puce-etape { background: var(--orange); }
.etapes-rejoindre li:nth-child(3) .puce-etape { background: var(--nuit); color: #fff; }
#rejoindre .accompagnements, .adhesion { margin-top: 32px; }
#rejoindre .accomp:nth-child(2), .adhesion .accomp:nth-child(2) { border-top-color: var(--orange); }
#rejoindre .accomp:nth-child(3), .adhesion .accomp:nth-child(3) { border-top-color: var(--nuit); }
.accomp .mensuel sup { font-size: 0.5em; }
.compris { background: #fff; border-radius: var(--rayon); padding: 24px 26px; margin-top: 20px; }
.compris h3 { font-size: 21px; }
.compris ul { margin: 10px 0 0 22px; display: grid; gap: 6px; font-size: 18px; }
@media (max-width: 1060px) { .quatre-tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .grille-famille, .etapes-rejoindre { grid-template-columns: 1fr; }
  .titre-page .marche-1, .titre-page .marche-2, .titre-page .marche-3 { min-height: 0; }
}
@media (max-width: 560px) { .quatre-tuiles { grid-template-columns: 1fr; } }