/* =====================================================================
SONNALY — feuille de style unique « Ligne claire »
Ordre du fichier :
1. Jetons · 2. Base et typographie · 3. Mise en page et rythme
4. Boutons · 5. Liens · 6. En-tête · 7. Pied
8. Hero et carte d'appel · 9. Cartes, encart, listes · 10. Métiers
11. Messages, états, étapes · 12. Formulaires · 13. Récapitulatif
14. Questions · 15. Tarifs et simulateur · 16. Bandeau final
17. Barre mobile · 18. Fenêtre cookies · 19. Comptes et paiement
20. Fil d'Ariane · 21. Pages légales · 22. Administration
23. Apparition au défilement · 24. Attribut hidden · 25. Mouvement réduit
Les règles mobiles vivent à côté de chaque composant.
===================================================================== */
/* ============ 1. JETONS ============ */
:root{
/* fonds et surfaces */
--ground:#F6EFEE;
--ground-2:#F3EAEA; /* éclairci : le bandeau « On a raccroché » était trop sourd */
--surface:#FFFFFF;
--surface-2:#FDF9F9;
/* encres */
--ink:#2A0817;
--accent-deep:#4E1030;
--muted:#6A5460;
/* accent */
--accent:#B5304A;
--accent-soft:#F7E9EC;
/* filets */
--line:#EBDDE0;
--line-strong:#DCC7CD;
--line-champ:#9E8790;
/* sémantiques */
--ok:#23664A;
--ok-soft:#E4F1EA;
--warn:#7E5610;
--warn-soft:#F6EEDD;
--info:#2E5F86;
--info-soft:#E5EEF5;
/* dégradé unique */
--grad:linear-gradient(102deg,var(--accent-deep) 4%,var(--accent) 96%);
/* ombres */
--shadow:0 1px 2px rgba(42,8,23,.05), 0 12px 32px -18px rgba(42,8,23,.22);
--shadow-lg:0 2px 4px rgba(42,8,23,.05), 0 32px 60px -30px rgba(42,8,23,.34);
--ombre-btn:0 8px 20px -14px rgba(78,16,48,.45);
/* rayons */
--r-lg:14px;
--r:10px;
--r-sm:6px;
--pilule:999px;
/* espacements */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
/* grille */
--maxw:1160px;
--nav-h:70px;
/* typographie */
--fs-display:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);
--fs-page:clamp(1.875rem,1.4rem + 1.6vw,2.75rem);
--fs-carte:clamp(1.625rem,1.3rem + 1vw,2.25rem);
--fs-h2:clamp(1.625rem,1.3rem + 1.1vw,2.125rem);
--fs-h3:clamp(1.0625rem,1rem + .2vw,1.125rem);
--fs-lede:clamp(1.0625rem,1rem + .35vw,1.1875rem);
--fs-body:clamp(.9375rem,.9rem + .2vw,1rem);
--fs-small:.875rem;
--fs-label:.75rem;
--fs-data:.8125rem;
--fs-prix:clamp(2.5rem,2rem + 1.5vw,3.5rem);
--icon-stroke:1.8;
--f-display:"Sora","Trebuchet MS",system-ui,sans-serif;
--f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
--f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}
/* Sur téléphone, les deux plus petits crans descendent d'un demi-point :
13,5 px et 12,5 px, jamais moins. */
@media (max-width:640px){
/* Plancher de lecture : 14 px. Les deux plus petits crans descendaient à
13,5 et 12,5 px, sous le seuil où un texte courant reste confortable. */
:root{--fs-small:.875rem;--fs-data:.8125rem;--nav-h:58px}
}
/* Fond clair assumé : une seule identité visuelle, sur tous les appareils. */
/* ============ 2. BASE ET TYPOGRAPHIE ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html[data-cta-bas="1"]{scroll-padding-bottom:90px}
@media (max-width:640px){html{scroll-padding-top:62px}}
body{
margin:0;
background:var(--ground);
color:var(--ink);
font-family:var(--f-body);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:var(--fs-page);line-height:1.08;letter-spacing:-.028em}
h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.024em}
h3,h4{font-size:var(--fs-h3);font-weight:600;line-height:1.35;letter-spacing:-.012em}
p{margin:0}
/* Pas de justification : sans césure fiable en français, le navigateur
étire les espaces et creuse des « rivières » blanches dans le texte.
On garde le drapeau à droite et on évite seulement les lignes veuves. */
/* Équilibrage des lignes : « balance » répartit le texte sur des lignes de
largeur voisine au lieu de laisser un ou deux mots seuls en bas du bloc.
Les navigateurs l’ignorent au-delà de quelques lignes, donc les longs
paragraphes juridiques retombent sur le rendu normal. */
p,li,figcaption,summary,label{text-wrap:balance}
/* Mais pas sur téléphone. « balance » égalise la longueur des lignes : sur une
colonne large c'est ce qu'on veut, sur 340 px il raccourcit la première
ligne pour la faire ressembler à la seconde et coupe la phrase bien avant la
marge. Mesuré sur l'accueil à 375 px : 75,9 % de la largeur occupée contre
88,9 % avec « pretty », qui remplit la ligne tout en évitant le mot seul en
bas de bloc. Les titres, eux, gardent l'équilibrage : ils sont courts et
c'est leur forme qui compte. */
@media (max-width:640px){
p,li,figcaption,summary,label,
p.lignes > span,li.lignes > span{text-wrap:pretty}
}
/* Les pages juridiques ont de longs paragraphes que « balance » abandonne
au-delà de quelques lignes : on y garde « pretty », qui évite au moins le
mot seul en dernière ligne. */
.legal p,.legal li{text-wrap:pretty}
/* Un
coupe le bloc en segments, mais « balance » raisonne sur le bloc
entier : la phrase qui suit le
peut donc se terminer sur un mot seul.
On donne à chaque phrase sa propre boîte pour qu’elle s’équilibre seule. */
.lignes > span{display:block;text-wrap:balance}
/* Aucune propriété CSS n’empêche une coupure sur le trait d’union : les mots
composés des textes vitrine sont donc rendus insécables au cas par cas. */
.insec{white-space:nowrap}
/* Une ligne qui doit tenir d’un seul tenant quelle que soit la largeur :
la police suit la place disponible plutôt que de laisser la phrase
passer à la ligne. Le diviseur est la largeur du texte en ems, mesurée. */
.tenir{
--tenir-largeur:25.8; /* largeur du texte en em, mesurée */
white-space:nowrap;font-size:min(1em,calc((100vw - 40px) / var(--tenir-largeur)));
}
/* Le chapeau de la page tarifs : plus court en em, donc son propre diviseur.
Sans cela, la ligne se coupait entre « 840 € » et « HT / an », séparant le
montant de son unité. */
.tenir--prix{--tenir-largeur:22.4}
/* Coupure choisie, valable seulement sur grand écran : sur téléphone la
phrase reprend son découpage naturel. */
.ligne-ordi{display:block}
@media (max-width:640px){.ligne-ordi{display:inline}}
/* L'inverse : la coupure n'existe que sur téléphone. Sur écran large, la
phrase reprend sa suite sur la même ligne. */
.ligne-tel{display:inline}
@media (max-width:640px){.ligne-tel{display:block}}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code{
font-family:var(--f-mono);font-size:var(--fs-data);background:var(--accent-soft);
border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.1em .4em;
}
/* Lien d'évitement : invisible jusqu'au premier Tab, puis affiché en haut. */
.evite{position:absolute;left:12px;top:-60px;z-index:1200;background:var(--surface);color:var(--accent);
padding:10px 14px;border-radius:var(--r);box-shadow:var(--shadow-lg);font-weight:500;text-decoration:none}
.evite:focus{top:12px;outline:2px solid var(--accent);outline-offset:2px}
/* Étiquette : mono, capitales, 12 px partout, 24 caractères au plus. */
.lab{
font:500 var(--fs-label)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
color:var(--muted);display:block;margin:0;
}
.lab--accent{color:var(--accent)}
/* Une étiquette n'est jamais collée à la liste ou au récapitulatif qu'elle
annonce : douze pixels, la même valeur que dans .shead. */
.lab + .etapes,.lab + .recap{margin-top:12px}
/* Donnée : chiffres alignés, mono, 13 px. */
.data{font-family:var(--f-mono);font-size:var(--fs-data);font-variant-numeric:tabular-nums}
.titre-page{font-size:var(--fs-page);line-height:1.08;letter-spacing:-.028em;margin-bottom:16px}
.titre-carte{font-size:var(--fs-carte);line-height:1.1;letter-spacing:-.024em;margin-bottom:8px}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--accent-deep);max-width:60ch}
.note{font-size:var(--fs-small);color:var(--muted);line-height:1.55;margin-top:12px}
.note--contrat{color:var(--accent-deep)}
.note--filet{padding-top:12px;border-top:1px solid var(--line)}
.note a{color:inherit}
/* ============ 3. MISE EN PAGE ET RYTHME ============ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 18px}}
/* Deux rythmes seulement. Les valeurs sont resserrées d'un cran par rapport
au premier jet : c'est le seul moyen d'approcher les hauteurs cibles sans
retirer un bloc de contenu. */
.section{padding:clamp(48px,5.5vw,72px) 0}
.section--serre{padding:clamp(32px,3.8vw,48px) 0}
@media (max-width:640px){
/* Un peu d'air : sur téléphone les sections respiraient moins que le texte
qu'elles portent. Dix pixels de plus en haut et en bas suffisent à poser
la respiration sans allonger la page de façon sensible. */
.section{padding:44px 0}
.section--serre{padding:32px 0}
}
/* Alternance des fonds : c'est elle qui sépare les sections, plus aucun filet. */
.fond-ground{background:var(--ground)}
.fond-surface{background:var(--surface)}
.fond-ground-2{background:var(--ground-2)}
/* Les fonds alternent d'une section à l'autre. Un bord net faisait une ligne
en travers de la page ; chaque section part donc de la couleur de celle du
dessus et atteint la sienne au bout de 170 px. Le sélecteur « + » lit
l'enchaînement réel des sections, si bien que la même règle vaut pour
l'accueil, les pages métier et la page tarifs, dont l'ordre diffère.
Le dégradé occupe toute la hauteur de la section : il part de la couleur
précédente tout en haut et n'atteint la sienne qu'en bas, si bien qu'aucune
transition ne tombe au milieu d'un titre. Bout à bout, les sections
composent un seul écoulement continu du haut de la page jusqu'en bas.
Le hero n'a pas de classe de fond : il garde sa couleur pleine. */
.fond-surface{background-image:linear-gradient(to bottom,var(--ground) 0,var(--surface) 100%)}
.fond-ground-2 + .fond-surface{background-image:linear-gradient(to bottom,var(--ground-2) 0,var(--surface) 100%)}
.fond-ground-2{background-image:linear-gradient(to bottom,var(--surface) 0,var(--ground-2) 100%)}
.fond-ground{background-image:linear-gradient(to bottom,var(--surface) 0,var(--ground) 100%)}
.fond-ground-2 + .fond-ground{background-image:linear-gradient(to bottom,var(--ground-2) 0,var(--ground) 100%)}
.fond-ground-2 + .section--serre{background-image:linear-gradient(to bottom,var(--ground-2) 0,var(--ground) 100%)}
.shead{max-width:64ch;margin-bottom:28px}
.shead .lab{margin-bottom:12px}
.shead h2{margin-bottom:12px}
@media (max-width:640px){.shead{margin-bottom:26px}}
/* Grille « en-tête à gauche, contenu à droite » des sections Questions.
L'en-tête n'a pas de marge basse : sur ordinateur il est dans sa propre
colonne, sur téléphone c'est la gouttière de la grille qui l'espace. */
.grille-4-8{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.grille-4-8 .shead{margin-bottom:0}
@media (min-width:1080px){
.grille-4-8{grid-template-columns:4fr 8fr;gap:var(--s7);align-items:start}
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr;gap:var(--s3)}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:560px){.row2{grid-template-columns:1fr;gap:0}}
/* ============ 4. BOUTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
border-radius:var(--r);padding:13px 22px;min-height:48px;
font:500 1rem/1.2 var(--f-body);border:1px solid transparent;
text-decoration:none;cursor:pointer;
transition:transform .16s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--ombre-btn)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Sur le bandeau bordeaux : le blanc est la seule couleur possible. */
.btn--inverse{background:#fff;border-color:#fff;color:var(--accent-deep)}
.btn--inverse:hover{background:rgba(255,255,255,.9);color:var(--accent-deep);border-color:#fff}
.btn--sm{padding:9px 15px;min-height:44px;font-size:.9375rem}
.btn--block{width:100%}
/* Connexion avec Google : bouton blanc, logo officiel, jamais en dégradé. */
.btn--google{
width:100%;gap:12px;background:#fff;color:var(--ink);
border:1px solid var(--line-strong);box-shadow:var(--shadow);
}
.btn--google:hover{background:#fff;border-color:var(--accent-deep);transform:none}
.btn--google svg{width:20px;height:20px;flex:0 0 auto}
.btn--lecture{width:auto}
/* Le bouton « Régler » est dans cet état à chaque arrivée sur /paiement,
tant que la case des CGV n'est pas cochée : c'est donc l'état qu'on voit en
premier. L'opacité globale faisait tomber le contraste à 2,6:1 — illisible
au soleil comme pour un œil fatigué. Une palette propre à l'état inactif
remonte à 12:1 tout en restant manifestement éteinte. */
.btn[aria-disabled="true"]{
cursor:not-allowed;box-shadow:none;opacity:1;
background:var(--accent-soft);background-image:none;
color:var(--accent-deep);border-color:var(--line-strong);
}
/* Bouton d'appel : le combiné remplace la flèche, parce qu'on ne va pas sur une
page — on décroche. */
.btn--tel{gap:10px}
/* « flex:0 0 19px » et non « 0 0 auto » : Safari ne déduit pas la largeur d'un
SVG en ligne dans un conteneur flex, et l'écrase à zéro — l'icône disparaît
sans laisser de trace. Les dimensions sont aussi posées en attributs sur la
balise, comme sur les autres icônes du site. */
.btn__tel{
width:19px;height:19px;flex:0 0 19px;
fill:currentColor;stroke:none;
}
.btn--tel:hover .btn__tel{transform:none}
.btn__arrow{transition:transform .18s}
.btn:hover .btn__arrow{transform:translateX(3px)}
@media (max-width:640px){.btn:active{transform:scale(.985)}}
/* ============ 5. LIENS ============ */
.lien{
color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:.16em;
}
.lien:hover{text-decoration-thickness:2px}
button.lien{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.lien--discret{color:var(--muted)}
.lien--discret:hover{color:var(--accent)}
.lien--danger{color:var(--accent)}
.lien--fleche{
text-decoration:none;font-weight:500;color:var(--accent);
display:inline-flex;align-items:center;gap:6px;
}
.lien--fleche::after{content:"→";transition:transform .18s}
.lien--fleche:hover::after{transform:translateX(3px)}
/* Zone tactile de 44 px pour les liens isolés sur téléphone. */
@media (max-width:640px){
.lien,.lien--fleche{display:inline-block;padding:12px 0;margin:-10px 0}
.lien--fleche{display:inline-flex}
/* Un lien dans une phrase ne peut pas être un bloc de 44 px sans trouer le
paragraphe. On lui rend de la hauteur par l'interligne, ce qui épaissit
la cible sans déplacer le texte. */
.msg .lien,.legal__corps .lien,.faq .lien,.check .lien,.propos .lien,.relev .lien{
display:inline;padding:.35em 0;margin:0;
}
}
/* ============ 6. EN-TÊTE ============ */
.nav{
position:sticky;top:0;z-index:60;
background:color-mix(in srgb,var(--ground) 88%,transparent);
backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid transparent;transition:border-color .25s;
}
.nav[data-stuck="1"]{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo__mark{width:auto;height:36px;flex:none;display:block}
.logo__word{width:auto;height:18px;display:block}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav__link{
background:none;border:0;padding:6px 0;cursor:pointer;
font-family:var(--f-body);font-size:.9375rem;
color:var(--muted);text-decoration:none;position:relative;transition:color .18s;
}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink);font-weight:500}
.nav__link[aria-current="page"]::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;
}
.nav__link--tel{display:none}
.nav .btn--sm{box-shadow:none}
.nav__burger{
display:none;margin-left:auto;min-width:44px;min-height:44px;
place-items:center;padding:0;background:none;
border:1px solid var(--line-strong);border-radius:var(--r);cursor:pointer;line-height:0;
}
/* Les trois traits deviennent une croix quand le menu est ouvert. */
.nav__burger line{transition:transform .25s ease,opacity .2s ease;transform-origin:10px 7px}
.nav__burger[aria-expanded="true"] line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] line:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
.nav__links{
position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
background:var(--surface);border-bottom:1px solid var(--line);padding:10px 24px 20px;
margin-left:0;display:none;box-shadow:var(--shadow);
}
.nav__links[data-open="1"]{display:flex}
.nav__link{padding:14px 0;min-height:52px;border-bottom:1px solid var(--line);text-align:left}
.nav__link--tel{display:flex;gap:10px;align-items:center;min-height:52px}
.nav__link--tel svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav__links .btn{margin-top:14px;justify-content:center;min-height:48px}
.nav__burger{display:grid}
}
@media (max-width:640px){
.logo__mark{height:30px}
.logo__word{height:15px}
.nav__in{gap:16px}
/* Le logo est un lien : sa boîte doit faire 44 px comme les autres cibles. */
.nav .logo{min-height:44px}
}
/* En-tête des pages de compte : adresse et sortie, pas de menu. */
.nav--compte .nav__in{gap:16px}
.nav__compte{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__email{
font-size:var(--fs-small);color:var(--muted);max-width:26ch;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav__court{display:none}
/* Tunnel : la question en clair à côté du bouton, masquée quand la
largeur manque — le bouton se suffit alors à lui-même. */
.nav__deja{font-size:var(--fs-small);color:var(--muted)}
@media (max-width:560px){.nav__deja{display:none}}
@media (max-width:560px){
.nav__email{display:none}
.nav__long{display:none}
.nav__court{display:inline}
}
/* ============ 7. PIED ============ */
.foot{border-top:1px solid var(--line);background:var(--surface);padding:48px 0 32px}
.foot .logo{padding:2px 0}
.foot .logo__mark{height:42px}
.foot .logo__word{height:21px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
/* La phrase de présentation, et elle seule : une étiquette .lab garde ses
12 px mono et sa marge propre. */
.foot p:not(.lab){font-size:var(--fs-body);color:var(--muted);max-width:38ch;margin-top:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.foot ul a{
display:inline-block;padding:12px 0;margin:-8px 0;
font-size:var(--fs-body);color:var(--muted);text-decoration:none;
}
.foot ul a:hover{color:var(--accent)}
.foot .lab{margin-bottom:8px}
.foot__secteurs summary{list-style:none;cursor:default;margin-bottom:8px}
.foot__secteurs summary::-webkit-details-marker{display:none}
.foot__bot{
margin-top:32px;padding-top:18px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;
font-family:var(--f-body);font-size:var(--fs-small);color:var(--muted);
}
.foot__legal a{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.foot__legal a:hover{color:var(--accent)}
/* Pied court : pages de compte, paiement, mots de passe. */
.foot--court{padding:28px 0 24px}
.foot__court{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;justify-content:space-between}
.foot__court span{font-size:var(--fs-small);color:var(--muted)}
.foot--admin{padding-top:0}
.foot--admin .foot__bot{border-top:0;margin-top:0}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:640px){
.foot{padding:32px 0 24px}
/* Le logo prend toute la largeur ; « Pages » occupe la colonne de gauche
sur deux rangs, « Métiers » replié et « Nous joindre » se rangent dans la
colonne de droite. Plus aucune cellule vide étirée à 203 px. */
.foot__grid{grid-template-columns:1fr 1fr;gap:20px 16px}
.foot__grid > div:first-child{grid-column:1 / -1;grid-row:1}
.foot__grid > div:nth-child(2){grid-column:1;grid-row:2 / span 2}
.foot__secteurs{grid-column:2;grid-row:2;align-self:start}
.foot__grid > div:last-child{grid-column:2;grid-row:3;align-self:start}
/* Replié par app.js : le résumé devient un vrai bouton de 44 px, avec le
même chevron en disque que les questions. */
/* Alignée en haut de sa cellule : l'intitulé « Métiers » retrouve la ligne
de base de « Pages », la zone tapable garde ses 44 px. */
.foot__secteurs summary{
cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
min-height:44px;padding:0 0 12px;
}
.foot__secteurs summary::after{margin-top:-6px}
.foot__secteurs summary::after{
content:"";flex:none;width:28px;height:28px;border-radius:50%;
background-color:var(--accent-soft);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5304A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:14px 14px;
transition:transform .2s;
}
.foot__secteurs[open] summary::after{transform:rotate(180deg)}
.foot__bot{margin-top:20px;padding-top:14px;flex-direction:column}
/* Liens légaux et liens du pied court : 44 px de haut comme partout. */
.foot__legal a,.foot__legal button.lien,.foot__court span a{
display:inline-block;padding:12px 0;margin:-10px 0;
}
}
/* ============ 8. HERO ET CARTE D'APPEL ============ */
/* ============ 8. HAUT DE PAGE ============
Dessiné pour 375 px d'abord, l'ordinateur en dérive. L'ordre du document
EST l'ordre de lecture sur téléphone : ce qu'on dit, la preuve, puis ce
qu'on demande. Au-dessus de 980 px, une grille nommée place la fiche à
droite sur deux rangées — sans jamais toucher à `order`, qui dissocierait
l'ordre visuel de l'ordre au clavier.
============================================================ */
.hero{padding:clamp(18px,3vw,44px) 0 clamp(40px,5vw,72px);position:relative}
.hero__grid{display:grid;gap:clamp(22px,3.4vw,30px);align-items:start}
.hero h1{
font-size:clamp(2.375rem,1.9rem + 2.1vw,4rem);line-height:1.14;
letter-spacing:-.035em;margin:6px 0 16px;text-wrap:balance;
}
/* Les deux phrases du titre sont des blocs : on les sépare légèrement,
sans écarter les lignes d’une même phrase. */
.hero h1.lignes > span + span{margin-top:.16em}
.hero .lede{max-width:34ch;margin:0}
.hero__agir{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero__agir .btn{width:100%;justify-content:center}
.hero__rassure{
font:400 var(--fs-label)/1.5 var(--f-mono);letter-spacing:.04em;
color:var(--muted);margin:0;
}
@media (min-width:980px){
/* La fiche d'appel est bien plus haute que le texte : avec les deux blocs
collés en haut, il restait près de 400 px de vide sous la ligne de
réassurance. Deux rangées souples encadrent le texte et le centrent en
face de la fiche — le vide se partage au lieu de tomber d'un seul côté. */
.hero__grid{
grid-template-columns:1.02fr .98fr;
grid-template-areas:". fiche" "dire fiche" "agir fiche" ". fiche";
grid-template-rows:minmax(0,.72fr) auto auto minmax(0,1.28fr);
column-gap:clamp(40px,5vw,72px);row-gap:0;
}
.hero__dire{grid-area:dire}
.hero__agir{grid-area:agir;align-self:start;margin-top:clamp(26px,3vw,36px)}
/* C'est .fiche-zone qui est l'enfant de la grille depuis qu'elle enveloppe
la fiche pour porter l'hôtesse. Viser .fiche seule laissait la tuile
s'auto-placer en rangée 1, et le bouton tombait dessous. */
.hero .fiche-zone,.hero__grid > .fiche{grid-area:fiche}
.hero__agir .btn{width:auto}
}
/* Le voyant de ligne : neuf pixels, et la seule animation qui boucle sur
toute la page — parce qu'un voyant de ligne clignote pour de vrai. */
.pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:.5;animation:ring 2s ease-out infinite}
@keyframes ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.3);opacity:0}}
/* ============ 8 bis. LA FICHE D'APPEL ============
Un appel qui se déroule, horodaté. C'est elle qui porte les trois
arguments — la voix, le délai, l'apprentissage — sans qu'aucun ne soit
écrit en étiquette : on les voit se produire.
============================================================ */
.fiche{
padding:0;overflow:hidden;overflow-anchor:none;
background:var(--surface);box-shadow:var(--shadow-lg);
}
.fiche__bandeau{
display:flex;align-items:center;gap:10px;padding:13px 16px;
border-bottom:1px solid var(--line);background:var(--surface-2);
}
.fiche__etat{flex:none}
.fiche__num{margin-left:auto;color:var(--muted)}
.fiche__chrono{color:var(--ink);font-variant-numeric:tabular-nums}
/* Un filet vertical très clair sépare les trois informations du bandeau :
l'état de l'appel, le numéro, la durée. Il est porté par l'élément lui-même
plutôt que par un pseudo-élément : il se centre alors tout seul sur la
hauteur du texte, et il ne prend aucune place dans la ligne — un pseudo
inséré dans le numéro le faisait passer sur deux lignes. */
.fiche__num,.fiche__chrono{border-left:1px solid var(--line);padding-left:10px}
.fiche__num{white-space:nowrap}
.fiche__ctl{
width:44px;height:44px;margin:-8px -6px -8px 0;display:grid;place-items:center;
border:0;background:none;color:var(--accent-deep);cursor:pointer;border-radius:var(--r);
}
.fiche__ctl svg{pointer-events:none}
.wave{display:block;width:100%;height:42px;background:var(--surface)}
.fiche__corps{padding:8px 16px 14px;overflow-anchor:none;scroll-behavior:smooth}
.turn{
display:grid;grid-template-columns:44px 1fr;gap:11px;padding:7px 0;
opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.turn[data-in="1"]{opacity:1;transform:none}
/* Sans JavaScript, rien ne dévoile : la conversation doit être lisible telle quelle. */
html:not(.js) .turn{opacity:1;transform:none}
.turn__t{color:var(--muted);padding-top:3px;font-size:var(--fs-label)}
.turn__who{
letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
display:block;margin-bottom:2px;font-weight:500;font-size:var(--fs-label);
}
.turn--ai .turn__who{color:var(--accent)}
.turn__txt{font-size:.9375rem;line-height:1.5;color:var(--ink)}
.act{
display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
background:var(--ok-soft);color:var(--ok);border-radius:var(--pilule);padding:3px 10px;
font:500 var(--fs-label)/1.2 var(--f-mono);margin:3px 5px 0 0;
}
/* Le bord détachable. Dessiné en CSS, deux encoches comprises : c'est la
signature du site, et elle ne sert qu'à une chose — quelque chose se
détache et vous revient. */
.perfo{
position:relative;height:1px;margin:2px 0 0;
background:repeating-linear-gradient(to right,var(--line-strong) 0 4px,transparent 4px 8px);
}
.perfo::before,.perfo::after{
content:"";position:absolute;top:-5px;width:10px;height:10px;border-radius:50%;
background:var(--ground);
}
/* Sur une section blanche, l'encoche doit être blanche : sinon elle se voit
comme deux points colorés depuis que le fond de page est plus foncé. */
.fond-surface .perfo::before,.fond-surface .perfo::after{background:var(--surface)}
.perfo::before{left:-5px}
.perfo::after{right:-5px}
.fiche__talon{
display:flex;flex-direction:column;gap:3px;margin:0;
padding:12px 16px 14px;background:var(--surface-2);
}
.fiche__talon-lab{
font:500 var(--fs-label)/1.2 var(--f-mono);letter-spacing:.1em;
text-transform:uppercase;color:var(--accent);
}
.fiche__talon-txt{font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
@media (max-width:540px){
.fiche__num{display:none}
.fiche__chrono{margin-left:auto}
/* Le numéro disparaît : il ne reste que deux informations, séparées par
l'espace. Un filet collé à la durée, après ce grand vide, n'aurait plus
rien à séparer. */
.fiche__chrono{border-left:0;padding-left:0}
}
@media (max-width:640px){
.fiche__bandeau{padding:11px 13px}
.wave{height:34px}
.turn{grid-template-columns:38px 1fr;gap:9px;padding:6px 0}
.fiche__talon{padding:11px 13px 12px}
.fiche__corps{padding:6px 13px 10px}
}
/* Bornée seulement quand l'appel se joue : la conversation défile d'elle-même
au rythme des répliques, la plus ancienne se fond vers le haut, et le bouton
reste dans le premier écran. Dès que rien ne bouge — mouvement réduit, ou
JavaScript absent — la borne saute et tout se lit d'un bloc : on ne cache
jamais du texte que personne ne pourra faire défiler. */
@media (prefers-reduced-motion:no-preference){
html.js .fiche__corps{
max-height:300px;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
html.js .fiche__corps{max-height:176px}
}
@media (prefers-reduced-motion:reduce){
.turn{transition:none}
.pulse::after{animation:none}
}
/* ============ 9. CARTES, ENCART, LISTES ============ */
.carte,.card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:24px;
transition:border-color .22s,transform .22s,box-shadow .22s;
}
a.carte:hover,.carte--survol:hover,.card:hover{
border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px);
}
.carte--relief{border-color:var(--line-strong);box-shadow:var(--shadow);padding:32px 28px}
.carte--fond{background:var(--surface-2);border-color:var(--line);box-shadow:none}
/* Dans une carte, une étiquette respire : dix pixels sous elle, et vingt-quatre
au-dessus quand elle suit une note (colonne de rappel de creer-compte). */
.carte > .lab{margin-bottom:10px}
.note + .lab{margin-top:24px}
.carte--plain{background:none;border:0;border-radius:0;border-top:2px solid var(--accent);padding:20px 0 0;box-shadow:none}
.carte--plain:hover{transform:none;box-shadow:none;border-color:var(--accent)}
.carte__num{
display:block;margin-bottom:12px;
font:700 1.75rem/1 var(--f-display);letter-spacing:-.024em;color:var(--accent);
}
.card__ico{
width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent);margin-bottom:18px;
}
.card__ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
@media (max-width:640px){
.carte{padding:20px}
.carte--relief{padding:22px 18px}
a.carte:hover,.carte--survol:hover,.card:hover{transform:none;box-shadow:none}
.carte:active,.carte--survol:active{background:var(--surface-2)}
}
/* La fiche d'appel porte aussi .carte, déclarée plus bas qu'elle : à
spécificité égale c'était le remplissage de la carte qui gagnait, et le
bandeau d'état ne touchait plus les bords de la tuile. Deux classes dans
le sélecteur suffisent à rétablir l'intention, sans déplacer de bloc. */
.carte.fiche{padding:0}
/* Encart : une phrase et une action, jamais de bouton plein. */
.encart{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:16px 32px;padding:18px 22px;border-radius:var(--r);
}
.encart p{max-width:62ch}
/* Sans cette marge, l'encart se lit comme une septième capacité soudée à la
grille : quatorze pixels seulement le séparaient des cartes. */
.capas + .encart{margin-top:24px}
.price + .encart{margin-top:22px}
/* Sur téléphone, la question et la réponse méritent chacune leur ligne ;
sur grand écran elles tiennent sur la même, à côté du bouton. */
/* La question et la réponse ne se lisent pas d'une traite : chacune sa ligne,
sur téléphone comme sur ordinateur. */
.sur-ligne{display:block}
/* Dans une carte, l'encart collait à la dernière étape : zéro pixel entre
le texte du point 3 et le bord de la boîte, qui semblait le recouvrir. */
.etapes + .encart{margin-top:18px}
@media (max-width:640px){.encart{flex-direction:column;align-items:flex-start}}
/* Les six capacités. */
.capas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.capas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
/* Icône et titre côte à côte : une ligne de 76 px au lieu d'une carte. */
.capas{grid-template-columns:1fr;gap:0}
.capa{
display:grid;grid-template-columns:34px 1fr;column-gap:12px;row-gap:2px;
padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;
}
/* Le dernier n'a pas de filet : il en suivait un autre à 24 px. */
.capa:last-child{border-bottom:0}
.capa .card__ico{width:34px;height:34px;grid-row:1/3;margin:0;border-radius:var(--r-sm)}
.capa .card__ico svg{width:17px;height:17px}
.capa h3{font-size:var(--fs-h3);margin:0;align-self:center}
.capa p{font-size:var(--fs-small);color:var(--muted)}
}
/* Listes à coches. */
.coche{list-style:none;margin:0;padding:0}
.coche li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.coche svg{width:14px;height:14px;margin-top:5px;stroke:var(--accent);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.coche strong{font-weight:600;display:block}
.coche span{display:block;color:var(--muted);font-size:var(--fs-small)}
.coche--serree li{padding:6px 0;border:0}
.coche--grille{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
@media (max-width:900px){.coche--grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.coche--grille{grid-template-columns:1fr}}
@media (min-width:900px){.coche--2col{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}}
/* ============ 10. MÉTIERS : LIGNES TAPABLES ============ */
.secteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:1080px){.secteurs{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.secteurs{grid-template-columns:1fr;gap:8px}}
.secteur{
display:grid;grid-template-columns:1fr 14px;column-gap:14px;row-gap:2px;align-items:center;
padding:14px 18px;min-height:64px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
transition:border-color .2s,transform .2s;
}
.secteur strong{font:600 var(--fs-h3)/1.3 var(--f-display);letter-spacing:-.012em;color:var(--ink)}
.secteur span{font-size:var(--fs-small);color:var(--muted);line-height:1.45}
.secteur__chevron{
grid-column:2;grid-row:1/3;width:9px;height:9px;justify-self:center;
border-top:1.8px solid var(--accent);border-right:1.8px solid var(--accent);transform:rotate(45deg);
}
.secteur:hover{border-color:var(--accent);transform:translateX(2px)}
.secteur:active{background:var(--surface-2)}
.secteur--autre{background:var(--surface-2)}
@media (max-width:640px){
.secteur:hover{transform:none}
.secteur{padding:12px 16px;min-height:56px}
}
/* ============ 11. MESSAGES, ÉTATS, ÉTAPES ============ */
.msg{
padding:12px 14px;border-radius:var(--r);font-size:var(--fs-small);line-height:1.5;
border:1px solid currentColor;max-width:70ch;margin:0 0 16px;
}
.msg a{color:inherit;text-decoration:underline}
/* Le lien est un bloc : la puce reste alignée sur sa première ligne, même
quand le message passe sur deux lignes. Marges négatives : la zone
tactile grandit sans écarter les lignes. */
.msg__liste{margin:8px 0 0;padding-left:1.15em}
.msg__liste li{margin-top:8px}
.msg__liste a{display:block;padding:7px 0;margin:-7px 0}
.msg--erreur{color:var(--accent);background:var(--accent-soft)}
.msg--ok{color:var(--ok);background:var(--ok-soft)}
.msg--attention{color:var(--warn);background:var(--warn-soft)}
.msg--info{color:var(--info);background:var(--info-soft)}
/* Badge d'état : le texte porte l'information, jamais la couleur seule. */
.etat{
display:inline-flex;align-items:center;gap:6px;
font:500 var(--fs-small)/1.2 var(--f-body);padding:3px 9px;
border-radius:var(--r-sm);white-space:nowrap;
}
.etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.etat--attente{color:var(--warn);background:var(--warn-soft)}
.etat--verif{color:var(--accent-deep);background:var(--surface-2);border:1px solid var(--line-strong)}
.etat--ok{color:var(--ok);background:var(--ok-soft)}
.etat--off{color:var(--muted);background:var(--ground-2)}
.etat--neutre{color:var(--accent-deep);background:var(--surface-2);border:1px solid var(--line)}
.etat--neutre::before{content:none}
.etapes{counter-reset:e;list-style:none;margin:0;padding:0}
.etapes li{counter-increment:e;position:relative;padding-left:36px;margin-bottom:12px;line-height:1.55}
.etapes li:last-child{margin-bottom:0}
.etapes li::before{
content:counter(e);position:absolute;left:0;top:.05em;width:24px;height:24px;
display:grid;place-items:center;border-radius:50%;
font:600 var(--fs-label)/1 var(--f-mono);color:var(--accent);
background:var(--accent-soft);border:1px solid var(--line-strong);
}
.etapes .est-fait{color:var(--muted)}
.etapes .est-fait::before{content:"\2713";color:#fff;background:var(--ok);border-color:var(--ok)}
.etapes .est-actif::before{color:#fff;background:var(--accent);border-color:var(--accent)}
/* En trois colonnes seulement : la marge basse des items n'a plus de sens.
Sous 760 px les étapes restent empilées et gardent leur respiration. */
@media (min-width:760px){
.etapes--ligne{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.etapes--ligne li{margin-bottom:0}
}
.espace__regler{margin-top:18px}
/* Le parcours de mise en service, sur la page d'attente du client.
Classe à part : « .etapes » sert sur sept pages, et ses pastilles numérotées
ne convenaient pas ici — un chiffre dans un rond pour dire « payez » a
quelque chose d'administratif. On reprend le langage de la frise de
l'accueil : un trait, un point par jalon. Trois états, lisibles d'un coup :
vert plein pour ce qui est fait, bordeaux auréolé pour là où l'on en est,
contour vide pour ce qui vient. */
.parcours{list-style:none;margin:22px 0 0;padding:0 0 0 28px}
.parcours li{position:relative;padding:0 0 20px;line-height:1.6}
.parcours li:last-child{padding-bottom:0}
.parcours li::before{ /* le jalon */
content:"";position:absolute;left:-28px;top:6px;z-index:1;box-sizing:border-box;
width:13px;height:13px;border-radius:50%;
background:var(--surface);border:2px solid var(--line-strong);
}
.parcours li::after{ /* le trait vers le jalon suivant */
content:"";position:absolute;left:-22.5px;top:20px;bottom:-2px;width:2px;
background:var(--line-strong);border-radius:2px;
}
.parcours li:last-child::after{content:none}
.parcours__fait{color:var(--muted)}
/* « li » dans le sélecteur : sans lui, .parcours li::before serait plus
spécifique que ces deux règles et les jalons resteraient tous vides. */
.parcours li.parcours__fait::before{background:var(--ok);border-color:var(--ok)}
.parcours li.parcours__ici::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
/* Le trait déjà parcouru est vert, celui qui reste est gris : on voit d'un
coup d'œil où l'on en est sans lire. */
.parcours li.parcours__fait::after{background:var(--ok);opacity:.35}
.parcours b{font-weight:600;color:var(--ink)}
.parcours__fait b{color:var(--muted)}
/* L'état passait à la ligne tout seul sur téléphone, en laissant l'intitulé
orphelin : il reste sur la même ligne que lui. */
.parcours .etat{margin-left:6px;vertical-align:1px}
.espace__titre{font-size:clamp(1.5rem,1.15rem + 1.3vw,2rem);line-height:1.18}
.espace__formule{font-size:var(--fs-small);color:var(--muted);margin:10px 0 0}
/* La pastille d'état passe souvent à la ligne sur téléphone : un petit
décalage vertical vaut mieux qu'un tiret resté orphelin au-dessus. */
.etapes .etat{margin-top:2px}
.etapes--inverse{color:#fff}
.etapes--inverse strong{color:#fff}
.etapes--inverse li::before{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
/* ============ 12. FORMULAIRES ============ */
.formgrid{
display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:start;
grid-template-areas:"principal cote";
}
.formgrid > aside,.formgrid__aside{grid-area:cote}
.formgrid > :not(aside),.formgrid__form{grid-area:principal}
/* La colonne de droite est deux fois plus courte que le formulaire : elle
suit le défilement au lieu de laisser 600 px de vide. */
@media (min-width:900px){
.formgrid > aside,.formgrid__aside,.auth__deux > aside{
position:sticky;top:calc(var(--nav-h) + 20px);
}
}
@media (max-width:899px){
/* Sur téléphone la colonne de droite est écrite après le formulaire : on
arrive sur cette page pour écrire, pas pour lire ce qui suivra. */
.formgrid{grid-template-columns:1fr;grid-template-areas:none;gap:20px}
.formgrid > aside,.formgrid > :not(aside),.formgrid__aside,.formgrid__form{grid-area:auto}
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font:500 .9375rem/1.3 var(--f-body);color:var(--accent-deep);text-transform:none;letter-spacing:0}
.champ{
font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
border:1.5px solid var(--line-champ);border-radius:var(--r);
padding:12px 13px;min-height:52px;width:100%;transition:border-color .18s;
}
textarea.champ{min-height:96px;resize:vertical;line-height:1.55}
.champ[aria-invalid="true"],.field[data-err="1"] .champ{border-color:var(--accent)}
/* 16 px comme tous les champs : sous cette taille, iOS Safari zoome à la
prise de focus. L'interlettrage est rendu d'un cran pour compenser. */
.champ--mono{font-family:var(--f-mono);font-size:16px;letter-spacing:.04em}
.champ--court{width:9rem;min-height:44px;padding:8px 10px}
.field__fige{background:var(--accent-soft);color:var(--accent-deep);cursor:default}
.field__aide{font-size:var(--fs-small);color:var(--muted);line-height:1.5;margin:0}
.field__err{display:none;font-size:var(--fs-small);color:var(--accent);line-height:1.5;margin:0}
.field[data-err="1"] .field__err{display:block}
/* Mot de passe : le bouton « Afficher » se pose dans le champ. */
.field--mdp{position:relative}
.field--mdp .champ{padding-right:92px}
/* Posé sur le champ, pas au milieu du bloc : le libellé occupe 20 px et la
gouttière 6 px, le bouton de 44 px se centre dans le champ de 52 px. */
.champ__oeil{
position:absolute;right:6px;top:30px;
min-width:44px;min-height:44px;padding:0 10px;border:0;background:none;
font:400 .875rem/1 var(--f-body);color:var(--accent);cursor:pointer;border-radius:var(--r);
}
.check{display:grid;grid-template-columns:22px 1fr;gap:6px 12px;align-items:start;min-height:44px;margin:8px 0 16px}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent)}
.check label{font-size:.9375rem;color:var(--ink);line-height:1.5;padding-top:2px}
.check .field__err{grid-column:2}
.check[data-err="1"] .field__err{display:block}
/* Ces trois blocs posent un display : sans cette ligne, l'attribut hidden du
navigateur (spécificité égale, écrite plus haut) ne les masque plus.
Le filet général est en fin de feuille. */
.field[hidden],.check[hidden],.row2[hidden]{display:none}
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){
/* Surbrillance au toucher discrète, dans la couleur du site. */
a,button{-webkit-tap-highlight-color:rgba(181,48,74,.12)}
}
/* Cartes-radio : formule, objet du message. */
.choix{border:0;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choix legend{margin-bottom:10px}
.choix__carte{
position:relative;display:grid;gap:4px;min-height:64px;padding:14px 16px 14px 44px;
border:1.5px solid var(--line-champ);border-radius:var(--r);background:var(--surface);cursor:pointer;
}
.choix__carte input{position:absolute;left:14px;top:18px;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.choix__titre{font:600 var(--fs-h3)/1.3 var(--f-display);letter-spacing:-.012em}
.choix__prix{font-size:.9375rem;color:var(--ink)}
.choix__prix small{font-size:var(--fs-small);color:var(--muted)}
.choix__sous{font-size:var(--fs-small);color:var(--accent-deep)}
.choix__carte:has(:checked){border-color:var(--accent);background:var(--accent-soft)}
.choix__carte:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.choix--ligne{grid-template-columns:1fr;gap:8px}
.choix--ligne .choix__carte{min-height:48px;padding:12px 16px 12px 44px}
.choix--ligne .choix__titre{font:500 1rem/1.3 var(--f-body);letter-spacing:0}
@media (max-width:480px){.choix{grid-template-columns:1fr}}
/* Sélecteur segmenté. */
.seg{
display:inline-flex;width:100%;padding:4px;
border:1px solid var(--line-strong);border-radius:var(--pilule);background:var(--surface);
}
.seg__btn{
flex:1;min-height:48px;border:0;border-radius:var(--pilule);background:none;
font:500 .9375rem/1.2 var(--f-body);color:var(--muted);cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.seg__btn b{font-weight:600;color:inherit}
.seg__btn[aria-pressed="true"]{background:var(--accent-deep);color:#fff}
html:not(.js) .seg{display:none}
/* Le sélecteur des deux formules ne sert que lorsqu'une seule carte est
visible : au-delà de 760 px les deux cartes sont côte à côte. */
@media (min-width:760px){.seg--tarifs{display:none}}
/* ============ 13. RÉCAPITULATIF ============ */
.recap{margin:0}
.recap > div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.recap dt{color:var(--muted);font-size:.9375rem}
.recap dd{margin:0}
.montant{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.recap__total{border-bottom:0;padding-top:14px}
.recap__total dt{color:var(--ink);font:600 var(--fs-h3)/1.3 var(--f-display)}
.recap__total dd{font:700 1.75rem/1 var(--f-display);letter-spacing:-.024em}
.recap__note{margin-top:12px}
/* Bandeau de rappel de la formule, sur téléphone uniquement. */
.recap-compact{
display:none;font-size:var(--fs-small);color:var(--accent-deep);
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
padding:10px 14px;margin-bottom:16px;
}
@media (max-width:899px){.recap-compact{display:block}}
/* ============ 14. QUESTIONS ============ */
.faq{max-width:680px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:18px 0;
font:600 var(--fs-h3)/1.35 var(--f-display);letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;
background-color:var(--accent-soft);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5304A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:14px 14px;
transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{padding:0 44px 20px 0;max-width:70ch;color:var(--ink)}
@media (max-width:640px){.faq p{padding:0 0 18px}}
/* ============ 15. TARIFS ET SIMULATEUR ============ */
.prix{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prix b{font:700 var(--fs-prix)/1 var(--f-display);letter-spacing:-.04em}
.prix span{font-size:1rem;color:var(--muted)}
.prix__sous{display:block;margin-top:6px;font-size:.9375rem;color:var(--accent-deep)}
.price{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:18px;align-items:stretch}
@media (max-width:760px){.price{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;padding:24px 24px;position:relative}
.pcard[hidden]{display:none}
.pcard .pcard__tag{align-self:flex-start;background:var(--accent-soft);border-radius:var(--pilule);padding:4px 10px;display:inline-flex;margin-bottom:14px}
/* Réserve calée sur le cas le plus haut : la carte annuelle porte en plus
« soit 70 € HT / mois ». Sinon les deux colonnes de coches se décalent. */
.pcard__prix{min-height:84px}
.pcard__plus{
margin:12px 0 14px;padding-top:12px;border-top:1px solid var(--line);
font:600 1.125rem/1.3 var(--f-display);letter-spacing:-.012em;
}
.pcard__plus small{font-family:var(--f-body);font-weight:400;font-size:var(--fs-body);color:var(--muted);display:block;letter-spacing:0}
.pcard .coche--serree{margin:0 0 6px;padding-top:6px;border-top:1px solid var(--line)}
.pcard__cta{margin-top:auto;padding-top:16px}
.pcard__badge{
position:absolute;top:14px;right:14px;
font:500 var(--fs-label)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;
color:#fff;background:var(--accent);border-radius:var(--pilule);padding:5px 10px;
}
/* Carte recommandée : la seule à porter le dégradé et l'ombre longue. */
.pcard--reco{border-color:var(--accent);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.pcard--reco::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
/* La carte recommandée était remontée de 6 px : les deux ne s'alignaient
plus, ni en haut ni en bas. Son liseré accent, son ombre et son filet
dégradé la distinguent déjà bien assez. */
@media (max-width:640px){.pcard{padding:20px 18px}}
/* Bloc tarif de l'accueil. */
.tarif-accueil{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:760px){.tarif-accueil{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}}
.tarif-accueil__min{font:600 1.375rem/1.3 var(--f-display);letter-spacing:-.012em;margin-top:14px}
.tarif-accueil__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
@media (max-width:640px){.tarif-accueil__cta .btn{width:100%}}
/* Tout ce qui est compris : replié sur téléphone. Le chevron en disque est
le même que celui des questions : sans lui, rien n'annonce le dépliage. */
.inclus{margin-top:20px;border-top:1px solid var(--line)}
.inclus summary{
list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:14px;min-height:44px;padding:12px 0;
}
.inclus summary::-webkit-details-marker{display:none}
.inclus summary::after{
content:"";flex:none;width:28px;height:28px;border-radius:50%;
background-color:var(--accent-soft);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5304A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:14px 14px;
transition:transform .2s;
}
.inclus[open] summary::after{transform:rotate(180deg)}
.sim{margin-top:20px}
.sim h2{margin-bottom:16px}
.sim label{display:block;font:500 .9375rem/1.3 var(--f-body);color:var(--accent-deep);margin-bottom:6px}
.sim__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:760px){.sim__grid{grid-template-columns:1fr;gap:22px}}
.sim__cta{margin-top:20px}
@media (max-width:640px){.sim__cta .btn{width:100%}}
.sim__pastilles{display:flex;gap:8px;margin:10px 0}
.sim__pastille{
flex:1;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r);
background:var(--surface);font:500 .9375rem var(--f-body);color:var(--ink);cursor:pointer;
}
.sim__pastille[aria-pressed="true"]{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}
.champ--range{
-webkit-appearance:none;appearance:none;width:100%;height:44px;min-height:44px;
background:none;border:0;padding:0;
}
.champ--range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--line-strong) var(--p,0%))}
.champ--range::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}
.champ--range::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
.champ--range::-webkit-slider-thumb{
-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;
background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow);
}
.champ--range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow)}
@media (max-width:640px){
.champ--range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-12px}
.champ--range::-moz-range-thumb{width:28px;height:28px}
}
/* ============ 16. BANDEAU FINAL ============ */
.band{
background:var(--grad);border-radius:var(--r-lg);padding:clamp(32px,4vw,56px);
color:#fff;position:relative;overflow:hidden;
}
.band__grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:center;position:relative}
@media (max-width:900px){.band__grid{grid-template-columns:1fr}}
.band h2{color:#fff;margin-bottom:12px}
.band p{color:rgba(255,255,255,.85);max-width:52ch}
.band__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.band__cta .btn{box-shadow:none}
.band__lien{color:#fff}
.band__lien::after{color:#fff}
.band__motif{
position:absolute;inset:0 0 0 auto;width:45%;height:100%;
stroke:#fff;stroke-width:3;stroke-linecap:round;fill:none;opacity:.12;pointer-events:none;
}
@media (max-width:640px){
.band{padding:26px 20px 28px}
.band__cta{margin-top:20px;gap:10px}
.band__cta .btn{width:100%}
/* Seul sur sa ligne, le lien était blockifié : la flèche partait au bord
droit de la boîte, à 150 px du dernier mot. En ligne, elle reste collée
au texte et la zone tactile fait toujours 44 px. */
.band__lien{display:inline;padding:12px 0;margin:-10px 0}
.band__lien::after{content:"\00A0→";display:inline-block}
}
/* ============ 17. BARRE MOBILE ============ */
.cta-bas{
position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;gap:12px;
padding:8px 16px calc(8px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.94);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(42,8,23,.25);
transform:translateY(110%);transition:transform .3s;
}
.cta-bas[data-visible="1"]{transform:none}
.cta-bas__prix{display:flex;flex-direction:column;line-height:1.2;flex:none}
.cta-bas__prix b{font:600 .9375rem var(--f-display);color:var(--ink)}
.cta-bas__sous{font-size:var(--fs-small);color:var(--accent-deep)}
.cta-bas .btn{flex:1;min-height:44px;padding:10px 14px;box-shadow:none}
html.cook-ouvert .cta-bas,html.menu-ouvert .cta-bas{transform:translateY(110%)}
/* Menu ouvert, la page ne doit plus défiler derrière le panneau : le contenu
glissait sous un bloc opaque immobile. */
html.menu-ouvert{overflow:hidden}
/* La réserve basse n'a de sens que là où la barre existe : sur ordinateur
elle laissait une bande vide de 64 px sous le pied. */
/* La réserve doit valoir la hauteur réelle de la barre, zone de sécurité
comprise : 8 + 44 + 8 de remplissage, plus l'encoche. Avec 64 px fixes,
elle recouvrait la dernière ligne du pied sur tout iPhone à encoche. */
@media (max-width:640px){
body.cta-bas-active{padding-bottom:calc(61px + env(safe-area-inset-bottom))}
}
@media (min-width:641px){.cta-bas{display:none}}
/* ============ 18. FENÊTRE COOKIES ============ */
.cook{
position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(42,8,23,.55);backdrop-filter:blur(2px);
}
.cook__boite{
background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
max-width:520px;width:100%;padding:30px 30px 24px;border-top:0;
}
.cook__boite h2{font-size:var(--fs-h3);margin:0 0 12px}
.cook__boite p{font-size:.9375rem;color:var(--accent-deep);line-height:1.6;margin:0}
.cook__btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.cook__lien{margin-top:16px;font-size:var(--fs-small);text-align:center}
.cook-ouvert{overflow:hidden}
@media (max-width:640px){
/* Feuille posée en bas de l'écran, et le défilement de la page reste libre. */
/* Feuille posée en bas de l'écran. Le conteneur couvre encore tout
l'écran mais n'a plus de voile : sans cette exception, il captait les
clics sur une zone parfaitement invisible et la page semblait gelée. */
.cook{align-items:flex-end;padding:0;background:none;backdrop-filter:none;pointer-events:none}
.cook__boite{pointer-events:auto}
.cook__boite{
max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;
padding:18px 18px calc(16px + env(safe-area-inset-bottom));
box-shadow:0 -12px 32px -18px rgba(42,8,23,.35);
}
.cook__btns{grid-template-columns:1fr 1fr;gap:10px}
.cook__lien{margin-top:14px}
html.cook-ouvert{overflow:auto}
}
/* ============ 19. COMPTES ET PAIEMENT ============ */
.auth{padding:clamp(40px,5vw,72px) 0}
.auth__seul{max-width:460px;margin:0 auto}
.auth__seul--large{max-width:520px}
.auth__seul--etat{max-width:560px}
/* Trois enfants : le formulaire, le récapitulatif, les liens. Sur écran
large les liens se glissent sous le formulaire ; sur téléphone l'ordre du
document suffit — formulaire, ce qui se passe ensuite, puis les liens. */
.auth__deux{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
column-gap:clamp(28px,4vw,56px);row-gap:16px;align-items:start;
grid-template-areas:"principal cote" "liens cote";
}
.auth__deux > .auth__colonne{grid-area:principal}
.auth__deux > aside{grid-area:cote}
.auth__deux > .auth__liens{grid-area:liens;margin-top:0}
.auth__sub{color:var(--muted);line-height:1.55;margin-bottom:18px}
.auth__form{margin-top:18px}
.auth__form .field:last-of-type{margin-bottom:18px}
.auth__ou{display:flex;align-items:center;gap:14px;margin:16px 0 12px;color:var(--muted);font-size:var(--fs-small)}
.auth__ou::before,.auth__ou::after{content:"";flex:1;height:1px;background:var(--line)}
.auth__liens{margin-top:16px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--muted)}
.paiement__changer{margin:12px 0}
.paiement__changer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.paiement__changer summary::-webkit-details-marker{display:none}
.contact__tel{margin:20px 0 8px}
@media (min-width:900px){.contact__tel{display:none}}
@media (max-width:899px){
.auth__deux{grid-template-columns:1fr;grid-template-areas:none;row-gap:20px}
.auth__deux > .auth__colonne,.auth__deux > aside,.auth__deux > .auth__liens{grid-area:auto}
/* Le détail du prix est déjà donné par le bandeau de rappel, tout en haut :
la colonne de droite ne garde que la suite du parcours, qui rassure. */
.auth__deux > aside .recap,.auth__deux > aside .recap__note{display:none}
}
@media (max-width:640px){.auth{padding:20px 0 28px}}
/* ============ 19 bis. PAGE INTROUVABLE ============ */
.perdu{padding:clamp(48px,7vw,96px) 0}
.perdu__in{max-width:620px}
.perdu .lede{margin-top:14px}
.perdu__agir{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,32px)}
.perdu__lab{margin-top:clamp(36px,5vw,52px);padding-top:22px;border-top:1px solid var(--line)}
.perdu__liste{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.perdu__liste a{display:inline-block;padding:10px 0}
@media (max-width:640px){
.perdu__agir .btn{width:100%;justify-content:center}
.perdu__liste{flex-direction:column;gap:0}
}
/* ============ 20. FIL D'ARIANE ============ */
.fil{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
font-family:var(--f-body);font-size:var(--fs-small);color:var(--muted);margin-bottom:22px;
}
.fil a{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;display:inline-block;padding:12px 0;margin:-10px 0}
.fil a:hover{color:var(--accent)}
.fil span[aria-current]{color:var(--ink)}
.fil svg{width:11px;height:11px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:640px){.fil{display:none}}
/* ============ 21. PAGES LÉGALES ============ */
.legal .legal__corps{margin-top:8px}
.legal__chapo{font-size:var(--fs-lede);color:var(--accent-deep);margin-bottom:26px}
.legal__corps{max-width:74ch}
.legal__corps h2{font-size:var(--fs-h3);margin:32px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.legal__corps h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__corps p{color:var(--ink);margin-bottom:12px}
.legal__corps strong{color:var(--ink);font-weight:600}
.legal__corps ol,.legal__corps ul{padding-left:22px}
/* Marqueur des valeurs que le fondateur doit encore fournir. */
.legal__todo{
display:inline-block;background:var(--warn-soft);color:var(--warn);
border-radius:var(--r-sm);padding:1px 7px;
font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.03em;
}
@media (max-width:640px){.legal__corps h2{margin:26px 0 9px;padding-top:18px}}
/* ============ 22. ADMINISTRATION ============ */
.adm__seul{max-width:460px;margin:0 auto}
.adm__tete{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;margin-bottom:26px}
/* Onglets : les trois pages de l'administration. */
.adm__onglets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;border-bottom:1px solid var(--line)}
.adm__onglet{
display:inline-flex;align-items:center;gap:8px;padding:11px 16px;margin-bottom:-1px;min-height:44px;
font-size:var(--fs-body);font-weight:500;color:var(--muted);text-decoration:none;
border:1px solid transparent;border-bottom:2px solid transparent;border-radius:var(--r) var(--r) 0 0;
}
.adm__onglet:hover{color:var(--accent-deep);background:var(--accent-soft)}
.adm__onglet.est-actif{color:var(--accent-deep);border-bottom-color:var(--accent);background:none}
.adm__pastille{
display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
border-radius:var(--pilule);background:var(--accent);color:#fff;
font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;
}
@media (max-width:640px){
/* Une seule ligne qui défile : sur deux lignes, le trait du bas ne
passerait plus sous l'onglet actif. La bande déborde la gouttière pour
occuper toute la largeur : le dernier onglet est alors coupé par le bord
de l'écran, ce qui est le seul indice qu'il y a une suite. Sans cela, il
s'arrêtait net avant la marge et on croyait la liste complète. */
.adm__onglets{
flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;scroll-padding-left:18px;
margin-inline:-18px;padding-inline:18px;
}
.adm__onglets::-webkit-scrollbar{display:none}
.adm__onglet{flex:0 0 auto;padding:10px 12px;white-space:nowrap;scroll-snap-align:start}
}
.adm__bloc{margin-bottom:20px}
/* Tableau de bord : quatre cartes courtes qui, seules sur toute la largeur,
laissaient les deux tiers de l'écran vides. Le mode d'emploi garde la pleine
largeur, les autres se rangent par deux. */
.adm__grille{display:grid;gap:20px;align-items:start}
.adm__grille .adm__bloc{margin-bottom:0}
@media (min-width:1000px){
.adm__grille{grid-template-columns:1fr 1fr}
/* Le mode d'emploi ouvre, la dernière carte ferme : toutes deux sur la
largeur entière, sinon la grille se termine sur un trou à droite. */
.adm__grille > .adm__marche,
.adm__grille > .adm__bloc:last-child{grid-column:1 / -1}
}
.adm__bloc h2{font-size:var(--fs-h3);margin:0 0 14px}
.adm__marche{background:var(--surface-2)}
.adm__garde{background:var(--warn-soft);border-color:var(--warn)}
.adm__garde h2{color:var(--warn)}
.adm__sur{background:var(--ok-soft);border-color:var(--ok)}
.adm__sur h2{color:var(--ok)}
.adm__paire{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:12px;font-size:var(--fs-body)}
.adm__paire span{color:var(--muted)}
.adm__ligne{display:inline-block;margin-top:6px;font-size:var(--fs-small);word-break:break-all}
.adm__dl{display:flex;flex-direction:column;gap:8px;margin:0 0 4px;font-size:var(--fs-body)}
.adm__abs{color:var(--muted);font-size:var(--fs-small)}
.adm__inline{display:flex;gap:8px;align-items:center;margin:0}
/* Autant de colonnes que de champs, sans classe supplémentaire dans le
balisage : deux liens Stripe occupent toute la largeur, les quatre champs
de « Corriger » tiennent sur une ligne, trois restent à trois. */
.adm__form3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px;align-items:end;margin-top:6px}
.adm__form3 .field{margin:0}
.adm__form3-btn{grid-column:1/-1;display:flex;gap:18px;align-items:center;margin-top:4px}
@media (max-width:760px){.adm__form3{grid-template-columns:1fr}}
.adm__exemple{margin-top:18px;padding:18px 18px 4px}
.adm__ex-l{font-size:var(--fs-small);color:var(--muted);margin:0 0 6px}
.adm__ex-json{
font-family:var(--f-mono);font-size:var(--fs-data);background:var(--surface);color:var(--accent-deep);
border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0 0 12px;
overflow-x:auto;white-space:pre-wrap;word-break:break-all;
}
.adm__vide{font-size:var(--fs-body);color:var(--muted);margin:0}
.adm__edite{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* ============ CONDITIONS GÉNÉRALES, EN LECTURE ============
Les conditions se lisent sur la page de règlement, dans une boîte qui défile.
La case d'acceptation ne s'ouvre qu'une fois le bas atteint : c'est la seule
façon honnête de dire « lu et approuvé ». */
.cgv{margin:0 0 18px}
.cgv__tete{
display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
justify-content:space-between;margin-bottom:8px;
}
.cgv__boite{
/* Assez haute pour lire une bonne part d'un coup : moins de tours de molette. */
height:clamp(260px,50vh,460px);overflow-y:auto;
background:var(--surface);border:1px solid var(--line-strong);
border-radius:var(--r);padding:16px 18px;
font-size:var(--fs-small);line-height:1.6;color:var(--ink);
/* Le défilement reste dans la boîte : sur téléphone, arriver au bas des
conditions ne doit pas emporter la page entière. */
overscroll-behavior:contain;
/* Une ombre en bas tant qu'il reste à lire : sans ce signe, on ne devine pas
que la boîte défile, et on cherche pourquoi la case refuse de se cocher. */
background-image:linear-gradient(to top,rgba(42,8,23,.08),rgba(42,8,23,0) 26px);
background-repeat:no-repeat;background-position:bottom;background-attachment:local;
}
.cgv__boite:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Le champ de saisie des conditions : du texte long, en chasse fixe, sur toute
la largeur du bloc. On garde 16 px — sous cette taille, Safari iOS zoome. */
.champ--cgv{
font-family:var(--f-mono);font-size:15px;line-height:1.65;
min-height:520px;resize:vertical;tab-size:2;
}
@media (max-width:640px){.champ--cgv{font-size:16px;min-height:360px}}
.cgv__boite--lue{border-color:var(--ok);background-image:none}
.cgv__boite h2{
font-size:var(--fs-h3);margin:18px 0 6px;letter-spacing:-.01em;
}
.cgv__boite h2:first-child{margin-top:0}
.cgv__boite p{margin:0 0 10px}
.cgv__boite ul{margin:0 0 10px;padding-left:1.2em}
.cgv__boite li{margin-bottom:6px}
.cgv__fin{
margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
color:var(--muted);font-size:var(--fs-label);text-transform:uppercase;
letter-spacing:.09em;font-family:var(--f-mono);
}
.cgv__reste{
margin:8px 0 0;font-size:var(--fs-small);color:var(--warn);
display:flex;align-items:center;gap:6px;
}
.cgv__reste::before{content:"↓";font-weight:600}
/* Une case verrouillée doit se voir : sinon on clique dessus sans comprendre. */
.check input:disabled + label{color:var(--muted)}
.check input:disabled{cursor:not-allowed}
/* L'administration prend la largeur de l'écran, avec un plafond : au-delà,
l'œil perd la ligne entre la première et la dernière colonne. */
.wrap--adm{max-width:1720px}
/* Mais le texte, lui, ne s'étire pas : une phrase de deux cents caractères ne
se lit plus, l'œil ne retrouve pas le début de la ligne suivante. Seuls les
tableaux et les grilles profitent de la largeur. */
.wrap--adm .adm__bloc > p,
.wrap--adm .adm__bloc > ul,
.wrap--adm .adm__bloc > ol{max-width:82ch}
.adm__tw{overflow-x:auto}
.adm__table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:820px}
/* Ce qui ne doit jamais se couper : une date en deux morceaux (« 2026- » puis
« 09-16 ») ne se lit plus, et un libellé d'action coupé au milieu double la
hauteur de la ligne. Le reste de la place va aux colonnes qui portent du
texte libre — entreprise, contact, agent. */
.adm__table td.num,
.adm__table td[data-label="Formule"],
.adm__table td[data-label="Accès"],
.adm__table td[data-label="Paiement"]{white-space:nowrap}
.adm__table td[data-label="Entreprise"]{min-width:14ch}
.adm__actions .lien,.adm__actions .btn,.adm__actions button{white-space:nowrap}
/* Les cinq actions tiennent sur deux lignes, pas cinq. Sur un écran étroit le
tableau défile dans sa boîte plutôt que de laisser chaque libellé tomber à la
ligne : une ligne de 200 px de haut ne se parcourt pas. */
.adm__table td.adm__actions{min-width:290px}
.adm__table th{
text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);
font:500 var(--fs-label)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
.adm__table td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.adm__table tr:last-child td{border-bottom:0}
.adm__table td.num{font-family:var(--f-mono);font-size:var(--fs-data);color:var(--muted);font-variant-numeric:tabular-nums}
.adm__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.adm__actions form{margin:0}
@media (max-width:640px){
.adm__bloc{padding:20px 18px}
/* Tableau des demandes : une carte par demande, lisible d'un pouce. */
.adm__tw{overflow:visible}
.adm__table,.adm__table tbody,.adm__table tr,.adm__table td{display:block;width:100%;min-width:0}
.adm__table thead{display:none}
.adm__table tr{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.adm__table td{border:0;padding:5px 0}
.adm__table td[data-label]::before{
content:attr(data-label);display:block;
font:500 var(--fs-label)/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
color:var(--muted);margin-bottom:2px;
}
.adm__table td a[href^="tel:"]{font-size:1.0625rem;font-weight:500;display:inline-block;padding:12px 0;margin:-10px 0}
.adm__inline{margin-top:4px}
.adm__inline .champ--court{flex:1 1 auto;min-width:0;width:auto}
.adm__table td.adm__actions{padding-top:12px;margin-top:8px;border-top:1px solid var(--line)}
}
/* ============ 23. APPARITION AU DÉFILEMENT ============ */
/* Sans JavaScript, tout est visible d'emblée. */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .rv[data-in="1"]{opacity:1;transform:none}
/* ============ 24. ATTRIBUT HIDDEN ============ */
/* Filet général, en fin de feuille : tout composant qui pose lui-même un
display (.field, .check, .encart, .carte…) resterait visible malgré
l'attribut hidden, la règle du navigateur ayant la même spécificité et
venant avant. Aucun !important n'est nécessaire. */
[hidden]{display:none}
/* ============ 25. MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
html.js .rv{opacity:1 !important;transform:none !important}
.callcard__body{
height:auto !important;min-height:0 !important;max-height:none !important;
overflow:visible !important;scroll-behavior:auto !important;
-webkit-mask-image:none !important;mask-image:none !important;
}
}
/* ================================================================
AFFLUENCE — /admin-affluence
Un graphe en barres fait de , sans bibliothèque et sans image :
la hauteur de chaque barre est une variable CSS posée par PHP. Le
texte du graphe vit dans l'attribut aria-label du conteneur, celui
des barres dans une bulle qui n'apparaît qu'au survol.
================================================================ */
.adm__sous{color:var(--muted);font-size:var(--fs-small);margin:-4px 0 var(--s4)}
.afl__note{color:var(--muted);font-size:var(--fs-small)}
.afl__fenetre{display:flex;gap:var(--s1);margin-bottom:var(--s5)}
.afl__onglet{
padding:6px 14px;border-radius:var(--pilule);text-decoration:none;
font-size:var(--fs-small);color:var(--muted);border:1px solid transparent;
}
.afl__onglet:hover{color:var(--ink);border-color:var(--line)}
.afl__onglet.est-actif{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--line-strong);font-weight:600}
.afl__chiffres{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--s4);margin-bottom:var(--s6);
}
.afl__chiffres dt{color:var(--muted);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase}
.afl__chiffres dd{margin:2px 0 0}
.afl__chiffres .montant{font-family:var(--f-display);font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1.1}
.afl__hausse{color:var(--ok)}
.afl__baisse{color:var(--accent)}
/* Les barres partagent l'espace : une journée de plus les affine, elle ne
déborde pas. Hauteur fixe pour que l'échelle reste lisible. */
.afl__graphe{display:flex;align-items:flex-end;gap:2px;height:132px;padding-top:var(--s2)}
.afl__barre{
position:relative;flex:1 1 0;min-width:2px;height:var(--h);
background:var(--grad);border-radius:3px 3px 0 0;opacity:.82;
}
.afl__barre:hover{opacity:1}
.afl__bulle{
position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
background:var(--ink);color:#fff;font-size:var(--fs-label);white-space:nowrap;
padding:4px 8px;border-radius:var(--r-sm);opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;
}
.afl__barre:hover .afl__bulle{opacity:1}
.afl__axe{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--fs-label);margin-top:var(--s2)}
.afl__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.afl__liste li{
position:relative;display:flex;align-items:center;gap:var(--s3);
padding:9px var(--s3);border-radius:var(--r-sm);overflow:hidden;
}
/* La jauge est un fond, pas un élément de mise en page : elle ne pousse rien. */
.afl__jauge{position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--accent-soft);border-radius:var(--r-sm)}
.afl__liste code{position:relative;font-family:var(--f-mono);font-size:var(--fs-data);color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afl__liste b{position:relative;margin-left:auto;font-variant-numeric:tabular-nums;font-size:var(--fs-small)}
@media (max-width:640px){
.afl__graphe{height:104px}
.afl__chiffres{gap:var(--s3)}
.afl__chiffres .montant{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){ .afl__bulle{transition:none} }
/* Bloc « en ce moment » : le seul endroit du site qui bouge tout seul. */
.afl__direct h2{display:flex;align-items:center;gap:10px}
.afl__pouls{
width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
box-shadow:0 0 0 0 rgba(35,102,74,.45);animation:afl-pouls 2.4s ease-out infinite;
}
@keyframes afl-pouls{
0%{box-shadow:0 0 0 0 rgba(35,102,74,.45)}
70%{box-shadow:0 0 0 9px rgba(35,102,74,0)}
100%{box-shadow:0 0 0 0 rgba(35,102,74,0)}
}
/* Site calme : le voyant s'éteint au lieu de battre dans le vide. */
.afl__direct.est-calme .afl__pouls{background:var(--line-strong);animation:none;box-shadow:none}
/* Session tombée : on le dit, plutôt que d'afficher un chiffre figé. */
.afl__direct.est-perdu .afl__pouls{background:var(--warn);animation:none;box-shadow:none}
.afl__direct.est-perdu .afl__vivant::after{
content:"— rafraîchissement interrompu, rechargez la page";
font-family:var(--f-body);font-size:var(--fs-small);font-weight:400;color:var(--warn);
}
.afl__vivant{
font-family:var(--f-display);font-size:1.25rem;line-height:1.35;
color:var(--ink);margin:0 0 var(--s4);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
}
.afl__vivant b{font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.afl__vivant span{font-family:var(--f-body);font-size:var(--fs-body);color:var(--muted)}
.afl__sep{color:var(--line-strong)}
.afl__liste--direct li{background:var(--surface-2);gap:var(--s3)}
.afl__age{position:relative;color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
.afl__liste--direct b{margin-left:auto;color:var(--muted);font-weight:500}
.afl__calme{color:var(--muted);font-size:var(--fs-small);background:none!important;padding-left:0}
@media (max-width:520px){
.afl__liste--direct li{flex-wrap:wrap}
.afl__liste--direct code{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .afl__pouls{animation:none} }
/* Réglage replié : ce qui est facultatif ne doit pas peser autant que le reste. */
.adm__repli summary{
cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);
color:var(--ink);display:flex;align-items:center;gap:var(--s3);list-style:none;
}
.adm__repli summary::-webkit-details-marker{display:none}
.adm__repli summary::before{
content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:rotate(-45deg);transition:transform .15s;
}
.adm__repli details[open] summary::before{transform:rotate(45deg)}
.adm__repli-etat{
margin-left:auto;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:400;
color:var(--muted);letter-spacing:.04em;
}
.adm__repli details>*:not(summary){margin-top:var(--s4)}
@media (prefers-reduced-motion:reduce){ .adm__repli summary::before{transition:none} }
/* Le bandeau final ne porte plus qu'une idée et une action. Le détail — les
trois étapes de la mise en service — vit au-dessus, sur fond clair, où il
se lit sans peser. Sur téléphone, une tuile colonne remplie de listes et de
paragraphes devient un mur : c'est le moment de décider, pas de lire. */
/* 34ch bridait la colonne bien en deçà de la place disponible : les phrases
de cadence repassaient à la ligne sur un seul mot. */
.band__seul{position:relative;max-width:min(52ch,100%)}
/* Quand la tuile n'a pas de phrase de cadence, le bouton ne doit pas
coller au titre. */
.band__seul h2 + .btn{margin-top:clamp(16px,2.2vw,24px)}
/* Le parcours en trois jalons, sorti de la tuile et posé en clair. */
.etapes--jalons{max-width:640px;margin:clamp(20px,2.6vw,28px) 0 clamp(30px,4vw,46px)}
.etapes--jalons li{margin-bottom:14px}
.band__cadence{
font-family:var(--f-display);font-weight:600;line-height:1.5;
font-size:clamp(1.0625rem,1rem + .45vw,1.25rem);
color:#fff;margin:0 0 clamp(20px,3vw,28px);max-width:none;
}
.band__rassure{
font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.04em;
color:rgba(255,255,255,.72);margin:14px 0 0;max-width:none;
/* Si la ligne doit passer à deux, qu'elle coupe au point médian et non au
milieu d'une phrase. */
text-wrap:balance;
}
@media (max-width:640px){
.band__seul .btn{width:100%;justify-content:center}
}
/* ============ 8 ter. LES SECTIONS DE L'ACCUEIL ============
Trois formes, trois intentions, aucune grille de cartes à icône :
— .limites, ce qu'elle refuse, en liste réglée ;
— .relev, le relevé d'une journée, une colonne d'heures et une de phrases ;
— .dit + .propos, la réplique citée et la prose qui l'explique.
============================================================ */
/* Ce qu'elle ne sait pas faire. Une liste réglée, pas des cartes : les limites
se lisent d'affilée, et le filet suffit à les séparer. Dans le titre, la
seconde moitié porte ce que la limite garantit — c'est elle qu'on retient. */
.limites{list-style:none;margin:0;padding:0;max-width:64ch;border-top:1px solid var(--line)}
.limites li{padding:18px 0;border-bottom:1px solid var(--line)}
/* Les six limites de l'accueil : ce sont les fonctionnalités du service,
retournées. Chacune est annoncée par l'objet dont elle parle — une horloge,
un agenda, une enveloppe — pour qu'on la saisisse avant de lire. Formes
pleines : le prune porte l'objet, le blanc le détail, le rouge le mouvement.
Classes préfixées « ico- » : .fil et .coche existent ailleurs dans cette
feuille et masquaient mes traits sur téléphone. */
.limites--images li{padding-top:22px}
.limites__ico{display:block;height:46px;width:auto;margin:0 0 14px}
.limites__ico .ico-p{fill:var(--accent-deep)}
.limites__ico .ico-a{fill:var(--accent)}
.limites__ico .ico-b{fill:#fff}
.limites__ico .ico-h{fill:var(--surface)}
.limites__ico .ico-tb{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.limites__ico .ico-tb2{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.limites__ico .ico-ta{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.limites__ico .ico-s{fill:#fff;font-family:var(--f-display);font-weight:700;font-size:19px}
@media (max-width:640px){.limites__ico{height:42px;margin-bottom:12px}}
/* Sur téléphone, les six limites deviennent un carrousel qu'on fait défiler
au doigt. Le défilement et l'accrochage sont faits par le navigateur
(scroll-snap) : aucun script ne pilote le geste, donc rien ne saccade et
tout reste utilisable si le JavaScript ne se charge pas.
La liste déborde volontairement la gouttière de 18 px pour que les tuiles
viennent toucher les bords de l'écran ; scroll-padding remet l'accrochage
au bon endroit. La tuile suivante dépasse de 22 % : c'est ce qui dit au
visiteur qu'il y a une suite. */
@media (max-width:640px){
.limites--images{
display:flex;gap:12px;max-width:none;border-top:0;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
/* La tuile s'accroche au centre de l'écran, pas à gauche. Pour que la
première et la dernière puissent s'y centrer aussi, la marge latérale
vaut exactement la moitié de ce qui reste : (100 - 84) / 2 = 8 vw. La
liste déborde la gouttière de 18 px pour occuper toute la largeur. */
margin-inline:-18px;padding:2px 8vw 6px;
scrollbar-width:none;-ms-overflow-style:none;
}
.limites--images::-webkit-scrollbar{display:none}
.limites--images > li{
flex:0 0 84vw;scroll-snap-align:center;
border:0;border-radius:16px;background:var(--ground);
padding:22px 20px 24px;text-align:center;
/* Les tuiles ont toutes la hauteur de la plus haute : sans centrage
vertical, les plus courtes laisseraient un vide sous leur texte. */
display:flex;flex-direction:column;justify-content:center;
}
/* Le pictogramme est en display:block : sans marges automatiques il resterait
collé à gauche pendant que le texte, lui, serait centré. */
.limites--images .limites__ico{margin-inline:auto}
.limites--images p{max-width:none}
}
/* Les six points sous le carrousel : combien de tuiles, et où l'on en est.
Ils sont créés par le script, jamais écrits dans la page — sans JavaScript
le carrousel défile toujours, mais des points figés mentiraient sur la
position. Ils sont décoratifs : au lecteur d'écran, c'est la liste
elle-même qui est lue, pas ses pastilles. */
.limites__points{
display:flex;justify-content:center;gap:9px;
list-style:none;margin:18px 0 0;padding:0;
}
.limites__points li{
width:7px;height:7px;border-radius:50%;background:var(--line-strong);
transition:background .25s ease,transform .25s ease;
}
.limites__points li[data-actif="1"]{background:var(--line-champ);transform:scale(1.2)}
@media (prefers-reduced-motion:reduce){.limites__points li{transition:none}}
@media (min-width:641px){.limites__points{display:none}}
.limites h3{
font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);
line-height:1.3;color:var(--ink);margin:0 0 5px;
}
.limites h3 b{font-weight:700;color:var(--accent)}
.limites p{font-size:var(--fs-body);line-height:1.55;color:var(--muted);margin:0;max-width:56ch}
@media (min-width:900px){
.limites{max-width:none;border-top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px)}
.limites li{border-top:1px solid var(--line);border-bottom:0}
}
/* Le relevé d'une journée. Les heures sont des données : elles sont en
caractères à chasse fixe et alignées, pour se lire en colonne. */
/* La frise. Les rangées étaient séparées par un filet clair — invisible dès
que le fond de section a été assombri. La séparation est donc devenue
structurelle : une ligne verticale que chaque heure vient ponctuer d'un
point. Elle ne dépend plus d'un écart de nuance, donc elle tient aussi bien
sur le fond blanc des pages métier que sur le fond teinté de l'accueil.
Géométrie : la liste réserve 30 px à gauche, la ligne occupe x = 5 à 7, et
le point de 12 px se pose à x = 0, donc centré sur elle. */
.relev{list-style:none;margin:0;padding:0 0 0 30px;max-width:640px}
.relev__jour{
font:500 var(--fs-data)/1.3 var(--f-mono);color:var(--muted);
letter-spacing:.08em;text-transform:uppercase;padding:18px 0 4px;
}
/* Une rangée = un intitulé rouge, puis son texte dessous. Même disposition
sur téléphone et sur ordinateur : les intitulés des pages métier vont de
« 12 h 35 » à « Le lendemain d'une visite technique », et aucune colonne
commune ne convenait aux deux — trop étroite, elle hachait les longs ; assez
large pour eux, elle exilait les courts sur un ruban vide. */
.relev__l{
display:block;position:relative;
padding:10px 0;
}
/* Le point, aligné sur la ligne de l'heure qu'il annonce. Il est plus large
que la ligne, qu'il masque donc sans avoir besoin d'un halo — ce qui lui
évite de dépendre de la couleur du fond, qui change d'une page à l'autre. */
.relev__l::before{
content:"";position:absolute;left:-30px;top:13px;z-index:1;
width:12px;height:12px;border-radius:50%;background:var(--accent);
}
/* Le segment relie le point de la rangée à celui de la suivante : la frise
commence donc au premier point et s'arrête au dernier, sans dépasser. Le
changement de jour la rompt — c'est ce qui sépare jeudi de vendredi. */
.relev__l::after{
content:"";position:absolute;left:-25px;top:19px;bottom:-19px;width:2px;z-index:0;
background:var(--line-strong);border-radius:2px;
}
.relev__l:last-child::after{display:none}
.relev__l:has(+ .relev__jour)::after{bottom:4px}
.relev__h{
display:block;margin-bottom:3px;
color:var(--accent);font-variant-numeric:tabular-nums;
}
.relev__t{font-size:var(--fs-body);line-height:1.55;color:var(--ink);margin:0}
/* La ligne de clôture d'une section : ce qu'il faut retenir, isolé et détaché
de ce qui précède. Même traitement partout, pour qu'on la reconnaisse. */
.bilan{
max-width:640px;margin:clamp(26px,3vw,36px) 0 0;
font-family:var(--f-display);font-weight:600;
font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.45;color:var(--accent-deep);
}
/* La réplique citée : reprise du hero, et la seule de toute la page. Le filet
bordeaux la marque sans en faire une carte. */
.dit{
font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.25;
font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem);color:var(--accent-deep);
border-left:2px solid var(--accent);padding-left:18px;margin:0;
}
.dit__note{max-width:52ch;padding-left:20px;margin:10px 0 clamp(22px,3vw,30px)}
.propos{max-width:62ch;margin-top:24px}
.propos p{font-size:var(--fs-body);line-height:1.65;color:var(--ink);margin:0}
.propos p + p{margin-top:14px}
@media (max-width:640px){
.limites li{padding:15px 0}
.relev__l{padding:9px 0}
.relev__l::before{top:12px}
.relev__l::after{top:18px;bottom:-18px}
.relev__jour{padding:15px 0 3px}
.dit{padding-left:14px}
.dit__note{padding-left:16px}
}
/* Les quatre points réglés pendant l'appel : une ligne chacun, légèrement
rentrés pour qu'on voie d'un coup d'œil que c'est une énumération — sans
puce ni carte, comme partout ailleurs sur la page. */
.propos__liste{padding-left:14px;border-left:2px solid var(--line-strong);color:var(--ink)}
/* La fiche de réglage. Même grammaire que la fiche d'appel du hero — bandeau
en chasse fixe, corps réglé, bord détachable — pour que le rendez-vous de
mise en service se lise comme un objet, pas comme un paragraphe. */
.reglage{padding:0;overflow:hidden;max-width:520px;background:var(--surface)}
.reglage__bandeau{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.reglage__quand{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-label)}
.reglage__duree{color:var(--muted);font-size:var(--fs-label)}
.reglage__intro{margin:0;padding:12px 18px 0;font-size:var(--fs-small);color:var(--muted)}
.reglage__points{list-style:none;margin:0;padding:2px 18px 12px}
.reglage__points li{
padding:10px 0;border-bottom:1px solid var(--line);
font-size:var(--fs-body);line-height:1.5;color:var(--ink);
}
.reglage__points li:last-child{border-bottom:0}
.reglage__pied{margin:0;padding:13px 18px 15px;background:var(--surface-2);
font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.reglage__pied b{color:var(--accent);font-weight:600}
.propos{margin-top:24px}
@media (max-width:640px){
.reglage__bandeau{padding:11px 14px}
.reglage__points{padding:4px 14px 10px}
.reglage__pied{padding:12px 14px 13px}
}
/* ============ 8 quater. L'HÔTESSE ============
Assise sur le bord supérieur de la fiche d'appel, entière — de la tête aux
bottes — et ses jambes passent devant. Sa ligne d'assise tombe aux six
dixièmes de sa hauteur : c'est de là que vient le décalage vertical.
Deux précautions de place :
— sur grand écran la fiche démarre tout en haut du hero ; sans réserve, le
personnage passerait derrière l'en-tête collant et serait coupé. La zone
descend donc d'autant qu'il dépasse ;
— ses jambes occupent le tiers central de sa silhouette, le bandeau de la
fiche est décalé d'autant pour qu'elle ne recouvre aucun texte.
============================================================ */
.fiche-zone{position:relative}
.fiche__hote,.fiche__hote-fixe{
position:absolute;z-index:2;pointer-events:none;
left:16px;height:152px;width:auto;top:-91px;
display:block;
}
/* iOS refuse l'autolecture dans certains cas — mode économie d'énergie en
tête — et pose alors son bouton « lecture » par-dessus la vidéo. Masquer ce
bouton ne marche pas de façon fiable : il vit dans un DOM fantôme que Safari
ne laisse plus toujours styler. On ne compte donc pas dessus. L'affiche,
posée au-dessus de la vidéo, la recouvre — bouton compris — jusqu'à ce que
la lecture démarre pour de bon. Le visiteur voit la même image, sans bouton.
Sans JavaScript, pas de recouvrement : la vidéo garde son propre repli. */
.fiche__hote-fixe{display:none;z-index:3}
html.js .fiche__hote-fixe{display:block}
html.js .fiche-zone--joue .fiche__hote-fixe{display:none}
/* iOS pose un gros bouton « lecture » par-dessus la vidéo dès que
l'autolecture est refusée — mode économie d'énergie, onglet en arrière-plan,
décodeur occupé. Il n'y a pas de contrôles à afficher ici : l'hôtesse est
décorative et déjà intouchable (pointer-events:none). Chaque pseudo-élément
a sa propre règle : groupés, un navigateur qui n'en connaît qu'un jetterait
toute la déclaration. */
.fiche__hote::-webkit-media-controls{display:none !important}
.fiche__hote::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
.fiche__hote::-webkit-media-controls-overlay-play-button{display:none !important;-webkit-appearance:none}
.fiche__hote::-webkit-media-controls-panel{display:none !important}
.fiche-zone .fiche__bandeau{padding-left:100px}
@media (min-width:980px){
.fiche-zone{margin-top:100px}
}
@media (max-width:640px){
.fiche__hote,.fiche__hote-fixe{height:118px;top:-71px;left:8px}
.fiche-zone .fiche__bandeau{padding-left:78px}
/* Elle dépasse de 65 px au-dessus de la fiche ; la gouttière du hero n'en
fait que 22. Sans cette réserve, sa tête recouvre la dernière ligne de la
phrase d'accroche. */
.fiche-zone{margin-top:56px}
}
/* Mouvement réduit : l'affiche reste, la vidéo ne joue pas. Elle est déjà au
bon endroit et à la bonne taille, il n'y a rien à repositionner — c'est ce
que faisaient, mal et en double, les deux règles ::before d'avant. */
@media (prefers-reduced-motion:reduce){
.fiche__hote{display:none}
.fiche__hote-fixe{display:block}
}
/* =====================================================================
LE FILM (octobre 2026) — bandeau « On pourrait croire que cette voix
est réelle », avant la section finale. Lecteur sobre : affiche + bouton,
la vidéo (6 à 14 Mo) ne se charge qu'au clic (app.js, module « film »).
===================================================================== */
.film-bande{background:linear-gradient(180deg,#3A1222 0%,#2C0D1A 100%);color:#fff;padding:72px 0 80px}
.film-bande .lab{color:#F4C2CD}
.film-bande h2{color:#fff}
.film-bande .lede{color:#E8D5DB}
.film-bande .film{margin-top:34px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.film-bande .film-note{margin:14px 0 0;color:#D9C3CA;font-size:.95rem}
.film{position:relative;border-radius:18px;overflow:hidden;background:#120508;isolation:isolate}
/* L'affiche et la vidéo portent elles-mêmes leurs proportions : aucune hauteur en pourcentage,
qui dans Safari laissait une vidéo de 0 px de haut (le son partait, pas l'image). */
.film__affiche,.film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.film__video[hidden],.film__affiche[hidden],.film__lancer[hidden]{display:none}
/* Le bouton est un calque posé sur l'affiche ; le disque est centré par la grille, pas par des marges. */
.film__lancer{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.25) 100%);cursor:pointer;display:grid;place-items:center;color:#fff;font:inherit}
.film__play{width:84px;height:84px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(181,48,74,.45);transition:transform .2s}
.film__play svg{width:30px;height:30px;transform:translateX(3px)}
.film__lancer:hover .film__play,.film__lancer:focus-visible .film__play{transform:scale(1.07)}
.film__lancer:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.film__duree{position:absolute;right:16px;bottom:14px;font:600 13px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.55);padding:7px 10px;border-radius:999px}
@media (max-width:640px){.film-bande{padding:52px 0 56px}.film{border-radius:12px}.film__play{width:64px;height:64px}.film__play svg{width:24px;height:24px}}