/* ============================================================
   HOMEPAGE UNIQUEMENT — sections de la landing page (hero douleur,
   plateformes, trois gestes, toile/étoile, Google Agenda, honnêteté,
   sans commission, tarif, FAQ, CTA final, pied de page). Composants
   partagés (boutons, wrap, formulaires, consentement) : composants.css.
   En-tête/menu : entete-publique.css. JAMAIS de <style> dans les
   templates.
   ------------------------------------------------------------
   Refonte du 17/08/2026 : la home devient une vraie landing page de
   conversion (maquette validée design/maquettes/landing/index.html).
   Un seul objectif — l'essai gratuit — et les réponses aux objections
   du marché vivent DANS la page (toile/étoile, Google Agenda).
   ------------------------------------------------------------
   1calendrier, direction v2 « éditoriale cinématique »
   (design/direction-v2.md). Couleurs, typo, rayons : tokens.css
   (source de vérité). L'ordre des blocs compte : les sections sombres
   sont déclarées AVANT les panneaux clairs, pour que l'encre soit
   rétablie à l'intérieur d'un panneau posé sur un aplat sombre.
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Nav ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* .nav (la rangée de l'en-tête) : définie dans entete-publique.css, seule. */

/* ---------- Sections communes ---------- */
section { padding: var(--space-9) 0; }
@media (max-width: 640px) { section { padding: 56px 0; } }
h2 {
  font-size: var(--text-h2); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2); line-height: 1.12;
}
/* Sur-titre de section : petites majuscules espacées, jamais une pastille. */
.eyebrow {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 14px;
}
.sec-head { max-width: 46rem; margin-bottom: 48px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p { color: var(--ink-soft); font-size: 1.05rem; }
.sec-head p + p { margin-top: 12px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Rangée « bouton d'argent + réassurance » ----------
   Règle de conversion : une réassurance est collée à CHAQUE bouton
   d'argent, et jamais deux libellés de bouton identiques sur un écran. */
.cta-bloc { margin-top: var(--space-6); }
.cta-bloc .rassure { margin-top: 14px; font-size: var(--text-small); }

/* Lien discret « voir plus loin » : ce n'est PAS un second bouton, pour ne
   pas concurrencer l'unique objectif de conversion (l'essai gratuit). */
.lien-avance {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--touch-target); text-decoration: none;
  font-size: 0.95rem; font-weight: 700;
}
.lien-avance .fleche { transition: transform var(--dur-fast) var(--ease); }
.lien-avance:hover .fleche { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .lien-avance:hover .fleche { transform: none; } }

/* ---------- Sections sombres (alternance cinématique) ----------
   Constantes SUR-ENCRE : le fond ne suit pas le thème, le texte posé
   dessus est donc figé lui aussi. Déclaré AVANT .panel : un panneau
   clair posé sur ces sections rétablit l'encre plus bas. */
.sec-dark { background: #171715; color: #f2f1ee; }
.sec-dark .sec-head p, .sec-dark p { color: #b9b6ae; }
.sec-dark .eyebrow { color: #a8a59d; }
.sec-dark strong { color: #ffffff; }
/* Deux sections sombres se suivent (Google Agenda, puis honnêteté) : un
   filet clair les sépare pour qu'elles ne fusionnent pas en un seul aplat. */
.sec-dark + .sec-dark { border-top: 1px solid rgb(255 255 255 / 0.14); }

/* Phrase qui porte la réponse (filet neutre, jamais vert). */
.punch {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2); line-height: 1.25;
  color: var(--ink); margin: 26px 0 0; padding-left: 20px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  max-width: 44ch;
}
.sec-dark .punch { color: #f2f1ee; border-left-color: rgb(255 255 255 / 0.42); }

/* ---------- Panneau produit (aperçu mis en scène dans le hero) ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Une carte reste alignée à gauche même quand elle vit dans un bloc centré
     (mobile) : sans ça, chaque sous-texte se centrait selon SA longueur et les
     lignes ne s'alignaient plus entre elles (vrai bug vu par Aurélien 17/08). */
  text-align: left;
  /* Dans une section sombre, on rétablit l'encre à l'intérieur du panneau. */
  color: var(--ink);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.panel-head strong { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.panel-head span { font-size: 0.82rem; color: var(--ink-faint); text-align: right; }
.src-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.src-dot.ok { background: var(--accent); }
.src-dot.ko { background: var(--alert); }
/* État INCONNU : anneau creux, ni vert ni ambre. Rien n'est signalé, donc
   rien n'est coloré. L'ambre reste réservé à une vraie alerte. */
.src-dot.inconnu { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.panel-foot {
  padding: 14px 20px; border-top: 1px solid var(--line);
  background: var(--bg-soft); font-size: 0.9rem; color: var(--ink-soft);
}
.panel-foot strong { color: var(--ink); }

/* ---------- Frise datée (contenu du panneau du hero) ----------
   Une rangée = une pastille + un repère de temps + un fait. C'est du
   CONTENU (vraie liste ordonnée), pas un décor : seules les pastilles
   sont décoratives. */
.frise { position: relative; }
.frise ol { list-style: none; }
/* Le rail vertical relie les pastilles, y compris quand le texte s'empile. */
.frise::before {
  content: ""; position: absolute; z-index: 0;
  left: 24px; top: 22px; bottom: 22px; width: 1px; background: var(--line);
}
.fr-row {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.fr-row:last-child { border-bottom: none; }
/* La pastille s'aligne sur la première ligne de texte, pas sur le bloc. */
.fr-row .src-dot { margin-top: 7px; }
.fr-when {
  font-weight: 700; font-size: 0.95rem; min-width: 104px; flex-shrink: 0;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fr-what { font-size: 0.95rem; color: var(--ink-soft); }
.fr-what strong { color: var(--ink); }
/* La rangée de bascule : c'est la seule qui porte le vert d'état. */
.fr-row.solution { background: var(--accent-soft); }
.fr-row.solution .fr-when { color: var(--accent-ink); }
.fr-row.solution .fr-what { color: var(--ink); }
@media (max-width: 640px) {
  /* La rangée passe sur deux lignes : le fait descend TOUJOURS sous le
     repère de temps et démarre au même retrait (23px = pastille + gouttière). */
  .fr-row { flex-wrap: wrap; row-gap: 3px; }
  .fr-when { min-width: 0; }
  .fr-what { width: 100%; flex-shrink: 0; padding-left: 23px; }
}

/* ---------- Hero « douleur » (sur encre, texte + frise) ----------
   Choix fondateur du 17/08 : on ouvre sur le SILENCE d'une panne, pas sur
   une promesse. Un seul bouton d'argent, sa réassurance collée dessous, et
   un lien discret vers la suite. */
.hero { padding: 0; }
.hero .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding-top: 84px; padding-bottom: 84px;
}
.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display); line-height: 1.07;
  margin-bottom: 18px; text-wrap: balance;
}
.hero h1 em { font-style: italic; }
.hero .sub { font-size: 1.08rem; max-width: 34rem; }
.hero .cta-bloc .rassure { color: #a8a59d; }
.hero .lien-avance { color: #f2f1ee; margin-top: 6px; }
.hero .stage .panel { max-width: 480px; margin-left: auto; box-shadow: var(--shadow-panel); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 56px; }
  .hero .sub { max-width: none; }
  .hero .stage .panel { max-width: none; margin-left: 0; }
}

/* ---------- Plateformes ---------- */
.platforms { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.platforms .wrap { display: flex; align-items: center; gap: 40px; padding: 22px 24px; flex-wrap: wrap; justify-content: center; }
.platforms p { font-size: 0.88rem; color: var(--ink-faint); font-weight: 500; }
.platforms img { height: 26px; width: auto; opacity: 0.75; filter: grayscale(1); transition: opacity var(--dur-med); }
.platforms img:hover { opacity: 1; }
:root[data-theme="dark"] .platforms img { filter: grayscale(1) invert(1); }
/* Abritel : aucun logo libre n'existe (absent de simple-icons), le nom est
   donc écrit, calé sur le gris et la hauteur des logos voisins. */
.platforms .plateforme-mot { font-size: 1.05rem; font-weight: 700; line-height: 26px; color: var(--ink); opacity: 0.75; }
@media (max-width: 640px) { .platforms .wrap { gap: 22px; padding: 18px 16px; } }

/* ---------- Étapes ---------- */
.steps { counter-reset: step; }
.steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 860px) { .steps-list { grid-template-columns: 1fr; } }
.step { background: var(--surface); padding: 34px 28px; }
/* Esthétique éditoriale validée le 10/08 : grands numéros en graisse
   normale, pas de pastilles (jugées cheap). Numéro + titre sur UNE MÊME
   ligne, centrés verticalement l'un sur l'autre (demande Aurélien 17/08).
   Chiffres proportionnels (pas tabular-nums) pour que le « 1 » ne soit pas
   décalé dans une chasse pleine. */
.step h3 {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--text-h3); font-weight: 700; margin-bottom: 12px;
}
.step h3::before {
  counter-increment: step; content: counter(step);
  font-size: 2rem; font-weight: var(--weight-display);
  line-height: 1; letter-spacing: var(--tracking-display);
  color: color-mix(in srgb, var(--accent) 62%, var(--line));
  flex-shrink: 0;
}
.step p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Toile contre étoile (fond clair alterné) ----------
   Le travail invisible que personne ne compte : sans nous, les plateformes
   se lisent DEUX À DEUX. Schéma comparatif quasi monochrome ; le vert
   n'apparaît que du côté étoile, comme signature produit. */
.toile { background: var(--bg-soft); }
.toile-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .toile-duo { grid-template-columns: 1fr; } }
.toile-fig {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 28px 28px 26px;
}
@media (max-width: 640px) { .toile-fig { padding: 22px 20px; } }
.toile-fig .sch { width: 100%; height: auto; display: block; margin-bottom: 20px; }
.toile-fig figcaption { border-top: 1px solid var(--line); padding-top: 20px; }
.toile-fig h3 { font-size: var(--text-h3); font-weight: 700; margin-bottom: 12px; }
.sch-compte { display: flex; align-items: baseline; gap: 12px; }
.sch-compte .n {
  font-size: 2.4rem; line-height: 1; font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display); color: var(--ink); flex-shrink: 0;
}
.sch-compte .quoi { font-size: var(--text-body); color: var(--ink-soft); }
.toile-fig .sch-note { margin-top: 12px; font-size: var(--text-small); color: var(--ink-faint); }
.toile-note { margin-top: 34px; color: var(--ink-soft); max-width: 64ch; }
.toile-note strong { color: var(--ink); }

/* Peau des schémas : tout en tokens, donc lisible dans les deux thèmes. */
.sch text { font-family: var(--font); font-size: 13px; font-weight: 700; }
.sch .sch-label { fill: var(--ink-soft); }
.sch .sch-label-fort { fill: var(--ink); }
.sch .sch-old { stroke: color-mix(in srgb, var(--ink) 20%, transparent); stroke-width: 1.5; }
.sch .sch-new { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; }
.sch .sch-tip { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
.sch .sch-dot { fill: var(--surface); stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1.5; }
.sch .sch-dot-fort { fill: var(--ink); stroke: none; }
/* Côté étoile uniquement : le centre et le geste d'ajout portent le vert. */
.sch .sch-ok { stroke: var(--accent); stroke-width: 2; }
.sch .sch-tip-ok { fill: var(--accent); }
.sch .sch-hub-fond { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.sch .sch-hub-mot { fill: var(--accent-ink); }
/* Le schéma se réduit avec la colonne : sous 900 px il est affiché deux fois
   plus petit qu'en desktop. On agrandit donc ses libellés en unités de
   viewBox pour qu'ils restent lus à la même taille apparente (jamais sous
   13 px à l'écran, cible 45-70 ans). */
@media (max-width: 900px) {
  .sch text { font-size: 17px; }
  .sch .sch-hub-mot { font-size: 16px; }
}

/* ---------- Deux colonnes « fait bien / ne fait pas » ----------
   UNE seule grammaire pour les deux blocs qui l'utilisent : « Et Google
   Agenda, alors ? » et la promesse honnête. Le filet, jamais la boîte
   pleine ; posée sur un aplat sombre (constantes sur-encre). */
.duo-listes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .duo-listes { grid-template-columns: 1fr; } }
.col-liste { border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--radius-card); padding: 32px; }
.col-liste h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; color: #ffffff; }
.col-liste ul { list-style: none; }
.col-liste li {
  padding: 11px 0; border-top: 1px solid rgb(255 255 255 / 0.12);
  color: #c9c6bf; font-size: 0.95rem; display: flex; gap: 10px;
}
.col-liste li:first-child { border-top: none; }
.col-liste li svg { flex-shrink: 0; margin-top: 4px; }
@media (max-width: 640px) { .col-liste { padding: 24px; } }

/* ---------- Et Google Agenda, alors ? (sombre) ---------- */
.google .sec-head { margin-bottom: 36px; }
.google .sec-head p { max-width: 62ch; }
.google .cta-bloc .rassure { color: #a8a59d; }

/* ---------- Page publique + demandes (sans commission, fond alterné) ----------
   Cartes blanches sur le fond gris de la section (langage .panel du site) :
   avant, un simple filet noir de 2px faisait « nu / cheap » à côté des cartes
   du reste de la page (demande Aurélien 17/08). Un filet d'accent en tête
   signe chaque carte sans pastille d'icône. */
.direct { background: var(--bg-soft); }
.direct .eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--accent-ink); margin-bottom: 12px; }
.direct .sec-head { margin-bottom: 44px; }
.direct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 860px) { .direct-grid { grid-template-columns: 1fr; gap: 28px; } }
.direct-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}
.direct-item h3 { font-size: var(--text-h3); font-weight: 700; margin-bottom: 10px; }
.direct-item p { color: var(--ink-soft); font-size: var(--text-body); max-width: 42ch; }
.direct-item p strong { color: var(--ink); }
.direct-note { margin-top: 34px; color: var(--ink-faint); font-size: var(--text-small); }

/* ---------- Tarif ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }
.price-card { background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius-card); padding: 36px; display: flex; flex-direction: column; }
.price-card .eyebrow { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.75rem; color: var(--accent-ink); margin-bottom: 10px; }
.price-num { font-size: 3rem; font-weight: var(--weight-display); letter-spacing: -0.02em; line-height: 1; }
.price-num small { font-size: 1rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.price-alt { color: var(--ink-faint); font-size: 0.9rem; margin: 8px 0 22px; }
.price-card ul { list-style: none; margin-bottom: 28px; }
.price-card li { position: relative; padding: 8px 0 8px 1.5em; color: var(--ink-soft); font-size: 0.95rem; }
.price-card li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--accent-ink); }
.price-card li strong { color: var(--ink); }
.price-card.is-reco { border-width: 2px; }
/* .btn est un inline-flex : text-align ne centre pas ses enfants, c'est
   justify-content qui aligne — visible surtout sur un libellé court
   (« Commencer avec Pro ») dans un bouton pleine largeur. */
.price-card .btn { width: 100%; justify-content: center; text-align: center; margin-top: auto; }
.price-chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-ink); color: var(--surface); font-size: 0.68rem; letter-spacing: 0.06em; white-space: nowrap; }
.price-card.is-soon .price-chip { background: var(--ink-faint); }
.price-card.is-soon .price-num, .price-card.is-soon li { color: var(--ink-soft); }
.price-notes { margin-top: 22px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.price-notes strong { color: var(--ink); }
@media (max-width: 430px) {
  .price-card { padding: 28px; }
  .price-chip { font-size: 0.6rem; letter-spacing: 0.03em; padding: 2px 6px; }
  /* Sur les très petits écrans, « Conciergerie + Ouverture prochaine » ne
     tient plus sur une ligne : le sur-titre s'autorise à passer à la ligne
     plutôt que de déborder la carte (vérifié jusqu'à 320 px). */
  .price-card .eyebrow { letter-spacing: 0.1em; white-space: normal; flex-wrap: wrap; }
}

/* ---------- FAQ (fond clair alterné) ---------- */
.faq-sec { background: var(--bg-soft); }
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 8px 20px 0;
  font-weight: 700; font-size: 1.02rem; display: flex; justify-content: space-between; align-items: center;
  min-height: var(--touch-target);
  gap: 24px; /* règle « l'indicateur respire » : jamais moins de 24px entre texte et + (design/direction-v2.md) */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--ink-faint); font-size: 1.3rem; transition: transform var(--dur-med) var(--ease); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); padding-bottom: 20px; max-width: 60ch; }
.faq details p a { color: var(--accent-ink); font-weight: 700; }

/* ---------- CTA final (pleine largeur, sombre) ---------- */
.final-cine .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.final-cine h2 { margin-bottom: 8px; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

/* ---------- Footer ---------- */
footer { padding: 40px 0 48px; color: var(--ink-faint); font-size: 0.88rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--ink-soft); text-decoration: none; margin-left: 22px; }
footer a:hover { color: var(--ink); }

/* ---------- Mobile ----------
   Tout s'empile, les boutons d'argent passent pleine largeur (jamais ceux de
   l'en-tête, qui restent des boutons de barre). La section CTA finale + le
   pied de page formaient un aplat sombre qui remplissait presque tout l'écran
   avec le padding desktop (demande Aurélien 17/08 : « le footer prend comme
   100vh ») : on resserre. */
@media (max-width: 640px) {
  .hero .cta-bloc .btn, .google .cta-bloc .btn, .final-cine .btn { width: 100%; justify-content: center; }
  .final-cine { padding: 52px 0; }
  footer { padding: 28px 0 40px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 8px 0; }
  footer a { margin-left: 0; margin-right: 22px; }
}