/* ------------------------------------------------------------------
Tout Roule — feuille de style unique
D'après la maquette « Site Tout Roule » : papier quadrillé, encre noire,
jaune en unique accent, bordures franches de 2 px et ombres portées nettes.
Aucun JavaScript, aucune police externe.
Deux variables gouvernent le jaune : --accent pour les aplats et les fonds,
--accent-strong pour les petits elements, ou --accent manque de contraste.
------------------------------------------------------------------- */
:root{
--paper:#F1F0EC;
--card:#FCFBF8;
--ink:#161614;
--ink-soft:#5C5C55;
--ink-faint:#8A8A80;
--rule:#CFCEC7;
--accent:#F4C152;
--accent-strong:#275C46; /* petits elements : 7,50:1 sur carte, 6,81:1 sur papier */
--dark:#1B1B19;
--accent-tint:#FBF1D8; /* aplats jaune pale : encadres, CTA */
--on-accent:#5E4606; /* texte courant sur aplat jaune */
--on-accent-soft:#7A5B08; /* etiquettes mono sur aplat jaune */
--on-dark:#EDECE7; /* texte sur fond sombre */
--on-dark-soft:#B8B7AF;
--on-dark-faint:#77776E;
--rule-dark:#33332F; /* filet sur fond sombre */
--head-h:106px; /* filet 14 + en-tete 82 + 10 de respiration */
--max:1080px;
--sans:"Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--sans);
font-size:17px;
line-height:1.6;
color:var(--ink);
background-color:var(--paper);
background-image:
linear-gradient(to right,rgba(22,22,20,.055) 1px,transparent 1px),
linear-gradient(to bottom,rgba(22,22,20,.055) 1px,transparent 1px);
background-size:30px 30px;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}
/* ---------- bandeau d'annonce ----------
Deux elements, et c'est ce qui produit le retrecissement :
…
l'annonce, hauteur pleine, DEFILE
12 px de jaune, COLLE en haut
le menu, colle juste dessous
Au chargement, les deux jaunes se touchent et se lisent comme un seul
bandeau. Quand on descend, la part visible de .notice diminue en continu
jusqu'a ce que le filet se cale en haut : le bandeau parait retrecir
jusqu'a 12 px, puis reste. Aucun JavaScript, aucun ecouteur de defilement.
Sans annonce, .notice:empty disparait : il ne reste que le filet, ce qui
donne au haut de page son trait de couleur permanent.
Pour activer une annonce, on ecrit le contenu entre les balises :
Attention : :empty est strict. Un espace ou un retour a la ligne entre les
deux balises et le bandeau vide reprend sa hauteur pleine. Ecrire
d'un seul tenant. */
.notice{background:var(--accent);padding:14px 0}
.notice:empty{display:none}
/* 14 px en boite de bordure = 12 px de jaune visible + le trait de 2 px.
Cette hauteur et le top de .site-head doivent rester egaux : a 12 px ici et
14 px la, il restait un interstice de 2 px ou le contenu de la page passait
entre le filet et le menu. */
.filet{position:sticky;top:0;z-index:21;
height:14px;background:var(--accent);border-bottom:2px solid var(--ink)}
/* annonce centree : sans le libelle « Statut » a gauche, le message est seul
sur la ligne et un texte cale a gauche sur 1080 px paraissait orphelin. */
.notice .wrap{display:block;text-align:center}
.notice .st{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-accent-soft);margin-right:12px}
.notice strong{font-size:19px}
.notice p{margin:6px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-accent);line-height:1.5}
/* ---------- en-tête ---------- */
/* colle en haut : le bandeau defile et sort, l en-tete reste.
Effet "large au chargement, fin ensuite" sans une ligne de JavaScript. */
.site-head{position:sticky;top:14px;z-index:20;
background:var(--card);border-bottom:2px solid var(--ink)}
/* sans quoi l en-tete colle masque la cible des ancres (#zones, #offre, #avis) */
[id]{scroll-margin-top:var(--head-h)}
.head-in{max-width:var(--max);margin:0 auto;padding:14px 24px;
/* trois colonnes : le menu est centre sur la page, pas sur l'espace restant */
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.logo img{height:52px;width:auto}
.nav{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.nav a{
text-decoration:none;font-size:15px;font-weight:700;text-transform:uppercase;
/* 3 px : l'epaisseur mesuree des traits du dessin du logo, a sa taille rendue */
letter-spacing:.08em;border-bottom:3px solid transparent;
/* boite symetrique : sans ce pendant en haut, le centrage de l'en-tete
remonte le texte du menu par rapport a celui du bouton */
padding:3px 0;border-top:3px solid transparent;
}
.nav a:hover{border-bottom-color:var(--accent-strong)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
/* ---------- boutons ---------- */
.btn{
display:inline-block;font-family:inherit;font-size:15px;font-weight:700;
text-decoration:none;padding:13px 22px;border:2px solid var(--ink);border-radius:0;
background:var(--accent);color:var(--ink);box-shadow:4px 4px 0 var(--ink);
transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
/* bouton secondaire : c'est le bouton principal avec un fond blanc au repos.
Ombre et enfoncement au survol sont ceux de .btn — rien a redefinir. */
.btn-2{background:var(--card)}
.btn-2:hover{background:var(--accent)}
.btn-sm{padding:10px 16px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}
.btn-dark{background:var(--dark);color:var(--accent)}
.btn-dark:hover{background:#000}
/* bouton de l'en-tete : meme typographie que le menu, ombre conservee */
.head-cta{justify-self:end;font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:11px 18px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* ---------- typographie ---------- */
h1,h2,h3{line-height:1.12;margin:0 0 .55em;letter-spacing:-.02em}
h1{font-size:clamp(34px,5vw,52px);font-weight:800}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:800}
h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.9vw,19px);color:var(--ink-soft);max-width:62ch}
.eyebrow{
font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 14px;display:block;
}
.muted{color:var(--ink-soft)}
.small{font-size:15px}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--ink-faint)}
/* ---------- sections ---------- */
section{padding:56px 0}
.hero{padding:56px 0;border-bottom:2px solid var(--ink)}
.hero h1{margin-bottom:.4em}
/* ---------- grilles & cartes ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:2px solid var(--ink);padding:24px}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.chip{
display:inline-block;background:var(--accent);border:1px solid var(--ink);
font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
font-weight:700;padding:5px 10px;margin-bottom:14px;
}
.card--photo{padding:0;overflow:hidden}
.card--photo img{aspect-ratio:3/2;object-fit:cover;width:100%;border-bottom:2px solid var(--ink)}
.card--photo .card-body{padding:20px}
/* liste simple à filets pointillés */
.rows{list-style:none;padding:0;margin:0}
.rows li{padding:11px 0;border-bottom:1px dashed var(--rule)}
.rows li:last-child{border-bottom:0}
ul.plain{padding-left:20px;margin:0 0 1em}
ul.plain li{margin-bottom:6px}
/* étapes numérotées façon frise */
.flow{margin:0;padding:0;list-style:none;border-left:2px dashed var(--rule);padding-left:22px}
.flow li{position:relative;margin-bottom:26px}
.flow li::before{content:"";position:absolute;left:-31px;top:5px;width:14px;height:14px;background:var(--accent);border:2px solid var(--ink)}
.flow h3{font-size:18px;margin-bottom:.3em}
.flow p{margin:0;color:var(--ink-soft);font-size:16px}
/* ---------- tableau de tarifs ---------- */
.tarif{margin:0 0 40px}
.tarif-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:4px}
.tarif-head h3{font-size:22px;margin:0}
/* Le pointille est le trait du carnet : il vaut sur une feuille, pas sur le
quadrillage. Les 11 lignes de la page Contact vivent dans un .box, sur une
carte pleine : elles le gardent. Les 37 lignes de la page Tarifs sont
posees a meme le papier quadrille : elles n'ont plus de trait du tout, le
quadrillage tenant lieu de reglure. C'est l'espacement qui separe, d'ou le
passage de 13 a 16 px. La largeur reste celle du .wrap : une colonne plus
etroite rapprochait le prix de son libelle, mais desalignait la liste du
menu et de tout le reste de la page. Arbitrage de Mihai, coherence d'abord.
Le prix est cale sur le meme bord droit que le reste : c'est ce bord qui
guide l'oeil, a defaut de filet. */
.line{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
padding:13px 0;border-bottom:1px dashed var(--rule)}
.tarif .line{border-bottom:0;padding:16px 0}
.line-t{font-size:16.5px}
.line-t small{display:block;color:var(--ink-soft);font-size:14px;margin-top:2px}
.line-p{font-family:var(--mono);font-weight:700;font-size:16px;white-space:nowrap;padding-top:2px}
/* encadrés */
.note{background:var(--accent-tint);border:1px solid var(--accent-strong);padding:18px 20px;font-size:16px}
.note strong{font-weight:800}
.box{border:2px solid var(--ink);background:var(--card);padding:26px}
/* Colonne « Demande de rendez-vous » suivie de la photo d'intervention.
La cellule s'etire sur la hauteur de sa ligne et margin-top:auto pousse la
photo tout en bas : son bord inferieur tombe alors sur celui de l'encadre
d'en face, et la ligne suivante — la note et l'offre B2B — part d'un seul
trait. Empilee sous 640 px, la cellule n'a plus de hauteur a rattraper : la
photo reprend l'ecart courant. */
.col-photo{align-self:stretch;display:flex;flex-direction:column}
.col-photo figure{margin:auto 0 0}
@media (max-width:640px){.col-photo figure{margin:20px 0 0}}
/* bandeau d'appel à l'action jaune */
.cta{background:var(--accent);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:52px 0}
.cta h2{max-width:18ch}
.cta p{max-width:52ch;color:var(--on-accent)}
.cta .eyebrow{color:var(--on-accent-soft)}
/* section sombre */
.dark-sec{background:var(--dark);color:var(--on-dark);padding:52px 0}
.dark-sec h2{color:#fff}
.dark-sec p{color:var(--on-dark-soft)}
.dark-sec .eyebrow{color:var(--ink-faint)}
.dark-sec .btn-2{background:transparent;color:#fff;border-color:#fff}
.dark-sec .btn-2:hover{background:#fff;color:var(--ink)}
/* avis */
/* etoiles en jaune assume : 1,61:1, sous le seuil de 3:1, mais la note est
donnee en texte a cote (5,0, aria-label) — elles sont decoratives */
.stars{color:var(--accent);letter-spacing:.14em;line-height:1;white-space:nowrap}
.score{display:flex;align-items:center;gap:18px;margin:0 0 30px}
.score b{font-size:clamp(38px,5vw,52px);font-weight:800;line-height:.9;letter-spacing:-.03em}
.score .stars{font-size:22px;display:block;margin-bottom:6px}
.score .mono{display:block}
.quote{background:var(--card);border:2px solid var(--ink);padding:22px;display:flex;flex-direction:column}
.quote .stars{font-size:17px;margin-bottom:14px}
.quote p{font-size:16px;margin-bottom:0}
.quote footer{margin-top:auto;padding-top:14px;border-top:1px dashed var(--rule)}
.quote cite{display:block;font-style:normal;font-weight:700;font-size:15px;margin-bottom:3px}
.quote footer .mono{display:block}
/* « en savoir plus » */
.more{display:inline-block;margin-top:8px;font-weight:800;font-size:14px;text-transform:uppercase;
letter-spacing:.09em;text-decoration:none;box-shadow:inset 0 -8px 0 var(--accent);padding:0 2px}
.more:hover{box-shadow:inset 0 -20px 0 var(--accent)}
/* rendez-vous */
.acuity{width:100%;height:900px;border:2px solid var(--ink);background:#fff}
/* prose (pages légales) */
.prose{max-width:70ch}
.prose h2{font-size:23px;margin-top:1.9em}
.prose a{font-weight:700;box-shadow:inset 0 -7px 0 var(--accent)}
/* ---------- pied de page ---------- */
.site-foot{background:var(--dark);color:var(--on-dark-soft);padding:52px 0 28px;font-size:15px}
.site-foot a{color:var(--on-dark);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.foot-logo img{height:56px;width:auto;margin-bottom:16px}
.site-foot h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);font-weight:400;margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.foot-tel{display:block;font-size:22px;font-weight:800;color:var(--accent) !important;margin-bottom:10px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
border-top:1px solid var(--rule-dark);margin-top:38px;padding-top:18px;font-size:13px;color:var(--on-dark-faint)}
/* ---------- barre mobile collante ---------- */
.mobile-bar{display:none}
/* ---------- responsive ---------- */
@media (max-width:900px){
/* la grille a trois colonnes ecrase le logo et le bouton sous 900 px :
retour au flux d'origine, le menu passe sur sa propre ligne */
.head-in{display:flex;flex-wrap:wrap;justify-content:space-between}
.nav{order:3;flex-basis:100%}
.g4{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:640px){
body{font-size:16px;padding-bottom:62px}
section,.cta,.dark-sec{padding:40px 0}
.g2,.g4{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
/* l en-tete est colle : sur mobile il doit manger le moins de hauteur possible */
:root{--head-h:106px}
.head-in{gap:4px 14px;padding:7px 24px 8px}
.logo img{height:34px}
.nav{justify-content:flex-start;gap:14px}
.nav a{font-size:12px;padding:2px 0;border-width:2px}
.nav a.opt{display:none} /* accessible depuis la page Tarifs */
.head-cta{display:none} /* remplacé par la barre du bas */
.acuity{height:1100px}
.btn{width:100%;text-align:center}
.actions{gap:12px}
/* barre d'action permanente, sans JavaScript */
.mobile-bar{
display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
border-top:2px solid var(--ink);font-weight:700;
}
.mobile-bar a{
padding:18px 8px;text-align:center;text-decoration:none;background:var(--card);color:var(--ink);
}
.mobile-bar a+a{background:var(--accent);border-left:2px solid var(--ink)}
}
/* ---------- punchline surlignée ---------- */
h1 mark{
background:var(--accent);color:inherit;padding:2px 10px 5px;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.sub{
font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.32;
letter-spacing:-.01em;margin:0 0 12px;
}
/* ---------- bon d'intervention (illustration du hero) ---------- */
.bon{margin:0}
.bon-sheet{
position:relative;background:var(--card);border:2px solid var(--ink);
transform:rotate(2.1deg);box-shadow:6px 7px 0 rgba(22,22,20,.13);
/* Surtout pas d'overflow:hidden ici. Sur un element a la fois borde,
transforme et coupe, WebKit rogne les quatre coins du trait : le cadre
apparait interrompu dans Safari. La coupe est donc deportee sur
.dirt-layer, qui n'a ni bordure ni transformation propre. */
}
.dirt-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bon-head{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 18px;border-bottom:2px solid var(--ink);
font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
}
.bon-head b{font-weight:700}
.bon-rows{margin:0;padding:2px 18px 0}
.bon-rows>div{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:9px 0;border-bottom:1px dashed var(--rule);
}
.bon-rows dt{
margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-faint);max-width:64%;
}
.bon-rows dd{margin:0;font-weight:600;font-size:15.5px;text-align:right}
.bon-total{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
margin:0 18px;padding:12px 0 2px;border-top:2px solid var(--ink);
font-weight:800;font-size:20px;
}
.bon-total span:first-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.bon-note{
margin:14px 18px 0;background:var(--accent-tint);border:1px solid var(--accent-strong);
padding:10px 12px;font-size:14px;line-height:1.45;
}
.bon-foot{
display:flex;justify-content:space-between;align-items:center;gap:20px;
padding:20px 30px 24px 20px;
}
/* tampon encreur — encrage irrégulier via un masque diagonal */
.stamp{
flex:0 0 auto;
font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent-strong);border:3px double var(--accent-strong);
padding:7px 15px 6px;border-radius:2px;
transform:rotate(-7deg);opacity:.85;mix-blend-mode:multiply;
-webkit-mask-image:repeating-linear-gradient(24deg,#000 0 9px,rgba(0,0,0,.5) 9px 12px,#000 12px 22px,rgba(0,0,0,.62) 22px 25px);
mask-image:repeating-linear-gradient(24deg,#000 0 9px,rgba(0,0,0,.5) 9px 12px,#000 12px 22px,rgba(0,0,0,.62) 22px 25px);
}
/* traces de doigts et taches de cambouis */
.bon-sheet .dirt{position:absolute;pointer-events:none}
.smudge{border-radius:50%}
.smudge.s1{ /* pouce en haut, là où on tient la feuille */
width:170px;height:92px;top:-26px;left:26%;transform:rotate(-13deg);filter:blur(11px);
background:radial-gradient(ellipse at 42% 55%,rgba(46,35,16,.34),rgba(46,35,16,.10) 55%,transparent 72%);
}
.smudge.s2{
width:120px;height:62px;bottom:-10px;right:14%;transform:rotate(19deg);filter:blur(10px);
background:radial-gradient(ellipse at 60% 40%,rgba(26,22,13,.28),transparent 68%);
}
.smudge.s3{
width:60px;height:190px;top:18%;right:-22px;transform:rotate(5deg);filter:blur(13px);
background:radial-gradient(ellipse at 38% 50%,rgba(28,24,16,.18),transparent 70%);
}
.smear{ /* frottement de doigt, pas une tache ronde */
width:150px;height:16px;left:12px;bottom:64px;transform:rotate(-6deg);filter:blur(4px);
border-radius:8px;
background:linear-gradient(90deg,rgba(24,20,12,.27),rgba(24,20,12,.09) 45%,transparent 85%);
}
.print{
width:82px;height:106px;opacity:.16;filter:blur(.8px);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 152'%3E%3Cg fill='none' stroke='%23120E06' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M53 66c4-9 14-8 16 1 2 9-3 17-2 26'/%3E%3Cpath d='M44 62c6-16 27-15 32 2 3 14-4 24-3 36'/%3E%3Cpath d='M36 58c8-24 41-23 47 3 4 20-6 31-4 46'/%3E%3Cpath d='M28 55c10-32 55-31 62 4 5 26-8 38-6 56'/%3E%3Cpath d='M20 53C32 13 88 14 96 57c6 31-10 44-8 65'/%3E%3Cpath d='M12 54C25 6 96 7 105 58'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
-webkit-mask-image:radial-gradient(ellipse at 50% 52%,#000 26%,rgba(0,0,0,.45) 52%,transparent 76%);
mask-image:radial-gradient(ellipse at 50% 52%,#000 26%,rgba(0,0,0,.45) 52%,transparent 76%);
}
.print.p1{top:-14px;right:38px;transform:rotate(15deg)}
.print.p2{bottom:52px;left:-18px;transform:rotate(-38deg) scale(.95);opacity:.13}
.bon figcaption{font-size:13px;color:var(--ink-faint);letter-spacing:0;text-transform:none;font-family:var(--sans)}
/* Centrage du bloc de texte du hero sur la FEUILLE et non sur la figure.
La legende est sortie du flux : la boite de la figure se limite alors a la
feuille, et align-items:center de la grille aligne les deux centres.
Au-dessus de 1000px seulement : en dessous, la legende passe sur deux lignes
et viendrait mordre le bord bas du hero. */
@media (min-width:1000px){
.bon{position:relative}
.bon figcaption{position:absolute;top:100%;left:0;right:0}
}
/* Ecrans bas — telephone en paysage, surtout. Un en-tete colle y mange une
bande de hauteur utile : on le compacte au maximum et on le remet sur une
seule ligne. Mesure sans cette regle : 39 % de la hauteur de l ecran. */
@media (max-height:520px){
:root{--head-h:72px}
.head-in{display:flex;flex-wrap:nowrap;gap:14px;padding:5px 24px 6px}
.logo img{height:26px}
.nav{order:0;flex-basis:auto;flex-wrap:nowrap;gap:12px;margin-left:auto}
.nav a{font-size:11px;letter-spacing:.05em;padding:1px 0;border-width:2px}
.nav a.opt{display:none}
.head-cta{display:block;font-size:11px;padding:7px 12px}
}
@media (max-width:640px){
.bon-sheet{transform:none}
.bon-foot{flex-direction:column;align-items:flex-start;gap:16px}
}
/* ---------- accordeon des tarifs (sans JavaScript) --------------------------
Une case a cocher masquee par famille, une case globale pour tout deplier.
Le contenu reste dans le HTML : il est indexe, imprime et cherchable.
--------------------------------------------------------------------------- */
.tgl,.tgl-all{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tarifs-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 28px}
.tgl-all ~ label .t-b{display:none}
.tgl-all:checked ~ label .t-a{display:none}
.tgl-all:checked ~ label .t-b{display:inline}
.tgl-all:focus-visible ~ label{outline:3px solid var(--accent-strong);outline-offset:3px}
.tarifs .tarif{margin:0;padding:0} /* neutralise le padding global de */
.tarifs .tarif h3{margin:0;font-size:22px}
.tarifs .tarif h3 label{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:16px 0;border-bottom:2px solid var(--ink);cursor:pointer;
}
.tarifs .tarif h3 label:hover{color:var(--accent-strong)}
.tarifs .tarif h3 label::after{
content:"+";font-family:var(--mono);font-weight:700;font-size:24px;line-height:1;
width:26px;text-align:center;flex:0 0 auto;
}
.tgl:checked ~ h3 label::after{content:"–"}
.tgl:focus-visible ~ h3 label{outline:3px solid var(--accent-strong);outline-offset:3px}
.tarifs .cnt{
margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-faint);font-weight:400;white-space:nowrap;
}
.tarif-body{display:none;padding-bottom:22px}
.tgl:checked ~ .tarif-body{display:block}
.tarifs:has(.tgl-all:checked) .tarif-body{display:block}
.tarif-desc{margin:14px 0 0;color:var(--ink-soft);font-size:15px}
@media print{
.tarif-body{display:block !important}
.tarifs-tools,.tarifs .cnt,.tarifs .tarif h3 label::after{display:none}
}