/* Page Garde-meuble (B+) — styles propres a la page
*
* Extrait de tests/page-garde-meuble/option-b-plus.html.
* Ne pas editer a la main : rejouer scripts/portage-garde-meuble/ apres
* avoir corrige la maquette, sinon la prochaine extraction ecrase la
* difference en silence.
*/
.bc { font-size: var(--font-size-small); color: var(--color-gray); padding-block: var(--space-sm); }
.bc ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.bc li + li::before { content: "›"; margin-right: .4rem; color: #B9B5AC; }
.bc [aria-current] { color: var(--color-dark); font-weight: 500; }
/* ---------- HERO avec photo réelle ---------- */
.hero { background: var(--color-bg); padding-block: var(--space-md) var(--space-lg); }
.hero__grid { display: grid; gap: var(--space-md); align-items: center; }
@media (min-width: 950px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero h1 { max-width: 18ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.hero__media img { width: 100%; height: auto; display: block; }
.hero__media figcaption {
background: var(--color-white); padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-small); color: var(--color-gray);
}
.reassure { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
margin-top: var(--space-md); font-size: var(--font-size-small); color: var(--color-gray); }
.reassure > span { display: inline-flex; align-items: center; gap: .4rem; }
/* Scopé aux enfants directs (> plutôt que descendant) : le span des étoiles
est lui-même un span imbriqué dans le span porteur de la note Google, donc
un sélecteur descendant lui appliquait aussi le point — deux points collés
devant les étoiles. Le point est en outre retiré pour cet item : les
étoiles sont déjà le repère visuel, un point devant serait redondant. */
.reassure > span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%;
background: var(--color-primary); flex: 0 0 auto; }
/* Specificite : ".reassure > span::before" (classe+type+pseudo-element) est
plus specifique qu'un simple ".reassure__rating::before" (classe+pseudo-
element) — sans le combinateur ">" + type ici, la regle ci-dessus ne
l'emportait pas et le point restait affiche. */
.reassure > span.reassure__rating::before { content: none; }
/* ---------- Tuiles de parcours ---------- */
.flow { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; margin-top: var(--space-md);
counter-reset: f; }
@media (min-width: 620px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.tile {
position: relative; background: var(--color-white);
border: 1px solid var(--color-gray-light); border-radius: var(--radius-lg);
padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs);
}
.tile__num {
counter-increment: f; content: "";
font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-small);
color: var(--color-dark); background: var(--color-primary);
width: 1.75rem; height: 1.75rem; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: calc(var(--space-md) * -0.4); left: var(--space-md);
}
.tile__ico { color: var(--color-dark); }
.tile__ico svg { width: 28px; height: 28px; display: block; }
.tile h3 { font-size: 1.05rem; }
.tile p { font-size: var(--font-size-small); color: #3A3A3A; }
/* ---------- Grille d'avantages à icônes ---------- */
.feats { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-md); }
@media (min-width: 620px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { display: flex; gap: var(--space-sm); }
.feat__ico {
flex: 0 0 2.75rem; height: 2.75rem; border-radius: var(--radius-md);
background: var(--color-primary-light);
display: inline-flex; align-items: center; justify-content: center; color: var(--color-dark);
}
.feat h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.feat p { font-size: var(--font-size-small); color: #3A3A3A; }
/* ---------- Situations ---------- */
.sits { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-md); }
@media (min-width: 800px) { .sits { grid-template-columns: repeat(3, 1fr); } }
.sit { border: 1px solid var(--color-gray-light); border-radius: var(--radius-lg);
padding: var(--space-md); background: var(--color-white); }
.sit__ico { color: var(--color-dark); margin-bottom: var(--space-xs); }
.sit__ico svg { width: 32px; height: 32px; }
.sit h3 { font-size: 1.1rem; margin-bottom: var(--space-xs); }
/* ---------- Listes d'objets illustrées ---------- */
.lists { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-md); }
@media (min-width: 950px) { .lists { grid-template-columns: repeat(3, 1fr); } }
.listcard { border: 1px solid var(--color-gray-light); border-radius: var(--radius-lg);
background: var(--color-white); overflow: hidden; display: flex; flex-direction: column; }
.listcard--lead { border-color: var(--color-dark); border-width: 2px; }
.listcard img { width: 100%; height: auto; display: block; background: #F1EFEA; }
.listcard__body { padding: var(--space-md); display: flex; flex-direction: column; flex: 1; }
.listcard h3 { font-size: 1.1rem; display: flex; align-items: center; gap: var(--space-xs); }
.listcard h3 svg { width: 22px; height: 22px; flex: 0 0 auto; }
.listcard ul { list-style: none; margin-top: var(--space-sm); display: grid; gap: .3rem;
font-size: var(--font-size-small); }
.listcard li { padding-left: 1rem; position: relative; }
.listcard li::before { content: "—"; position: absolute; left: 0; color: #B9B5AC; }
.listcard p.tot { margin-top: auto; padding-top: var(--space-sm);
font-family: var(--font-display); font-weight: 700; }
.boxfig { margin: 0; } .boxsvg { width: 100%; height: auto; display: block; }
.pricebox { border: 2px solid var(--color-dark); border-radius: var(--radius-lg);
padding: var(--space-md); background: var(--color-white); max-width: 34rem; }
.cta-final { background: var(--color-dark); color: var(--color-white); }
.cta-final h2 { color: var(--color-white); } .cta-final .lede { color: #CFCCC6; }
.dims-late { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }
.dims-late div { min-width: 8rem; }
.dims-late dt { font-size: var(--font-size-small); color: var(--color-gray); }
.dims-late dd { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin-left: 0; }
.cards3 { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-md); }
@media (min-width: 800px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.mini { border-left: 3px solid var(--color-primary); padding-left: var(--space-sm); }
.mini h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; }
.mini h3 svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* ---------- Étoiles Google ---------- */
/* Mesuré : #C8860D tombait à 2,85:1 sur le fond teinté du hero — sous le seuil de
3:1 des éléments non textuels. #B87A09 tient sur les deux fonds (3,36 et 3,60),
et l'information reste doublée par un texte pour les lecteurs d'écran. */
.stars { color: #B87A09; letter-spacing: .08em; }
/* ---------- Bloc « Un doute sur la taille » ---------- */
.doubt { background: var(--color-dark); color: var(--color-white); border-radius: var(--radius-lg);
padding: var(--space-md); }
@media (min-width: 900px) { .doubt { padding: var(--space-lg); } }
.doubt h2 { color: var(--color-white); }
.doubt p { color: #CFCCC6; }
.doubt__thumbs img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.doubt__thumbs span { display: block; padding: var(--space-xs); font-size: var(--font-size-xs);
color: var(--color-white); font-family: var(--font-display); font-weight: 600;
text-align: center; }
.doubt table { color: var(--color-white); }
.doubt th { background: #2A2A2A; color: var(--color-white); }
.doubt th, .doubt td { border-bottom-color: #3A3A3A; }
/* ---------- Avis Google ---------- */
.revhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
margin-top: var(--space-sm); }
.revs { display: grid; gap: var(--space-md); grid-template-columns: 1fr; margin-top: var(--space-md); }
@media (min-width: 800px) { .revs { grid-template-columns: repeat(3, 1fr); } }
.rev { border: 1px solid var(--color-gray-light); border-radius: var(--radius-lg);
padding: var(--space-md); background: var(--color-white);
display: flex; flex-direction: column; gap: var(--space-xs); }
.rev__who { display: flex; align-items: center; gap: var(--space-xs); }
.rev__ini { flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--color-primary-light); color: var(--color-dark);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-small); }
.rev__name { font-family: var(--font-display); font-weight: 700; }
.rev__date { font-size: var(--font-size-xs); color: var(--color-gray); }
.rev p { font-size: var(--font-size-small); }
/* ================= COMPOSANTS v3 ================= */
.optlabel { font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-xs);
letter-spacing:.1em; text-transform:uppercase; color:var(--color-gray);
border:1px dashed var(--color-gray-light); border-radius:var(--radius-sm);
padding:.2rem .5rem; display:inline-block; margin-bottom:var(--space-sm); }
/* --- P1 : frise connectée --- */
.p1 { position:relative; display:grid; gap:var(--space-md); grid-template-columns:1fr; }
@media (min-width:900px){ .p1{ grid-template-columns:repeat(3,1fr); gap:var(--space-md);} }
.p1__s { position:relative; padding-top:3.25rem; }
.p1__s::before { content:""; position:absolute; top:1.35rem; left:0; right:0; height:2px;
background:var(--color-gray-light); }
.p1__s:first-child::before{ left:1.35rem; } .p1__s:last-child::before{ right:calc(100% - 1.35rem); }
@media (max-width:899px){ .p1__s::before{ display:none; } }
.p1__n { position:absolute; top:0; left:0; width:2.7rem; height:2.7rem; border-radius:50%;
background:var(--color-white); border:2px solid var(--color-dark); color:var(--color-dark);
display:grid; place-items:center; font-family:var(--font-display); font-weight:700; z-index:1; }
.p1__s:first-child .p1__n { background:var(--color-primary); border-color:var(--color-primary); }
.p1__s h3 { font-size:1.02rem; margin-bottom:.2rem; }
.p1__s p { font-size:var(--font-size-small); color:#3A3A3A; }
/* --- P2 : cartes en escalier, chiffre fantôme --- */
.p2 { display:grid; gap:var(--space-sm); grid-template-columns:1fr; }
@media (min-width:900px){ .p2{ grid-template-columns:repeat(3,1fr); align-items:start; } }
.p2__s { position:relative; overflow:hidden; background:var(--color-white);
border:1px solid var(--color-gray-light); border-radius:var(--radius-lg);
padding:var(--space-md); }
@media (min-width:900px){
.p2__s:nth-child(2){ margin-top:1.5rem; } .p2__s:nth-child(3){ margin-top:3rem; }
}
.p2__ghost { position:absolute; right:-.35rem; top:-1.6rem; font-family:var(--font-display);
font-weight:700; font-size:5.5rem; line-height:1; color:var(--color-primary); opacity:.22;
pointer-events:none; }
.p2__s svg { width:26px; height:26px; }
.p2__s h3 { font-size:1.02rem; margin:.4rem 0 .2rem; }
.p2__s p { font-size:var(--font-size-small); color:#3A3A3A; }
/* --- P3 : ruban compact à chevrons --- */
.p3 { display:flex; flex-wrap:wrap; gap:.35rem; background:var(--color-dark);
border-radius:var(--radius-lg); padding:var(--space-sm); }
.p3__s { flex:1 1 12rem; display:flex; align-items:center; gap:.6rem; color:var(--color-white);
padding:.7rem .8rem; border-radius:var(--radius-md); background:#242424; position:relative; }
.p3__s svg{ width:22px; height:22px; flex:0 0 auto; color:var(--color-primary); }
.p3__s b { font-family:var(--font-display); font-size:.94rem; display:block; }
.p3__s span { font-size:var(--font-size-xs); color:#B9B5AC; display:block; }
.p3__s:not(:last-child)::after { content:"›"; position:absolute; right:-.45rem; top:50%;
transform:translateY(-50%); color:var(--color-primary); font-size:1.4rem; z-index:1; }
@media (max-width:700px){ .p3__s:not(:last-child)::after{ display:none; } }
/* --- R1 : quatre colonnes à filet --- */
.r1 { display:grid; gap:var(--space-md); grid-template-columns:1fr 1fr; }
@media (min-width:900px){ .r1{ grid-template-columns:repeat(4,1fr); } }
.r1 > div { padding-left:var(--space-sm); border-left:2px solid var(--color-primary); }
.r1 svg{ width:26px; height:26px; margin-bottom:.35rem; }
.r1 h3{ font-size:1rem; margin-bottom:.15rem; } .r1 p{ font-size:var(--font-size-small); color:#3A3A3A; }
/* --- R2 : bandeau sombre --- */
.r2 { background:var(--color-dark); border-radius:var(--radius-lg); padding:var(--space-md);
display:grid; gap:var(--space-md); grid-template-columns:1fr; }
@media (min-width:700px){ .r2{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .r2{ grid-template-columns:repeat(4,1fr); padding:var(--space-lg) var(--space-md); } }
.r2 > div{ text-align:center; }
.r2 .r2__ico{ width:3rem; height:3rem; border-radius:50%; background:var(--color-primary);
display:inline-grid; place-items:center; color:var(--color-dark); margin-bottom:.5rem; }
.r2 svg{ width:24px; height:24px; }
.r2 h3{ color:var(--color-white); font-size:1rem; margin-bottom:.2rem; }
.r2 p{ color:#CFCCC6; font-size:var(--font-size-small); }
/* --- R3 : grille 2x2 cartes --- */
.r3 { display:grid; gap:var(--space-sm); grid-template-columns:1fr; }
@media (min-width:700px){ .r3{ grid-template-columns:1fr 1fr; } }
.r3 > div{ display:flex; gap:var(--space-sm); background:var(--color-white);
border:1px solid var(--color-gray-light); border-radius:var(--radius-lg); padding:var(--space-sm) var(--space-md); }
.r3 .r3__ico{ flex:0 0 2.5rem; height:2.5rem; border-radius:var(--radius-md);
background:var(--color-primary-light); display:grid; place-items:center; }
.r3 svg{ width:22px; height:22px; }
.r3 h3{ font-size:1rem; margin-bottom:.1rem; } .r3 p{ font-size:var(--font-size-small); color:#3A3A3A; }
/* --- Avantages condensés --- */
.adv { display:grid; gap:.5rem; grid-template-columns:repeat(2,1fr); margin-top:var(--space-md); }
@media (min-width:620px){ .adv{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .adv{ grid-template-columns:repeat(5,1fr); } }
.adv li{ list-style:none; display:flex; align-items:center; gap:.5rem;
background:var(--color-white); border:1px solid var(--color-gray-light);
border-radius:var(--radius-md); padding:.6rem .7rem;
font-size:var(--font-size-small); line-height:1.25; }
.adv svg{ width:20px; height:20px; flex:0 0 auto; color:var(--color-dark); }
/* --- Carrousels d'avis --- */
.car { position:relative; }
.car__track { display:grid; grid-auto-flow:column; gap:var(--space-md);
overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
padding-bottom:var(--space-xs); scrollbar-width:none; }
.car__track::-webkit-scrollbar{ display:none; }
.car__track > *{ scroll-snap-align:start; }
.car--1 .car__track{ grid-auto-columns:100%; }
.car--3 .car__track{ grid-auto-columns:85%; }
@media (min-width:800px){ .car--3 .car__track{ grid-auto-columns:calc(33.333% - var(--space-md)*2/3); } }
.car__nav{ display:flex; gap:.5rem; align-items:center; }
.car__btn{ width:44px; height:44px; border-radius:50%; border:2px solid var(--color-dark);
background:var(--color-white); color:var(--color-dark); display:grid; place-items:center;
cursor:pointer; transition:background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out); }
.car__btn svg{ width:20px; height:20px; }
.car__btn[disabled]{ opacity:.35; cursor:default; }
@media (hover:hover) and (pointer:fine){
.car__btn:not([disabled]):hover{ background:var(--color-primary); transform:translateY(-2px); }
}
.car__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--space-sm); margin-top:var(--space-md); }
.quote{ background:var(--color-white); border:1px solid var(--color-gray-light);
border-radius:var(--radius-lg); padding:var(--space-md); display:flex; flex-direction:column;
gap:var(--space-xs); }
.quote--big{ padding:var(--space-lg) var(--space-md); }
.quote--big p{ font-size:1.2rem; line-height:1.5; }
.quote__mark{ color:var(--color-primary); }
.quote__mark svg{ width:30px; height:30px; }
/* --- v4 : avis compacts --- */
.car--3 .car__track{ grid-auto-columns:78%; gap:var(--space-sm); }
@media (min-width:700px){ .car--3 .car__track{ grid-auto-columns:calc(50% - var(--space-sm)/2); } }
@media (min-width:1050px){ .car--3 .car__track{ grid-auto-columns:calc(33.333% - var(--space-sm)*2/3); } }
/* position:relative indispensable : les des avis
sont en position:absolute ; sans ancetre positionne ils se calaient sur le bloc
conteneur initial, echappaient au clipping de la piste et faisaient deborder la
page entiere (scrollWidth 2317 pour 375 de viewport). */
/* 32 px de padding horizontal sur une carte de 284 px ne laissaient pas la place
a « Manolito Manolito · juillet 2026 » : quatre noms se faisaient tronquer. */
.quote{ position:relative; padding:var(--space-sm); gap:.35rem; }
.quote p{ font-size:var(--font-size-small); line-height:1.5;
display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.quote--big{ padding:var(--space-md); }
.quote--big p{ font-size:1.05rem; line-height:1.5; -webkit-line-clamp:6; }
/* margin-top:auto garde les pieds alignes d'une carte a l'autre (les citations
n'ont pas la meme longueur). Le filet de separation a ete retire et le nom
passe sur la meme ligne que la date : le pied tombe de ~45 a ~22 px. */
.quote p{ flex:1 1 auto; margin-bottom:.2rem; }
.quote .rev__who{ margin-top:auto; align-items:center; gap:.45rem; min-width:0; }
.quote .rev__ini{ flex:0 0 1.5rem; height:1.5rem; font-size:10px; }
/* nowrap + troncature : un nom long (« Manolito Manolito · juillet 2026 »)
repassait a la ligne a 375 px, le pied montait a 37 px et l'alignement
entre cartes sautait. Une ligne, toujours. */
.quote .rev__meta{ display:flex; flex-wrap:nowrap; align-items:baseline; gap:.35rem;
font-size:var(--font-size-xs); line-height:1.3; min-width:0; }
.quote .rev__name{ font-family:var(--font-display); font-weight:700;
font-size:var(--font-size-xs); min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quote .rev__date{ white-space:nowrap; flex:0 0 auto; }
.quote .rev__sep{ flex:0 0 auto; }
.quote .rev__sep{ color:#B9B5AC; }
.car__head{ margin-top:var(--space-sm); }
/* --- v4 : prix + avantages côte à côte --- */
.pricegrid{ display:grid; gap:var(--space-md); grid-template-columns:1fr; align-items:start; margin-top:var(--space-md); }
@media (min-width:950px){ .pricegrid{ grid-template-columns:minmax(0,22rem) 1fr; gap:var(--space-lg); } }
/* deux colonnes des le mobile : en une seule colonne le duplicata montait a
660 px de haut, soit plus que la grille principale qu'il est cense condenser */
.adv--side{ grid-template-columns:1fr 1fr; gap:.4rem; margin-top:0; }
@media (min-width:1150px){ .adv--side{ grid-template-columns:repeat(3,1fr); } }
/* --- v5 : fiche produit facon fiche box --- */
.prod{ display:grid; gap:var(--space-md); grid-template-columns:1fr; align-items:start;
margin-top:var(--space-md); }
@media (min-width:900px){ .prod{ grid-template-columns:1fr 1fr; gap:var(--space-lg); } }
.shot{ position:relative; background:var(--color-bg); border-radius:var(--radius-lg);
padding:var(--space-sm); }
.shot__track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%;
overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
scrollbar-width:none; border-radius:var(--radius-md); }
.shot__track::-webkit-scrollbar{ display:none; }
.shot__track img{ width:100%; height:auto; display:block; scroll-snap-align:start; }
.shot__btn{ position:absolute; top:50%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%; border:none; background:var(--color-white);
box-shadow:var(--shadow-card); color:var(--color-dark); display:grid; place-items:center;
cursor:pointer; z-index:2;
transition:background var(--duration-fast) var(--ease-out); }
.shot__btn svg{ width:20px; height:20px; }
.shot__btn--prev{ left:var(--space-sm); } .shot__btn--next{ right:var(--space-sm); }
.shot__btn[disabled]{ opacity:.35; cursor:default; }
@media (hover:hover) and (pointer:fine){ .shot__btn:not([disabled]):hover{ background:var(--color-primary); } }
.shot__thumbs{ display:flex; gap:.5rem; margin-top:var(--space-sm); }
.shot__thumbs button{ width:56px; height:44px; padding:0; border-radius:var(--radius-sm);
border:2px solid transparent; background:var(--color-white); cursor:pointer; overflow:hidden; }
.shot__thumbs button[aria-current="true"]{ border-color:var(--color-primary); }
.shot__thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem);
line-height:1.1; }
.prod__title em{ font-style:normal; color:#B87A09; }
.prod__where{ margin-top:.3rem; font-size:1.05rem; }
.prod__where b{ border-bottom:2px solid var(--color-primary); }
.prod__sub{ margin-top:.4rem; color:var(--color-gray); max-width:44ch; }
.prod h3{ font-size:1.25rem; margin-top:var(--space-md); }
.prod__dims{ display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-md); margin-top:.35rem; }
.prod__dims span{ font-size:var(--font-size-small); }
.prod__dims b{ font-family:var(--font-display); }
.prod__picto{ display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-md); }
.prod__picto div{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-display);
font-weight:600; font-size:var(--font-size-small); }
.prod__picto span{ width:2.5rem; height:2.5rem; border-radius:50%; background:var(--color-bg);
display:grid; place-items:center; flex:0 0 auto; }
/* Prix à gauche, colonne de deux lignes à droite qui démarre juste après
le chiffre et occupe la même hauteur que lui (align-items:center plutôt
que baseline, propre à ce variant). */
.price--stacked{ align-items:center; }
.price__lines{ display:flex; flex-direction:column; justify-content:center; gap:.15rem; }
.price--stacked .price__period{ display:block; }
.prod__minterm{ display:block; font-size:var(--font-size-small);
color:var(--color-gray); font-style:italic; }
.prod__minterm--sm{ font-size:var(--font-size-xs); }
.prod__pay{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md);
margin-top:var(--space-md); }
/* en ligne plutot qu'empilees : trois lignes de garantie prenaient autant de
hauteur que le bloc prix lui-meme. Repasse en colonne sous 480 px. */
.prod__incl{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem var(--space-md);
margin-top:var(--space-md); font-size:var(--font-size-small); }
.prod__incl li{ display:flex; gap:.4rem; align-items:center; }
.prod__incl svg{ width:16px; height:16px; color:#B87A09; flex:0 0 auto; }
/* --- v11 : FAQ et appel final centres --- */
/* Le titre et le bloc sont centres ; les questions-reponses restent alignees a
gauche, un texte long centre se lit mal. */
.faq--centre h2, .faq--centre > .lede{ text-align:center; }
.faq--centre .faq__liste{ max-width:44rem; margin-inline:auto; }
.cta-final .wrap{ text-align:center; }
.cta-final .lede{ margin-inline:auto; }
.cta-final .hero__cta{ justify-content:center; }
/* --- avantages : grille sous la fiche prix --- */
.adv--tarif{ margin-top:var(--space-md); }
@media (min-width:900px){ .adv--tarif{ grid-template-columns:repeat(4,1fr); } }
/* ================= B+ : PROPOSITION UI / UX / MOTION (2026-08-05) =================
Démonstration issue des 4 audits — voir RAPPORT-AMELIORATIONS.md.
Tout est en dérivés des tokens ; AA préservé ; reduced-motion neutralisé
(kill-switch global de test.css + gardes locales). */
/* --- profondeur : ombres 2 couches, radius un cran au-dessus --- */
:root{
--shadow-card: 0 1px 2px rgba(26,26,26,.05), 0 4px 12px rgba(26,26,26,.06);
--shadow-card-hover: 0 2px 4px rgba(26,26,26,.06), 0 12px 32px rgba(26,26,26,.12);
--shadow-pop: 0 2px 6px rgba(26,26,26,.07), 0 24px 48px -16px rgba(26,26,26,.22);
--radius-lg: 12px; --radius-xl: 16px;
}
.p2__s, .quote, .mini{ box-shadow:var(--shadow-card); border-color:#EFEDE7; }
.section--tint{ border-block:1px solid #EFEDE7; }
@media (min-width:900px){ .section{ padding-block:var(--space-xl); } }
.section__kicker{ color:#7A6200; }
.section__kicker::before{ content:""; display:inline-block; width:1.5rem; height:2px;
background:var(--color-primary); margin-right:.5rem; vertical-align:.25em; }
/* --- hero : surligneur, photo qui flotte, badge, pastilles --- */
.hero h1{ letter-spacing:-0.02em; }
.hero h1 em{ font-style:normal; padding-inline:.08em;
background:linear-gradient(transparent 60%, var(--color-primary) 60%, var(--color-primary) 94%, transparent 94%); }
.hero__media{ position:relative; border-radius:var(--radius-xl); box-shadow:var(--shadow-pop); }
.hero__badge{ position:absolute; top:var(--space-sm); left:var(--space-sm); z-index:1;
display:inline-flex; align-items:center; gap:.35rem; background:var(--color-dark);
color:var(--color-white); font-family:var(--font-display); font-weight:700;
font-size:var(--font-size-small); padding:.45rem .85rem; border-radius:999px; }
.hero__badge b{ color:var(--color-primary); }
.reassure{ color:var(--color-dark); }
.reassure > span{ background:var(--color-white); border:1px solid var(--color-gray-light);
border-radius:999px; padding:.4rem .8rem .4rem .65rem; }
/* --- la carte prix : l'objet le plus désirable de la page --- */
.prod__card{ position:relative; background:var(--color-white); border:1px solid #EDEBE5;
border-radius:var(--radius-xl); padding:var(--space-md);
box-shadow:0 1px 2px rgba(26,26,26,.05), 0 16px 40px -12px rgba(26,26,26,.14); }
.prod__card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px;
background:var(--color-primary); border-radius:var(--radius-xl) var(--radius-xl) 0 0; }
.prod__pay{ background:var(--color-primary-light); border:1px solid #F0E3B2;
border-radius:12px; padding:var(--space-sm) var(--space-md); }
.price__amount{ letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.prod__anchor{ margin-top:var(--space-sm); font-size:var(--font-size-small); color:#3A3A3A; }
.prod__incl{ margin-top:var(--space-sm); }
.prod__incl svg{ color:var(--color-dark); background:var(--color-primary); border-radius:50%;
padding:2px; width:18px; height:18px; }
/* mobile : le prix et ses garanties AVANT le diaporama (ordre visuel seulement) */
@media (max-width:899px){ .prod > .shot{ order:2; } .prod > .prod__card{ order:1; } }
/* --- boutons : halo du primaire + retour d'appui tactile --- */
.btn{ transition:transform var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out); }
.btn:active{ transform:scale(.97); }
.btn--primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
0 1px 2px rgba(26,26,26,.15), 0 4px 14px rgba(245,197,24,.40); }
@media (hover:hover) and (pointer:fine){
.btn--primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
0 2px 4px rgba(26,26,26,.15), 0 8px 22px rgba(245,197,24,.50); }
}
.car__btn{ transition:background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out); }
.shot__btn{ transition:background var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out); }
.car__btn:not([disabled]):active{ transform:scale(.94); }
.shot__btn:not([disabled]):active{ transform:translateY(-50%) scale(.94); }
.shot__thumbs button{ transition:border-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out); }
.shot__thumbs button:active{ transform:scale(.94); }
.adv li{ transition:transform var(--duration-fast) var(--ease-out); }
.adv li:active{ transform:scale(.98); }
/* --- sections sombres : une lueur du token primaire, pas un aplat --- */
.doubt, .cta-final{ position:relative; overflow:hidden; }
.doubt::before, .cta-final::before{ content:""; position:absolute; left:50%; top:-30%;
width:120%; height:70%; transform:translateX(-50%); pointer-events:none;
background:radial-gradient(55% 60% at 50% 0%, rgba(245,197,24,.10), transparent 70%); }
.doubt > *, .cta-final > .wrap{ position:relative; }
.doubt{ border-radius:var(--radius-xl); }
.doubt thead th{ box-shadow:inset 0 -2px 0 var(--color-primary); } /* thead only : | heritait le filet */
.doubt table{ min-width:0; }
.doubt__grid{ display:grid; gap:var(--space-md); grid-template-columns:1fr;
margin-top:var(--space-md); }
@media (min-width:900px){
.doubt__grid{ grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:start; }
}
.doubt__fig{ margin:0; }
.doubt__fig img{ width:100%; height:auto; display:block; aspect-ratio:16/9;
object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); }
.doubt__fig figcaption{ margin-top:var(--space-xs); font-size:var(--font-size-small);
color:#CFCCC6; } /* 2 colonnes courtes : le min-width global forçait un scroll à 375px */
/* --- micro-détails --- */
.rev__ini{ box-shadow:inset 0 0 0 2px rgba(245,197,24,.65); }
.p2__ghost{ opacity:.32; }
.quote > .stars{ font-size:1.05rem; }
.faq summary::after{ color:#7A6200; }
@media (hover:hover) and (pointer:fine){
.faq summary:hover{ background:var(--color-primary-light); border-radius:var(--radius-md); }
}
/* --- motion : fondu du contenu FAQ, reveal en stagger --- */
@media (prefers-reduced-motion: no-preference){
.faq details[open] > div{ animation:faq-in var(--duration-normal) var(--ease-out); }
@keyframes faq-in{ from{ opacity:0; transform:translateY(-4px); } }
.rvl [data-reveal]{ opacity:0; transform:translateY(14px);
transition:opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.rvl [data-reveal].is-in{ opacity:1; transform:none; }
}
/* ══ « POUR ALLER PLUS LOIN » (gaf) — 2026-08-28 ═══════════════════════════
Le composant est PARTAGE : assets/css/gaf.css, mis en file par
functions.php sur ce gabarit comme sur Cellules et la home. Rien n'est
recopie ici, sinon la moindre retouche de gaf.css laisserait cette page
en arriere.
UNE divergence assumee : le fond. gaf.css declare `.gaf{background:blanc}`
parce que sur la home et les cellules le bloc fait la page de magazine
entre deux fonds. Ici il suit la FAQ, deja blanche : la section porte
`.section--tint` (#F8F7F4) et doit le garder. Les deux selecteurs pesent
(0,1,0), gaf.css est mis en file APRES garde-meuble-base.css — d'ou ce
rappel, plus specifique, qui tranche sans !important.
Contrastes recalcules sur ce fond creme : accroche #595959 6,54:1, lien
blog #7A6200 5,48:1, titre #1A1A1A 16,25:1. Tous au-dessus de 4,5:1. */
.section--tint.gaf{ background: var(--color-bg); }
|