/* Habillage du site ocsia2.com, construit par la préparation à partir de assets/site/css/. Ne pas modifier ici. */

/* ---- 10-base.css ---- */
/* Site ocsia2.com, direction sûre « le cahier de l'atelier » (validée par Flavio le 13/10/2026).
   Page claire de cahier bien tenu, violet foncé pour la voix, pastel derrière ce qu'on démontre, un seul trait d'or :
   le soulignement au crayon. Thème clair par défaut, sombre selon l'appareil. Couleurs et polices : /theme.css
   (charte OCSIA2 posée par la préparation, étape 10). Ici seulement ce qui est propre au site. */

:root {
  --oc-zone: #e8dcf2;          /* second violet (charte) : derrière ce qu'on démontre */
  --oc-trait: #e9e3ee;
  --oc-crayon: #c9a24d;        /* or rare : le trait de crayon, le focus */
  --oc-or-voile: #f4ecd6;
  --oc-or-texte: #7d5f17;
  --oc-violet-08: rgb(75 23 111 / .08);
  --oc-violet-16: rgb(75 23 111 / .16);
  --oc-ombre: 0 18px 40px -18px rgb(75 23 111 / .28), 0 2px 6px rgb(75 23 111 / .08);
  --oc-page: min(1200px, 100% - 2rem);
  --oc-main: "Ms Madi", cursive;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-tiroir: cubic-bezier(.32, .72, 0, 1);
  --r-champ: 14px; --r-carte: 20px; --r-feuille: 28px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --oc-zone: #2e1f3a; --oc-trait: #3a2a47; --oc-crayon: #e0c27a; --oc-or-voile: rgb(224 194 122 / .18); --oc-or-texte: #e0c27a;
    --oc-violet-08: rgb(232 220 242 / .08); --oc-violet-16: rgb(232 220 242 / .16);
    --oc-ombre: 0 18px 40px -18px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .3);
  }
}

body { font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--oc-zone); color: var(--c-texte); }
:focus-visible { outline: 3px solid var(--oc-crayon); outline-offset: 2px; border-radius: 6px; }
html { scrollbar-color: rgb(75 23 111 / .32) transparent; scroll-padding-top: 88px; }
input, textarea { caret-color: var(--c-primaire); }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; }
a { color: inherit; }

/* ----- Boutons (un seul rayon : 14 px ; pilules pour les choix) ----- */
.bouton { min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--r-champ); border: 1.5px solid var(--c-primaire); font-weight: 600; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.bouton:hover { transform: none; }
.bouton:active { transform: scale(.97); }
.bouton--principal { background: var(--c-primaire); color: var(--c-primaire-txt); }
.bouton--principal:hover { box-shadow: none; }
.bouton--secondaire { background: transparent; color: var(--c-primaire); border-color: var(--c-primaire); }
@media (hover: hover) and (pointer: fine) {
  .bouton--principal:hover { background: color-mix(in srgb, var(--c-primaire) 86%, var(--c-texte)); }
  .bouton--secondaire:hover { background: var(--oc-violet-08); }
}
.boutons { gap: .75rem; }

/* ----- En-tête ----- */
.entete { background: color-mix(in srgb, var(--c-fond) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.entete.defile { border-bottom-color: var(--oc-trait); }
.entete__in { max-width: none; width: var(--oc-page); padding: 0; min-height: 72px; gap: 1.5rem; }
.logo { margin-right: auto; min-height: 44px; }
.logo picture img, .logo__img img { max-height: 36px; height: 36px; width: auto; }
.nav__liste { gap: .25rem; }
.nav__liste a { position: relative; font-weight: 400; color: var(--c-texte); padding: .6rem .85rem; border-radius: 10px; }
.nav__liste a .icone { display: none; }
.nav__liste a[aria-current="page"] { font-weight: 600; color: var(--c-texte); box-shadow: none; }
/* La page courante : un trait de crayon doré sous le lien (seul or de l'en-tête). */
.nav__liste a[aria-current="page"]:not(.bouton)::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 8px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C26 2.5 52 6.5 98 3' fill='none' stroke='%23C9A24D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (hover: hover) and (pointer: fine) { .nav__liste a:not(.bouton):hover { background: var(--oc-violet-08); } }
.nav__liste a.bouton { margin-left: 1rem; min-height: 44px; padding: .55rem 1.1rem; color: var(--c-primaire-txt); font-weight: 600; }
.nav__liste a.bouton[aria-current="page"] { color: var(--c-primaire-txt); }

@media (max-width: 900px) {
  .entete__in { min-height: 64px; }
  .logo picture img, .logo__img img { height: 30px; }
  .bouton-menu { min-height: 44px; padding: .5rem .9rem; gap: .5rem; border: 1.5px solid var(--oc-trait); border-radius: 999px; background: var(--c-surface); color: var(--c-texte); font-weight: 600; transition: transform 160ms var(--ease-out); }
  .bouton-menu::after { content: "Menu"; }
  .bouton-menu:active { transform: scale(.97); }
  .nav__liste a .icone { display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--c-primaire); }
  .menu-feuille .nav__liste a { gap: .9rem; font-size: 1.125rem; border-radius: var(--r-champ); }
  .menu-feuille .nav__liste a[aria-current="page"] { background: var(--oc-zone); }
  .menu-feuille .nav__liste a[aria-current="page"]:not(.bouton)::after { display: none; }
  .menu-feuille .nav__liste a.bouton { margin: 1rem 0 0; width: 100%; }
  .menu-feuille .nav { border-radius: var(--r-feuille) var(--r-feuille) 0 0; }
  .menu-feuille .nav__poignee { background: var(--oc-trait); }
}

/* ----- Typographie du site ----- */
.oc-titre-1 { font-family: var(--police-titres); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.012em; margin: 0; }
.oc-titre-2 { font-family: var(--police-titres); font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.08; margin: 0; }
.oc-titre-3 { font-family: var(--police-titres); font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem); line-height: 1.15; margin: 0; }
.oc-chapo { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--c-doux); max-width: 34ch; margin: 0; }
.oc-texte { max-width: 62ch; }
.oc-texte p + p { margin-top: 1rem; }
.oc-doux { color: var(--c-doux); }
.oc-legende { font-size: .875rem; color: var(--c-doux); margin: 0; }
.riche p:last-child { margin-bottom: 0; }

/* ----- Sections : rythme du cahier ----- */
.bloc { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.bloc + .bloc:not([class*="fond-"]) { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.bloc__in { max-width: none; width: var(--oc-page); padding-inline: 0; }
.bloc.espace-s { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ----- Pied ----- */
.pied { margin-top: clamp(4rem, 8vw, 7rem); padding-block: 3rem 2.5rem; border-top: 1px solid var(--oc-trait); background: transparent; color: var(--c-texte); }
.pied__in { width: var(--oc-page); max-width: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.pied__nom { font-family: var(--police-titres); font-size: 1.5rem; letter-spacing: .04em; color: var(--c-primaire); margin: 0; }
.pied__marque p:not(.pied__nom) { color: var(--c-doux); margin: .25rem 0 0; }
.pied__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pied__liens a, .pied__propulse, .pied__propulse a { color: var(--c-doux); }
.pied__propulse { width: 100%; font-size: .875rem; margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .pied__nom { color: var(--c-texte); } }

/* ----- Mouvement réduit : plus aucun déplacement ; les fondus courts qui disent qu'un état a changé restent. ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color, visibility !important; transition-duration: 150ms !important; }
}

/* ----- Retours de la critique (Impeccable, 13/10/2026) ----- */
/* Sur la page du questionnaire, le bouton qui y mène ne sert plus. */
.nav__liste a.bouton[aria-current="page"] { display: none; }
/* Pied : le logo de marque/ tel quel à la place du nom écrit (le nom reste lu par les lecteurs d'écran). */
.pied__nom { width: 124px; height: 28px; font-size: 0; color: transparent; background: no-repeat left center / contain url("img/logo-prune-horizontal.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .pied__nom { background-image: url("img/logo-blanc-horizontal.svg"); } }

/* ---- 20-accueil.css ---- */
/* Accueil d'ocsia2.com : blocs oc_* (ocsia/site/blocs.d/ocsia2.php), fidèles à maquettes/site-ocsia2/sure/. */

/* ----- Première vue : titre à gauche, l'app dans un téléphone à droite ----- */
.bloc--oc_une { padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.oc-une { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.oc-une .oc-titre-1 { max-width: 21ch; }
.oc-une .oc-chapo { margin-top: 1.5rem; }
.oc-actions { margin-top: 2.25rem; }
.mot-souligne { position: relative; display: inline-block; }
.mot-souligne svg { position: absolute; left: -2%; width: 104%; bottom: -.14em; height: .32em; color: var(--oc-crayon); overflow: visible; }
.mot-souligne path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .mot-souligne path { animation: oc-souligner 900ms var(--ease-in-out) 450ms both; } }
@keyframes oc-souligner { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.oc-une__figure { margin: 0; }
.oc-une__figure figcaption { margin-top: 1rem; text-align: center; }

.oc-telephone { position: relative; width: min(330px, 78vw); margin-inline: auto; padding: 10px; border-radius: 46px; background: var(--c-prune, #24152b); box-shadow: var(--oc-ombre); }
.oc-telephone .media, .oc-telephone picture { display: block; }
.oc-telephone img { width: 100%; height: auto; border-radius: 37px; aspect-ratio: 780 / 1688; object-fit: cover; object-position: top; }
.oc-telephone--court img { aspect-ratio: 780 / 1300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .oc-telephone { background: #3a2a47; box-shadow: 0 0 0 1px #4e3d5c, var(--oc-ombre); } }

/* ----- La scène : l'info clé (fond pastel, bords arrondis dès que la page dépasse la largeur du contenu) ----- */
.bloc--oc_scene { background: var(--oc-zone); width: min(100%, 1240px); margin-inline: auto; border-radius: clamp(0px, (100vw - 1240px) * 999, var(--r-feuille)); }
.oc-scene { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.oc-scene .oc-texte { margin-top: 1.25rem; }
.oc-demo { background: var(--c-surface); border-radius: var(--r-carte); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--oc-ombre); }
.oc-demo__libelle { display: block; font-weight: 600; margin-bottom: .5rem; }
.oc-demo__champ { width: 100%; min-height: 52px; padding: .75rem 1rem; border: 1.5px solid var(--oc-trait); border-radius: var(--r-champ); background: var(--c-fond); color: var(--c-texte); font: inherit; font-size: 1.125rem; transition: border-color 160ms ease; }
.oc-demo__champ:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--oc-violet-16); }
.oc-demo__aide { margin: .5rem 0 0; font-size: .9rem; color: var(--c-doux); }
.oc-lieux { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; }
.oc-lieux li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem .75rem; padding-block: .85rem; border-top: 1px solid var(--oc-trait); }
.oc-lieux .icone { grid-row: span 2; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 12px; background: var(--oc-zone); color: var(--c-primaire); }
.oc-lieux__ou { font-size: .8125rem; font-weight: 600; color: var(--c-doux); }
.oc-lieux mark { background: transparent; color: inherit; font-weight: 600; border-radius: 4px; padding: 0 .15em; box-shadow: inset 0 -.45em 0 var(--oc-or-voile); transition: box-shadow 600ms ease; }
.oc-lieux mark.vient { box-shadow: inset 0 -1.3em 0 var(--oc-or-voile); transition: none; }
.oc-demo .oc-legende { margin-top: 1rem; }

/* ----- Trois promesses : le titre reste à gauche pendant la lecture ----- */
.oc-promesses { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); }
.oc-promesses > h2 { position: sticky; top: 110px; align-self: start; }
.oc-promesses ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.oc-promesses li { padding-top: 1.5rem; border-top: 1px solid var(--oc-trait); }
.oc-promesses li .riche { margin-top: .75rem; max-width: 58ch; }

/* ----- Pour qui : onglets, curseur doré ----- */
.oc-pourqui .riche { margin-top: 1rem; max-width: 62ch; }
.oc-onglets { position: relative; display: flex; gap: .25rem; margin-top: 2.5rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--oc-trait); }
.oc-onglets::-webkit-scrollbar { display: none; }
.oc-onglets button { flex: none; min-height: 48px; padding: .6rem 1rem; border: 0; background: transparent; color: var(--c-doux); font: inherit; font-weight: 600; border-radius: 10px 10px 0 0; cursor: pointer; transition: color 160ms ease; }
.oc-onglets button[aria-selected="true"] { color: var(--c-texte); }
@media (hover: hover) and (pointer: fine) { .oc-onglets button:hover { color: var(--c-texte); } }
.oc-onglets__curseur { position: absolute; left: 0; bottom: -1px; height: 3px; width: 1px; border-radius: 3px; background: var(--oc-crayon); transform-origin: left; transition: transform 240ms var(--ease-out); }
.oc-profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: 2.25rem; }
.oc-profil[hidden] { display: none; }
.oc-profil h3 { font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--c-doux); margin: 0 0 .75rem; letter-spacing: 0; }
.oc-profil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.oc-profil li { position: relative; padding-left: 1.6rem; }
.oc-profil li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; background: var(--c-primaire); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.oc-profil__plus li::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.oc-soulagement { font-family: var(--police-titres); font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.2; margin: 0; }
@media (prefers-reduced-motion: no-preference) { .oc-profil:not([hidden]) { animation: oc-apparaitre 260ms var(--ease-out); } }
@keyframes oc-apparaitre { from { opacity: 0; transform: translateY(6px); } }

/* ----- L'app : deux écrans décalés, le geste de l'appareil ----- */
.oc-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.oc-app .riche { margin-top: 1rem; }
.oc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; max-width: 520px; }
.oc-duo .oc-telephone { width: 100%; }
.oc-duo .oc-telephone:last-child { transform: translateY(2.5rem); }
.oc-installer { margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: var(--r-carte); background: var(--oc-zone); }
.oc-installer p { margin: 0 0 .5rem; }
.oc-gestes { list-style: none; margin: 0; padding: 0; }
.oc-installer.reconnu .oc-gestes li:not(.est-vous) { display: none; }
.oc-installer .boutons { margin-top: 1rem; }
.oc-a-venir { margin-top: 1.25rem; color: var(--c-doux); max-width: 52ch; }

/* ----- Claude et les principes ----- */
.oc-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem); }
.oc-claude dl { margin: 1.5rem 0 0; display: grid; gap: 1.25rem; }
.oc-claude dt { font-weight: 600; }
.oc-claude dd { margin: .25rem 0 0; color: var(--c-doux); }
.oc-claude .riche { margin-top: 1.5rem; }
.oc-principes ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; }
.oc-principes li { padding-block: 1rem; border-top: 1px solid var(--oc-trait); }
.oc-principes strong { display: block; font-family: var(--police-titres); font-weight: 400; font-size: 1.35rem; }
.oc-principes span { color: var(--c-doux); }

/* ----- Formules : une ligne par formule, le prix seulement s'il existe ----- */
.oc-formules { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; }
.oc-formule { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr) auto; gap: 1rem 3rem; align-items: start; padding-block: 1.75rem; border-top: 1px solid var(--oc-trait); }
.oc-formule:last-child { border-bottom: 1px solid var(--oc-trait); }
.oc-formule h3 { font-family: var(--police-titres); font-weight: 400; font-size: 1.75rem; margin: 0; }
.oc-formule__pour { margin: .25rem 0 0; color: var(--c-doux); }
.oc-formule__prix { margin: 0; font-family: var(--police-titres); font-size: 1.5rem; justify-self: end; white-space: nowrap; }
.oc-coches ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.oc-coches li { position: relative; padding-left: 1.5rem; }
.oc-coches li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 1rem; height: 1rem; background: var(--c-primaire); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.oc-maintenance { margin-top: 1.25rem; color: var(--c-doux); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; }
.oc-maintenance .oc-formule__prix { color: var(--c-texte); font-size: 1.15rem; }
.oc-formules-bloc .boutons { margin-top: 1.5rem; }
.bloc--texte#garantie .bloc__in, .bloc--appel#entreprise .bloc__in { max-width: 46rem; margin-inline: auto; }

/* ----- Appel final : violet, phrase manuscrite (une par page), le symbole qui se trace une fois ----- */
.oc-appel { background: var(--c-primaire); color: var(--c-fond); border-radius: var(--r-feuille); padding: clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2rem; align-items: end; }
.oc-main { font-family: var(--oc-main); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; color: #e8dcf2; margin: 0 0 1rem; }
.oc-appel .oc-titre-2 { max-width: 20ch; }
.oc-appel__texte { margin-top: 1rem; max-width: 46ch; color: color-mix(in srgb, #e8dcf2 88%, #fbfaf6); }
.oc-appel__fin { display: grid; gap: 1rem; justify-items: end; }
.oc-appel .bouton--principal { background: #fbfaf6; border-color: #fbfaf6; color: #4b176f; }
@media (hover: hover) and (pointer: fine) { .oc-appel .bouton--principal:hover { background: #e8dcf2; } }
.oc-trace { width: 72px; height: 72px; }
@property --trace { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.oc-trace { -webkit-mask-image: conic-gradient(from 188deg, #000 var(--trace), transparent 0); mask-image: conic-gradient(from 188deg, #000 var(--trace), transparent 0); }
@media (prefers-reduced-motion: no-preference) {
  .oc-trace.pret:not(.anime) { --trace: 0deg; }
  .oc-trace.anime { animation: oc-tracer 1100ms var(--ease-in-out) both; }
}
@keyframes oc-tracer { from { --trace: 0deg; } to { --trace: 360deg; } }
/* En mode sombre, le violet foncé disparaît dans le fond : l'appel garde la charte (violet profond, texte clair). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .oc-appel { background: #4b176f; color: #fbfaf6; } }

/* ----- Téléphone ----- */
@media (max-width: 900px) {
  .oc-une, .oc-scene, .oc-promesses, .oc-app, .oc-deux, .oc-appel { grid-template-columns: minmax(0, 1fr); }
  .bloc--oc_une { padding-top: 1.75rem; }
  .oc-promesses > h2 { position: static; }
  .oc-profil { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .oc-formule { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .oc-formule__prix { justify-self: start; }
  .oc-appel__fin { justify-items: start; }
  .oc-duo { margin-inline: auto; }
  .oc-duo .oc-telephone:last-child { transform: translateY(1.5rem); }
}

/* ---- 30-pages.css ---- */
/* Pages intérieures d'ocsia2.com : Fonctions (sommaire suivi), questionnaire (rail des étapes et feuille), l'app,
   pages légales. Les formulaires et le bloc « Installer l'app » sont ceux du cœur, habillés ici. */

/* ----- En-tête de page ----- */
.bloc--oc_tete { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.5rem, 2.5vw, 2.5rem); }
.bloc--oc_tete + .bloc.espace-s { padding-top: 0; }
.bloc--oc_tete + .bloc { padding-top: 0; }
.oc-tete .oc-chapo { margin-top: 1.25rem; max-width: 52ch; }

/* ----- Fonctions : sommaire collé à gauche, la partie lue marquée ----- */
.oc-fonctions { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.oc-sommaire { position: sticky; top: 96px; }
.oc-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.oc-sommaire a { display: flex; align-items: center; min-height: 44px; padding: .5rem .75rem; border-radius: 10px; text-decoration: none; color: var(--c-doux); }
.oc-sommaire a[aria-current="true"] { color: var(--c-texte); font-weight: 600; background: var(--oc-zone); }
@media (hover: hover) and (pointer: fine) { .oc-sommaire a:hover { color: var(--c-texte); } }
.oc-groupe { padding-block: 0 clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 96px; }
.oc-groupe__intro { margin: .75rem 0 0; max-width: 60ch; color: var(--c-doux); }
.oc-points ul { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.oc-points li { padding-top: 1rem; border-top: 1px solid var(--oc-trait); color: var(--c-doux); }
.oc-points strong { display: block; color: var(--c-texte); font-weight: 600; margin-bottom: .3rem; }
.oc-groupe--prepa { background: var(--oc-zone); border-radius: var(--r-carte); padding: clamp(1.5rem, 4vw, 2.5rem); }
.oc-groupe--prepa > p { margin: .75rem 0 0; color: var(--c-doux); }
.oc-groupe--prepa ul { margin: 1.25rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }

/* ----- Questionnaire : le formulaire à étapes du cœur, en rail (étapes) et feuille (questions) ----- */
.bloc--formulaire .section-titre:empty { display: none; }
.bloc--formulaire .formulaire { max-width: none; }
.formulaire--sommaire { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: 0; align-items: start; }
.formulaire--sommaire > * { grid-column: 2; margin: 0; }
.formulaire--sommaire > .formulaire__sommaire { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 96px; }
.formulaire__sommaire ol { position: relative; display: grid; gap: .15rem; padding: 0 0 0 1.25rem; overflow: visible; }
.formulaire__sommaire ol::before, .formulaire__sommaire ol::after { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 2px; border-radius: 2px; background: var(--oc-trait); }
.formulaire__sommaire ol::after { background: var(--oc-crayon); transform-origin: top; transform: scaleY(var(--progression, 0)); transition: transform 420ms var(--ease-out); }
.formulaire__sommaire button { width: 100%; text-align: left; border: 0; border-radius: 10px; padding: .5rem .75rem; background: transparent; color: var(--c-doux); white-space: normal; }
.formulaire__sommaire button[aria-current="step"] { background: var(--oc-zone); color: var(--c-texte); border: 0; }
@media (hover: hover) and (pointer: fine) { .formulaire__sommaire button:hover { color: var(--c-texte); } }
/* La feuille : progression, réponses gardées, questions et boutons sur une surface blanche */
.formulaire--sommaire > :not(.formulaire__sommaire):not(.piege) { background: var(--c-surface); padding-inline: clamp(1.5rem, 4vw, 3rem); }
.formulaire--sommaire > .formulaire__message { border-radius: var(--r-feuille) var(--r-feuille) 0 0; padding-block: 1rem; }
.formulaire--sommaire > .formulaire__progression { border-radius: var(--r-feuille) var(--r-feuille) 0 0; padding-top: clamp(1.5rem, 4vw, 3rem); }
.formulaire--sommaire > .formulaire__message:not([hidden]) + .formulaire__progression { border-radius: 0; }
.formulaire--sommaire > .formulaire__actions { border-radius: 0 0 var(--r-feuille) var(--r-feuille); padding-block: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.formulaire--sommaire > .formulaire__mention { border-radius: 0 0 var(--r-feuille) var(--r-feuille); }
.formulaire--sommaire > .formulaire__etape { padding-block: 1.25rem; }
.formulaire--sommaire { filter: drop-shadow(0 18px 30px rgb(75 23 111 / .10)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .formulaire--sommaire { filter: none; } }
.formulaire__progression { font-weight: 600; font-size: .875rem; }
.formulaire__progression progress { display: none; }
.formulaire__garde { padding-bottom: .5rem; }
.formulaire__titre { font-family: var(--police-titres); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.1; margin: 0; font-weight: 400; }
.formulaire .riche { color: var(--c-doux); max-width: 58ch; }
.formulaire .champ label, .formulaire .champ > fieldset > legend { font-weight: 600; font-size: 1.0625rem; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea, .formulaire select { width: 100%; min-height: 50px; padding: .7rem .95rem; border: 1.5px solid var(--oc-trait); border-radius: var(--r-champ); background: var(--c-fond); color: var(--c-texte); font: inherit; transition: border-color 160ms ease; }
.formulaire textarea { min-height: 104px; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--oc-violet-16); }
.formulaire ::placeholder { color: color-mix(in srgb, var(--c-doux) 85%, var(--c-fond)); }
.formulaire .champ--choix fieldset, .formulaire .champ--cases fieldset { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0; }
.formulaire .champ--choix legend, .formulaire .champ--cases legend, .formulaire .champ--outils legend { width: 100%; margin-bottom: .5rem; }
.formulaire .champ--choix .champ__aide, .formulaire .champ--cases .champ__aide { width: 100%; }
.formulaire .champ--choix .case, .formulaire .champ--cases .case { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .5rem .95rem .5rem .75rem; border: 1.5px solid var(--oc-trait); border-radius: 999px; background: var(--c-fond); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.formulaire .case:active { transform: scale(.97); }
.formulaire .case input { accent-color: var(--c-primaire); margin: 0; }
.formulaire .champ--choix .case:has(input:checked), .formulaire .champ--cases .case:has(input:checked) { border-color: var(--c-primaire); background: var(--oc-zone); }
.formulaire .case:has(input:focus-visible) { outline: 3px solid var(--oc-crayon); outline-offset: 2px; }
.formulaire .champ__aide { font-size: .9rem; color: var(--c-doux); margin: -.15rem 0 .4rem; max-width: 60ch; }
.formulaire .outil { border: 1.5px solid var(--oc-trait); border-radius: var(--r-champ); background: var(--c-fond); }
.formulaire .outil:has(input:checked) { border-color: var(--c-primaire); background: var(--oc-zone); }
.formulaire .outil select { min-height: 42px; padding: .35rem .7rem; font-size: .9rem; }
.formulaire .champ__nsp { border-color: var(--oc-trait); }
.formulaire .champ__nsp[aria-pressed="true"] { border-color: var(--oc-or-texte); color: var(--oc-or-texte); background: var(--oc-or-voile); }
.formulaire__actions { border-top: 1px solid var(--oc-trait); }
.formulaire__actions [data-suivant], .formulaire__actions [type="submit"] { margin-left: auto; }
.formulaire__recap dt { color: var(--c-doux); }
.formulaire__message { background: var(--oc-zone); }

/* ----- L'app : le bloc « Installer l'app » du cœur ----- */
.installer-app .section-titre h2 { font-family: var(--police-titres); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
.installer-app__vous { font-size: 1.125rem; }
.installer-app__appareil { border: 0; border-radius: var(--r-carte); background: var(--oc-zone); padding: 1.5rem; }
.installer-app__appareil.est-vous { box-shadow: none; background: var(--c-surface); outline: 1.5px solid var(--c-primaire); }
.installer-app__nom { font-family: var(--police-titres); font-weight: 400; font-size: 1.5rem; }
.installer-app__autres .installer-app__appareil { background: var(--c-surface); outline: 1px solid var(--oc-trait); }
.installer-app__note { max-width: 60ch; }

/* ----- Textes des pages légales et blocs texte du cœur ----- */
.bloc--texte h2 { font-family: var(--police-titres); font-size: clamp(1.45rem, 1.2rem + .7vw, 1.8rem); margin-top: 2rem; }
.bloc--texte .riche h2:first-child { margin-top: 0; }
.bloc--appel .boutons { margin-top: 1.25rem; }

/* ----- Téléphone ----- */
@media (max-width: 900px) {
  .oc-fonctions { grid-template-columns: minmax(0, 1fr); }
  .oc-sommaire { position: sticky; top: 64px; z-index: 5; margin-inline: -1rem; padding: .5rem 1rem; background: var(--c-fond); border-bottom: 1px solid var(--oc-trait); }
  .oc-sommaire ol { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .oc-sommaire a { white-space: nowrap; border: 1px solid var(--oc-trait); border-radius: 999px; padding: .45rem .9rem; }
  .oc-points ul { grid-template-columns: minmax(0, 1fr); }
  .formulaire--sommaire { grid-template-columns: minmax(0, 1fr); }
  .formulaire--sommaire > *, .formulaire--sommaire > .formulaire__sommaire { grid-column: 1; grid-row: auto; position: static; }
  .formulaire__sommaire ol { display: flex; overflow-x: auto; padding: 0 0 .9rem; gap: .35rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .formulaire__sommaire ol::before, .formulaire__sommaire ol::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; }
  .formulaire__sommaire ol::after { transform-origin: left; transform: scaleX(var(--progression, 0)); }
  .formulaire__sommaire button { white-space: nowrap; width: auto; }
  .formulaire--sommaire > .formulaire__sommaire { margin-bottom: 1rem; }
}

/* ----- Retours de la critique (Impeccable, 13/10/2026) ----- */
.oc-points, .oc-groupe .riche { max-width: none; }
.formulaire .champ__nsp { font-size: .875rem; }
.formulaire .case input:focus-visible { outline: none; } /* l'anneau d'or est sur l'étiquette entière */
.bloc--texte_image .media img { border-radius: var(--r-carte); box-shadow: var(--oc-ombre); }
@media (max-width: 900px) {
  .oc-onglets { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .formulaire--sommaire > .formulaire__sommaire { scroll-margin-top: 80px; }
}