/* Page Cellules — styles propres a la page
*
* Extrait de tests/page-cellules/index.html (maquette generee par
* build-cellules.py). Ne pas editer a la main sans reporter le changement
* dans la maquette, sinon la prochaine regeneration ecrasera la difference.
*/
/* ══ TOKENS DE LA PAGE — même méthode que la home : une page déclare dans son
:root ce qu'elle consomme, lab.css reste le socle intouché. ══ */
:root{
--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast:150ms;
--duration-normal:300ms;
--color-link:#7A6200;
/* système B+ de l'étalon garde-meuble */
--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;
--cel-line: #EFEDE7; /* bordure de carte : l'ombre porte la profondeur */
--cel-field: #999080; /* bord de champ : 3,16:1 mesuré sur blanc (le
#D8D4CB proposé par le designer plafonnait à 1,5:1 — il demandait de re-mesurer) */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* défilement doux vers #formulaire — UNIQUEMENT hors reduced-motion */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:var(--color-bg);color:var(--color-dark);
font-family:var(--font-body);font-size:16px;line-height:1.55}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(1.75rem, 4.5vw, 2.6rem);letter-spacing:-.02em}
h2{font-size:1.375rem;letter-spacing:-.01em}
h3{font-size:1rem}
p{margin:0 0 .75rem}
a{color:var(--color-primary-text)}
img{max-width:100%;height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Centrage par le padding de section (le montage retenu par la home : aucune
marge auto qu'un raccourci margin pourrait défaire). Les fonds se déclarent
SECTION PAR SECTION — jamais par :nth-child (deux pannes documentées). */
.hm-b{padding:var(--space-md) max(var(--space-sm), (100% - var(--max-width)) / 2);
background:var(--color-white)}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:48px;padding:.75rem 1.15rem;border-radius:var(--radius-md);font-weight:600;
font-size:.95rem;text-decoration:none;line-height:1.2;border:0;cursor:pointer;
transition:transform var(--duration-fast) var(--ease-out)}
.btn-primary{background:var(--color-primary);color:var(--color-dark)}
.btn-ghost{background:transparent;color:var(--color-dark);border:2px solid var(--color-dark)}
.btn-ghost svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-primary:active,.btn-ghost:active{transform:scale(.97)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--color-dark);outline-offset:2px;border-radius:var(--radius-sm)}
.section__kicker{color:#7A6200;font-family:var(--font-display);font-weight:600;
font-size:var(--font-size-small);margin:0 0 .5rem}
.section__kicker::before{content:"";display:inline-block;width:1.5rem;height:2px;
background:var(--color-primary);margin-right:.5rem;vertical-align:.25em}
/* bandeau maquette + fil d'Ariane */
.skip{position:absolute;left:-9999px;top:0;background:var(--color-white);
color:var(--color-dark);padding:.75rem 1rem;z-index:10;border-radius:var(--radius-md)}
.skip:focus{left:var(--space-sm)}
.testbar{background:var(--color-dark);color:var(--color-white);text-align:center;
font-size:.8125rem;padding:.5rem var(--space-sm)}
.testbar strong{color:var(--color-primary)}
.optnav{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap;
background:var(--color-white);border-bottom:1px solid var(--cel-line);
padding:.4rem var(--space-sm);font-size:var(--font-size-small)}
.optnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;
border-radius:999px;text-decoration:none;color:var(--color-dark)}
.optnav a[aria-current]{background:var(--color-dark);color:var(--color-white)}
.bc{font-size:var(--font-size-small);margin-bottom:var(--space-sm)}
.bc ol{list-style:none;margin:0;padding:0;display:flex;gap:.5rem}
.bc li+li::before{content:"›";margin-right:.5rem;color:var(--color-gray)}
.bc a{display:inline-block;padding:.75rem .35rem;margin:-.75rem -.35rem} /* cible 44px */
/* ---------- HERO ------------------------------------------------------------ */
.cel-hero{background:var(--color-bg);padding-top:var(--space-sm)}
.cel-hero__grid{display:grid;gap:var(--space-md);align-items:center}
@media (min-width: 950px){ .cel-hero__grid{grid-template-columns:1.1fr .9fr} }
.cel-hero h1{max-width:22ch}
.cel-hero h1 em{font-style:normal;padding-inline:.08em;
background:linear-gradient(transparent 60%, var(--color-primary) 60%,
var(--color-primary) 94%, transparent 94%)} /* MOMENT JAUNE 1/3 */
.cel-hero__lede{font-size:var(--font-size-body);max-width:52ch}
.cel-hero__adr{display:flex;align-items:center;gap:.45rem;font-size:var(--font-size-small);
color:#3A3A3A;margin:.25rem 0 0}
.cel-hero__adr svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.cel-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-smd)}
@media (max-width: 479px){ .cel-hero__cta .btn-primary,.cel-hero__cta .btn-ghost{flex:1 1 100%} }
.cel-hero__pills{list-style:none;margin:var(--space-smd) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:.5rem}
.cel-hero__pills li{background:var(--color-white);border:1px solid var(--color-gray-light);
border-radius:999px;padding:.4rem .8rem;font-size:var(--font-size-small)}
.cel-hero__media{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;
box-shadow:var(--shadow-pop)}
.cel-hero__media img{display:block;width:100%;height:auto}
/* ---------- CONCEPT : une coque, trois vies --------------------------------- */
.cel-un{
/* matière des dessins — mêmes jetons que la section des tuiles, redéclarés
ici parce que les variables --tvof-* sont scopées à .tvof-section */
--tvof-wall-a:#EFEBE3; --tvof-wall-b:#DFDAD1; --tvof-rib:#C4BFB4; --tvof-band:#FAF0D0;
--tvof-kraft-t:#E3CBA4; --tvof-kraft-a:#C9A87C; --tvof-kraft-b:#AE8D62;
--tvof-shelf:#E2DED6; --tvof-steel:#6E6A62; --tvof-wood:#D9CDB6;
--tvof-car-t:#EDEAE3; --tvof-car-a:#C6C2B9; --tvof-car-b:#ADA89E;
--tvof-glass-a:#6E7A78; --tvof-glass-b:#9AA5A2; --tvof-tyre:#2A2A28;
background:var(--color-white);padding-block:var(--space-lg)}
@media (min-width: 900px){ .cel-un{padding-block:var(--space-xl) var(--space-lg)} }
.cel-un__lede{max-width:56ch;color:#3A3A3A}
.cel-un__track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;
gap:var(--space-sm);overflow-x:auto;
scroll-snap-type:x proximity; /* jamais mandatory */
padding-bottom:var(--space-xs);scrollbar-width:none;margin-top:var(--space-md)}
.cel-un__track::-webkit-scrollbar{display:none}
.cel-un__track > *{scroll-snap-align:start;min-width:0}
@media (min-width: 768px){
.cel-un__track{grid-auto-flow:row;grid-template-columns:repeat(3, 1fr);
grid-auto-columns:unset;overflow:visible}
}
.cel-un__cell{background:var(--color-white);border:1px solid var(--cel-line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;
display:flex;flex-direction:column;margin:0}
.cel-un__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
border-bottom:1px solid var(--cel-line)}
.cel-un__fig{margin:0;background:var(--color-bg);
border-bottom:2px solid var(--cel-line)} /* la ligne de sol continue */
.cel-un__fig svg{width:100%;height:auto;display:block}
.cel-un__use{display:inline-flex;align-items:center;gap:6px;
margin:var(--space-sm) var(--space-sm) .4rem;padding:3px 10px 3px 7px;align-self:flex-start;
background:var(--color-white);border:1px solid var(--cel-line);border-radius:999px;
font-family:var(--font-display);font-size:var(--font-size-xs);font-weight:600;
color:var(--color-dark)}
.cel-un__use svg{width:14px;height:14px;fill:none;stroke:#7A6200;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.cel-un__cap{padding:0 var(--space-sm) var(--space-sm);
font-size:var(--font-size-small);color:#3A3A3A}
/* ---------- LE PONT concept → tuiles ---------------------------------------- */
.cel-pont{background:var(--color-white);text-align:center;
padding:0 var(--space-sm) var(--space-lg)}
.cel-pont::before{content:"";display:block;width:2px;height:40px;
margin:0 auto var(--space-sm);background:var(--color-gray-light)}
.cel-pont p{font-family:var(--font-display);font-weight:700;
font-size:var(--font-size-h3);max-width:30ch;margin:0 auto}
/* lien latéral vers le box, sous le callout des tuiles */
.cel-lateral{text-align:center;font-size:var(--font-size-small);color:#3A3A3A;
margin:var(--space-smd) auto 0;max-width:60ch}
.cel-lateral a{display:inline-block;padding:.75rem .35rem;margin:-.75rem -.35rem}
/* ---------- BANDE DE PREUVES ------------------------------------------------ */
.cel-proof{background:var(--color-bg);border-block:1px solid var(--cel-line);
padding:var(--space-md) max(var(--space-sm), (100% - var(--max-width)) / 2)}
.cel-proof ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;gap:var(--space-xs) var(--space-sm)}
.cel-proof li{display:inline-flex;align-items:center;gap:.45rem;
background:var(--color-white);border:1px solid var(--color-gray-light);
border-radius:999px;padding:.5rem .9rem;font-size:var(--font-size-small)}
.cel-proof li svg{width:16px;height:16px;flex:none;stroke:var(--color-dark);
fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cel-proof .stars{color:#B87A09;letter-spacing:.08em} /* ≥3:1 sur crème, mesuré sur l'étalon */
.cel-proof li a{display:inline-block;padding:.75rem .35rem;margin:-.75rem -.35rem}
.cel-proof__quote{max-width:52ch;margin:var(--space-smd) auto 0;text-align:center;
font-size:var(--font-size-small);color:#3A3A3A}
.cel-proof__quote p{margin:0}
.cel-proof__quote footer{margin-top:.35rem;font-style:normal;color:var(--color-gray)}
/* ---------- LE DUO formulaire + appel --------------------------------------- */
.cel-duo{background:var(--color-bg);
padding:var(--space-lg) max(var(--space-sm), (100% - var(--max-width)) / 2)}
@media (min-width: 900px){ .cel-duo{padding-block:var(--space-xl)} }
.cel-duo__lede{max-width:52ch;color:#3A3A3A}
.cel-duo__grid{display:grid;gap:var(--space-sm);grid-template-columns:1fr;
align-items:start;margin-top:var(--space-md)}
.cel-duo__grid > *{min-width:0}
@media (min-width: 768px){
.cel-duo__grid{grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);gap:var(--space-md)}
}
@media (min-width: 1200px){
.cel-duo__grid{grid-template-columns:minmax(0, 1fr) 400px;gap:var(--space-lg)}
}
/* mobile : l'appel d'abord (l'issue à plus forte conversion au pouce) */
@media (max-width: 767px){ .cel-call{order:-1} }
.cel-form{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)}
.cel-form__row{display:grid;gap:0 var(--space-sm);grid-template-columns:1fr}
@media (min-width: 1200px){ .cel-form__row{grid-template-columns:1fr 1fr} }
.cel-form .grp{margin-bottom:var(--space-sm);min-width:0}
.cel-form label{display:block;font-family:var(--font-display);font-weight:600;
font-size:var(--font-size-small);margin-bottom:.35rem}
.cel-form input,.cel-form select{
width:100%;min-height:48px;padding:.6rem .8rem;
font:inherit;font-size:1rem;color:var(--color-dark);
background:var(--color-white);border:1px solid var(--cel-field);
border-radius:var(--radius-md)}
.cel-form select{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.4rem}
.cel-form input:focus-visible,.cel-form select:focus-visible{
outline:none;border-color:var(--color-dark);
box-shadow:0 0 0 3px rgba(245,197,24,.35)}
/* erreurs SANS classe JS : :user-invalid (natif) + attribut hidden (natif) —
le minifieur de prod ne peut rien supprimer, aucun sélecteur n'attend une
classe absente du HTML servi */
.cel-form input:user-invalid,.cel-form select:user-invalid{border-color:#B32E2E}
/* le message n'apparaît que quand le champ est :user-invalid — pur CSS,
aucune classe posée par JS, le minifieur de prod n'a rien à supprimer */
.grp__msg{display:none;font-size:var(--font-size-small);color:#B32E2E;margin:.3rem 0 0}
.cel-form :is(input,select):user-invalid ~ .grp__msg{display:block}
.cel-form__done{margin:var(--space-sm) 0 0;font-size:var(--font-size-small);
color:#1E6B39;font-weight:600}
.cel-form fieldset{border:0;margin:0 0 var(--space-sm);padding:0;min-width:0}
.cel-form legend{font-family:var(--font-display);font-weight:600;
font-size:var(--font-size-small);margin-bottom:.35rem;padding:0}
.cel-rads{display:grid;gap:.4rem;grid-template-columns:repeat(2, 1fr)}
@media (min-width: 1200px){ .cel-rads{grid-template-columns:repeat(4, 1fr)} }
.cel-rads label{display:flex;align-items:center;gap:.5rem;min-height:48px;
margin:0;padding:.5rem .7rem;font-weight:400;font-size:var(--font-size-small);
border:1px solid var(--cel-field);border-radius:var(--radius-md);cursor:pointer;
transition:border-color var(--duration-fast) var(--ease-out)}
.cel-rads input{width:1.15rem;height:1.15rem;flex:none;accent-color:var(--color-dark)}
.cel-rads label:has(input:checked){border-color:var(--color-dark);
background:var(--color-primary-light)} /* MOMENT JAUNE 3/3, avec le halo */
.cel-rads label:has(input:focus-visible){outline:3px solid var(--color-dark);outline-offset:2px}
.cel-form__submit{width:100%;margin-top:var(--space-xs);
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)} /* MOMENT JAUNE 3/3 — le halo */
@media (hover: hover) and (pointer: fine){
.cel-form__submit: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)}
}
.cel-form__privacy{margin:var(--space-sm) 0 0;font-size:var(--font-size-xs);
color:var(--color-gray)}
.cel-call{position:relative;overflow:hidden;background:var(--color-dark);
color:var(--color-white);border-radius:var(--radius-xl);padding:var(--space-md);
box-shadow:var(--shadow-pop)}
.cel-call::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,.12), transparent 70%)}
.cel-call > *{position:relative}
@media (min-width: 768px){ .cel-call{position:sticky;top:var(--space-sm)} }
.cel-call__ico{width:48px;height:48px;border-radius:50%;
display:grid;place-items:center;margin-bottom:var(--space-sm);
background:var(--color-primary);color:var(--color-dark)}
.cel-call__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cel-call h3{color:var(--color-white);font-size:1.25rem;margin-bottom:.35rem}
.cel-call p{color:#CFCCC6;font-size:var(--font-size-small)}
.cel-call__tel{display:flex;align-items:center;justify-content:center;gap:.5rem;
min-height:52px;margin-top:var(--space-sm);padding:0 var(--space-sm);
border:2px solid var(--color-white);border-radius:var(--radius-md);
font-family:var(--font-display);font-weight:700;
font-size:clamp(1.15rem, 4vw, 1.35rem);letter-spacing:.01em;
color:var(--color-white);text-decoration:none;
transition:transform var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out)}
.cel-call__tel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.cel-call__tel:active{transform:scale(.97)}
@media (hover: hover) and (pointer: fine){
.cel-call__tel:hover{background:var(--color-white);color:var(--color-dark)}
}
.cel-call__note{margin-top:var(--space-sm);font-size:var(--font-size-small);color:#CFCCC6}
.cel-call__note a{color:var(--color-primary);display:inline-flex;align-items:center;gap:.35rem;
padding:.75rem .35rem;margin:-.75rem -.35rem} /* jaune sur #1A1A1A : 10,7:1 */
.cel-call__note a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
/* ---------- USAGES (prose) --------------------------------------------------- */
.cel-usages{background:var(--color-white);padding-block:var(--space-lg)}
.cel-usages__grid{display:grid;gap:var(--space-md);margin-top:var(--space-md)}
@media (min-width: 768px){ .cel-usages__grid{grid-template-columns:repeat(3, 1fr)} }
.cel-usages h3{font-size:1.05rem;margin-bottom:.4rem}
.cel-usages p{font-size:var(--font-size-small);color:#3A3A3A;margin:0}
/* ---------- FAQ --------------------------------------------------------------- */
.cel-faq{background:var(--color-bg);border-top:1px solid var(--cel-line)}
.cel-faq__list{max-width:44rem;margin-top:var(--space-sm)}
.cel-faq details{border-bottom:1px solid var(--color-gray-light)}
.cel-faq summary{cursor:pointer;list-style:none;padding:1.05rem .25rem;font-weight:600;
font-size:.9375rem;min-height:48px;display:flex;align-items:center;gap:.5rem}
.cel-faq summary::-webkit-details-marker{display:none}
.cel-faq summary::after{content:"+";margin-left:auto;font-weight:400;font-size:1.35rem;
color:#7A6200;line-height:1;transition:transform var(--duration-normal) var(--ease-out)}
.cel-faq details[open] summary::after{transform:rotate(45deg)}
.cel-faq details > div{padding:0 .25rem 1rem}
.cel-faq details > div p{font-size:.9rem;margin:0}
@media (hover: hover) and (pointer: fine){
.cel-faq summary:hover{background:var(--color-primary-light);border-radius:var(--radius-md)}
}
/* ---------- paragraphe GEO ----------------------------------------------------- */
.cel-geo{background:var(--color-white);border-top:1px solid var(--cel-line)}
.cel-geo p{font-size:var(--font-size-small);color:var(--color-gray);max-width:75ch;margin:0}
/* ---------- MOTION : fondu FAQ + reveal en stagger (patron .rvl de l'étalon) --- */
@media (prefers-reduced-motion: no-preference){
.cel-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}
}
/* ------------------------------------------------------------------------
PONT WPFORMS — le costume de .cel-form pose sur le markup du plugin.
Pose par scripts/portage-cellules/5-wpforms.py.
Le