/* ==========================================================================
   Décor de la page d'accueil : déclinaison C « Aplats », choisie par Nicolas le 2026-11-02.
   Grands disques calmes et fonds de section francs. À charger après site.css, sur index.html seulement.
   Fichiers : assets/decor.css, assets/decor/disque-*.svg (un cercle plein par fichier, sans style ni script).
   Sections visées par leur aria-labelledby : une section ajoutée ou renommée doit être reportée ici.

   - Le disque reprend le tampon de la charte, agrandi et sans trait : un par
     section au plus, côté droit ou gauche en alternance, toujours derrière
     une illustration ou dans la colonne vide des titres, jamais sous un texte
     courant sur grand écran.
   - Fonds : papier, sable (Fonctionnalités, Questions), encre (Tarifs : l'offre
     Essentiel ressort en carte claire), sang-de-bœuf (appel final, la seule
     action de la page). Les hachures ne restent qu'entre l'accroche et le
     constat, les deux seules sections de même fond qui se suivent.
   Aplats en linear-gradient(c, c) : une seule couleur, aucun dégradé.
   ========================================================================== */

:root{--c-sand:var(--side);--c-ink:#271512;--c-sang:#651818;--c-paper-txt:#f5efe7;--c-muted-ink:#cabab1;--c-rose-txt:#edc2bb;--c-em:#f6c3ba;--c-green-ink:#82d2a8}
main{overflow-x:clip}

/* Cadre commun : pleine largeur, hauteur de la section, derrière son contenu */
.hero{position:relative;isolation:isolate}
.sec,.final{isolation:isolate}
.hero::after,.sec::after,.final::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;pointer-events:none;left:calc(50% - max(960px,50vw));right:calc(50% - max(960px,50vw));background-repeat:no-repeat}
.sec:not([aria-labelledby="h-constat"])::before,.final::before{display:none}

/* Accroche : un grand disque rose derrière l'éditeur, coupé par le bord droit */
.hero::after{background-image:url(decor/disque-rose.svg);background-position:left calc(50% + 500px) top calc(50% + 90px);background-size:900px 900px}

/* 01 Constat (papier) : demi-disque sable sous la colonne des titres */
.sec[aria-labelledby="h-constat"]::after{background-image:url(decor/disque-sable.svg);background-position:left calc(50% - 680px) bottom -200px;background-size:640px 640px}

/* 02 Fonctionnalités (sable) */
.sec[aria-labelledby="h-feat"]::after{background-image:url(decor/disque-sable.svg),linear-gradient(var(--c-sand),var(--c-sand));background-position:left calc(50% - 700px) top 34%,0 0;background-size:760px 760px,100% 100%}

/* 03 Téléphone (papier) : disque rose derrière la maquette */
.sec[aria-labelledby="h-mobile"]::after{background-image:url(decor/disque-rose.svg);background-position:left calc(50% + 458px) bottom 89px;background-size:620px 620px}

/* 04 Tarifs (encre) */
.sec[aria-labelledby="h-tarifs"]{color:var(--c-paper-txt);--ink:var(--c-paper-txt);--muted:var(--c-muted-ink);--line:#46322e;--line-2:#6d544e;--side:#3e2b27;--green:var(--c-green-ink)}
.sec[aria-labelledby="h-tarifs"]::after{background-image:url(decor/disque-encre.svg),linear-gradient(var(--c-ink),var(--c-ink));background-position:left calc(50% + 420px) top 360px,0 0;background-size:1100px 1100px,100% 100%}
.sec[aria-labelledby="h-tarifs"] .stamp{color:var(--c-rose-txt);border-color:var(--c-rose-txt);box-shadow:inset 0 0 0 3px var(--c-ink),inset 0 0 0 4px var(--c-rose-txt)}
/* L'offre Essentiel reste une carte claire : jetons d'origine */
.sec[aria-labelledby="h-tarifs"] .plan.key{color:#271512;--ink:#271512;--muted:#62514a;--line:#ddd2c8;--line-2:#b7a396;--side:#efe8df;--green:oklch(42% 0.1 160)}
.sec[aria-labelledby="h-tarifs"] .plan.soon{border-color:#7c625b}

/* 06 Questions (sable) */
.sec[aria-labelledby="h-faq"]::after{background-image:url(decor/disque-sable.svg),linear-gradient(var(--c-sand),var(--c-sand));background-position:left calc(50% - 690px) top 62%,0 0;background-size:560px 560px,100% 100%}
.sec[aria-labelledby="h-feat"] .stamp,.sec[aria-labelledby="h-faq"] .stamp{box-shadow:inset 0 0 0 3px var(--c-sand),inset 0 0 0 4px var(--ox)}
.sec[aria-labelledby="h-feat"] .stamp.sm{box-shadow:inset 0 0 0 2px var(--c-sand),inset 0 0 0 3px var(--ox)}

/* Appel final (sang-de-bœuf) : grand disque à la place du disque hachuré, le symbole de Calepina en son centre
   (decor/logo.svg : symbole V5 des fonds sombres, sans son fond). Logo et disque ont la même position : centres confondus. */
.final{color:var(--c-paper-txt)}
.final::after{background-image:url(decor/logo.svg),url(decor/disque-sang.svg),linear-gradient(var(--c-sang),var(--c-sang));background-position:left calc(50% + 560px) center,left calc(50% + 560px) center,0 0;background-size:178px 260px,760px 760px,100% 100%}
/* Sous 1 360 px, le centre du disque sortirait de l'écran avec le logo : disque plus petit, rapproché du bord droit */
@media (min-width:1001px) and (max-width:1359px){.final::after{background-position:left calc(50% + 50vw - 200px) center,left calc(50% + 50vw - 200px) center,0 0;background-size:140px 204px,560px 560px,100% 100%}}
.final .disc{visibility:hidden}
.final .kicker,.final .lead,.final .wl-note{color:var(--c-rose-txt)}
.final h2 em{color:var(--c-em)}
.final .btn{background:var(--c-paper-txt);color:var(--c-sang)}
.final .btn:hover{background:#fff;color:var(--c-sang)}
.final .hdr-cta{color:var(--c-paper-txt);border-color:var(--c-paper-txt)}
.final .hdr-cta:hover{color:#fff;border-color:#fff}
.final :focus-visible{outline-color:var(--c-paper-txt)}
.ftr{border-top:0}

/* Une colonne : les disques de la colonne des titres passeraient sous le texte, ils partent */
@media (max-width:1000px){
  .sec[aria-labelledby="h-constat"]::after{background-image:none}
  .sec[aria-labelledby="h-feat"]::after,.sec[aria-labelledby="h-faq"]::after{background-image:linear-gradient(var(--c-sand),var(--c-sand));background-position:0 0;background-size:100% 100%}
  .hero::after{background-position:left calc(50% + 260px) bottom -20px;background-size:640px 640px}
  .sec[aria-labelledby="h-mobile"]::after{background-position:left calc(50% + 318px) bottom 82px;background-size:580px 580px}
  /* Disque coupé dans le coin : le logo garde le centre du disque (haut du logo = haut du disque + (disque - logo) / 2) */
  .final::after{background-position:left calc(50% + 50vw - 60px) top 28px,left calc(50% + 50vw - 60px) top -140px,0 0;background-size:58px 84px,420px 420px,100% 100%}
}
@media (max-width:860px){.sec[aria-labelledby="h-mobile"]::after{background-position:center top 52%;background-size:440px 440px}}
@media (max-width:760px){
  .sec[aria-labelledby="h-mobile"]::after{background-position:left 50% top 616px;background-size:420px 420px}
  .sec[aria-labelledby="h-tarifs"]::after{background-position:left calc(50% + 150px) bottom 520px,0 0;background-size:560px 560px,100% 100%}
  .hero::after{background-position:left calc(50% + 150px) bottom -40px;background-size:520px 520px}
  .final::after{background-position:left calc(50% + 160px) top 12px,left calc(50% + 160px) top -120px,0 0;background-size:38px 56px,320px 320px,100% 100%}
}