/* ═══════════════════════════════════════════════════════════════════
OMER KAYIS ELEC — feuille de style
Tokens et décisions : DESIGN.md. Rien ici ne doit contredire ce fichier.
Motif signature : le pan coupé (.cut) — DESIGN.md §5.
Animations : liste FERMÉE du DESIGN.md §9. Aucun fade-in au scroll.
═══════════════════════════════════════════════════════════════════ */
/* ---------- 0. Polices auto-hébergées ----------
Elles étaient chargées par depuis fonts.googleapis.com. Sur les 8 pages,
FCP et LCP étaient confondus et calés sur cette chaîne tierce : HTML → googleapis
(CSS) → gstatic (WOFF2), soit deux résolutions DNS + deux poignées TLS avant le
premier texte. Tous les décalages CLS mesurés tombaient à l'instant où le WOFF2
arrivait (swap de la police de repli vers Archivo/Inter).
Ce sont les fichiers EXACTEMENT servis par Google (une police variable par famille,
sous-ensemble latin) : rendu inchangé, mais même origine, préchargés dans le .
Licence : SIL Open Font License 1.1 — voir assets/fonts/OFL.txt. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500 700; /* fichier variable : Google déclarait 500/600/700 sur ce même .woff2 */
font-display: swap;
src: url("../fonts/archivo-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 600; /* idem : Google déclarait 400/500/600 sur ce même .woff2 */
font-display: swap;
src: url("../fonts/inter-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- 1. Tokens ---------- */
:root {
/* Palette imposée par le client : bleu / bleu foncé / blanc (DESIGN.md §3) */
--navy: #0B2545;
--blue: #1264D6;
--white: #FFFFFF;
--paper: #F2F6FB;
--ink: #0E1A2B;
--muted: #5A6B80;
--line: #D8E2EF;
--blue-dark: #0E52B0; /* survol du bleu accent, pas un second accent */
/* Typographie */
--font-title: "Archivo", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--fs-display: clamp(38px, 5.4vw, 76px); /* plafond skill §4 : clamp(40px,6vw,96px) */
--fs-h2: clamp(27px, 3.2vw, 42px);
--fs-h3: clamp(19px, 1.6vw, 23px);
--fs-body: clamp(16px, 1.05vw, 17.5px);
--fs-small: 14.5px;
/* Rythme */
--wrap: 1200px;
--gut: clamp(20px, 4vw, 56px);
--sec: clamp(64px, 8vw, 116px);
/* Motif : taille du pan coupé */
--cut: 28px;
--r: 4px; /* rayon discret ; le motif est le biseau, pas l'arrondi */
--shadow-1: 0 1px 2px rgba(11, 37, 69, .06), 0 4px 12px rgba(11, 37, 69, .06);
--shadow-2: 0 2px 4px rgba(11, 37, 69, .08), 0 12px 28px rgba(11, 37, 69, .12);
}
@media (max-width: 640px) { :root { --cut: 20px; } }
/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-wrap: pretty;
overflow-x: clip; /* clip, pas hidden : ne crée pas de faux « 0 issue » au sweep DOM */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { outline: 1px solid rgba(11, 37, 69, .07); outline-offset: -1px; }
/* Les photos sont servies en (WebP + repli JPEG, srcset responsive).
`display: contents` fait que le ne génère aucune boîte : l'![]()
reste
l'enfant de mise en page réel de .hero-photos figure / .matiere / .cut, et les
règles de dimensionnement écrites pour l'![]()
continuent de s'appliquer telles
quelles. Sans ça, `.hero-photos img { height: 100% }` se résoudrait contre un
de hauteur auto et le hero s'effondrerait. */
picture { display: contents; }
h1, h2, h3, h4 {
font-family: var(--font-title);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.02em;
text-wrap: balance;
color: var(--navy);
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.tnum { font-feature-settings: 'tnum' 1; } /* ⛔ jamais de monospace pour les chiffres */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--navy); color: var(--white); padding: 12px 18px; font-weight: 600;
transition: top 180ms ease-out;
}
.skip:focus { top: 12px; }
/* ---------- 3. Mise en page ---------- */
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.sec { padding-block: var(--sec); }
.sec--paper { background: var(--paper); }
.sec--navy { background: var(--navy); color: #E8F0FA; }
.sec--navy h2, .sec--navy h3 { color: var(--white); }
.lede { font-size: clamp(17px, 1.35vw, 20px); color: var(--muted); max-width: 62ch; }
.sec--navy .lede { color: #C3D6EE; } /* ⛔ jamais --muted sur fond sombre */
/* Entête de section : un filet bleu court, PAS un eyebrow trait+point (tic banni §2) */
.sec-head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 54px); }
.sec-head > h1, .sec-head > h2 { position: relative; padding-top: 20px; }
.sec-head > h1::before,
.sec-head > h2::before {
content: ""; position: absolute; top: 0; left: 0;
width: 56px; height: 4px; background: var(--blue);
}
.sec-head > p { margin-top: 16px; }
/* ---------- 4. Motif signature : le pan coupé (DESIGN.md §5) ---------- */
/* Le coin haut-droit est biseauté et le vide est rempli par un triangle bleu. */
.cut { position: relative; }
/* ⚠️ `display: contents` sur ne change QUE la génération de boîte, pas le
filtrage des sélecteurs : `.cut > img` ne matche plus une image enveloppée dans un
. Le biseau disparaîtrait en silence — ni le DOM ni visual-shots ne le
voient. D'où `.cut > picture > img` ci-dessous, contrôlé par `node check-motif.mjs`. */
.cut > img,
.cut > picture > img,
.cut > .cut-fill {
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cut::after {
content: ""; position: absolute; top: 0; right: 0;
width: var(--cut); height: var(--cut); background: var(--blue);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* ⚠️ `.cut` va sur le CONTENEUR, jamais sur l'![]()
: un élément remplacé ne rend pas
ses pseudo-éléments, le biseau disparaîtrait sans que le DOM ne signale rien. */
/* Sur une surface déjà bleue (encart CTA), le triangle bleu serait invisible. */
.cta-card.cut::after { background: var(--navy); }
/* Sur une section bleu foncé, l'inverse. */
.sec--navy .cut::after { background: var(--blue); }
/* Variante coin bas-gauche, pour alterner sans répéter le même angle partout */
.cut--bl > img, .cut--bl > picture > img, .cut--bl > .cut-fill {
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut--bl::after {
top: auto; right: auto; bottom: 0; left: 0;
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* ---------- 5. Boutons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 14px 26px;
font-family: var(--font-title); font-weight: 600; font-size: 16px;
text-decoration: none; border: 2px solid transparent; border-radius: var(--r);
cursor: pointer;
transition-property: background-color, border-color, color, transform, box-shadow;
transition-duration: 160ms; transition-timing-function: ease-out;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }
.btn--onnavy { background: var(--white); color: var(--navy); }
.btn--onnavy:hover { background: #E8F0FA; color: var(--navy); transform: translateY(-2px); }
.btn:active { transform: scale(0.96); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* ---------- 6. Header (DESIGN.md §7 — le header 8/8 est interdit) ---------- */
/* Nav collée au wordmark à GAUCHE, transparente sur le hero, solidifiée au scroll. */
.hdr {
position: sticky; top: 0; z-index: 100;
background: transparent;
transition-property: background-color, box-shadow, border-color;
transition-duration: 200ms; transition-timing-function: ease-out;
border-bottom: 1px solid transparent;
}
.hdr.is-stuck { background: var(--white); box-shadow: var(--shadow-1); border-bottom-color: var(--line); }
/* Voile dégradé sous le header transparent de l'accueil.
Sans lui, le contraste dépend de ce que la photo met sous chaque mot : mesuré au
95e centile des pixels réellement sous le texte, « ELEC » tombait à 2,61:1 en 390 px
(seuil 3:1) et le lien « Accueil » à 4,27:1 en 1440 (seuil 4,5:1). Une ombre portée
ne suffit pas sur un plafond blanc : il faut abaisser le fond lui-même.
Il s'efface quand le header se solidifie. */
.hdr--onphoto::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(to bottom,
rgba(11, 37, 69, .66) 0%, rgba(11, 37, 69, .40) 58%, rgba(11, 37, 69, 0) 100%);
transition: opacity 200ms ease-out;
}
.hdr--onphoto.is-stuck::before { opacity: 0; }
.hdr-in {
width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto;
display: flex; align-items: center; gap: clamp(18px, 3vw, 44px);
min-height: 78px;
position: relative; z-index: 1; /* au-dessus du voile */
}
/* Wordmark texte tant que le logo client n'est pas reçu (LOGO.md) */
.mark { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; flex: none; }
.mark b {
font-family: var(--font-title); font-weight: 700; font-size: 21px;
letter-spacing: -0.02em; color: var(--navy); line-height: 1;
}
.mark span {
font-family: var(--font-title); font-weight: 700; font-size: 21px;
letter-spacing: -0.02em; color: var(--blue); line-height: 1;
}
/* Sur photo : voile du hero + ombre portée. Sans les deux, le plafond clair des deux
photos ramène le wordmark à 2,2:1 et « ELEC » à 1,05:1 (mesuré sur la capture). */
.hdr--onphoto:not(.is-stuck) .mark b,
.hdr--onphoto:not(.is-stuck) .mark span { text-shadow: 0 1px 3px rgba(11, 37, 69, .6); }
.hdr--onphoto:not(.is-stuck) .mark b { color: var(--white); }
.hdr--onphoto:not(.is-stuck) .mark span { color: #A9CBFF; }
/* Logo image, dès réception (48–64px desktop, ≥40px mobile — skill logo-client §3) */
.mark img { height: 54px; width: auto; outline: none; }
@media (max-width: 640px) { .mark img { height: 42px; } }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav > * { position: relative; }
.nav a, .nav button {
font-family: var(--font-title); font-weight: 600; font-size: 15.5px;
color: var(--navy); text-decoration: none; background: none; border: 0;
padding: 8px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
min-height: 40px;
}
.hdr--onphoto:not(.is-stuck) .nav a,
.hdr--onphoto:not(.is-stuck) .nav button {
color: var(--white); text-shadow: 0 1px 3px rgba(11, 37, 69, .6);
}
.nav > * > a::after, .nav > * > button::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
background: var(--blue); transform: scaleX(0); transform-origin: left;
transition: transform 180ms ease-out;
}
.nav > * > a:hover::after,
.nav > * > a[aria-current="page"]::after,
.nav > * > button:hover::after { transform: scaleX(1); }
.hdr--onphoto:not(.is-stuck) .nav > * > a::after,
.hdr--onphoto:not(.is-stuck) .nav > * > button::after { background: var(--white); }
.caret { width: 10px; height: 10px; transition: transform 180ms ease-out; }
.has-sub[data-open="true"] .caret { transform: rotate(180deg); }
/* Sous-menu Prestations : la nav reste GROUPÉE, jamais 4 services à plat */
.sub {
position: absolute; top: calc(100% + 10px); left: -14px; min-width: 268px;
background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-2);
padding: 8px; display: none; border-radius: var(--r);
}
.has-sub[data-open="true"] .sub { display: block; }
.sub a {
display: block; padding: 11px 14px; font-size: 15px; font-weight: 500;
font-family: var(--font-body); color: var(--ink); border-radius: 3px;
transition: background-color 140ms ease-out, color 140ms ease-out;
}
.sub a::after { display: none; }
.sub a:hover { background: var(--paper); color: var(--blue); }
.hdr-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Un SEUL bouton à droite : le duo « tel outline + devis plein » est le tic 8/8 (§2) */
.hdr-tel { white-space: nowrap; }
/* ---------- 7. Burger + tiroir mobile ---------- */
.burger {
display: none; width: 46px; height: 46px; margin-right: 0;
align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.burger span { display: block; width: 21px; height: 2px; background: var(--navy); position: relative; }
.burger span::before, .burger span::after {
content: ""; position: absolute; left: 0; width: 21px; height: 2px; background: var(--navy);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.hdr--onphoto:not(.is-stuck) .burger { border-color: rgba(255,255,255,.45); }
.hdr--onphoto:not(.is-stuck) .burger span,
.hdr--onphoto:not(.is-stuck) .burger span::before,
.hdr--onphoto:not(.is-stuck) .burger span::after { background: var(--white); }
/* Le tiroir couvre TOUT, header compris, et se referme (précédent : burger enfermé) */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-veil {
position: absolute; inset: 0; background: rgba(11, 37, 69, .55);
opacity: 0; transition: opacity 220ms ease-out; border: 0; width: 100%; cursor: pointer;
}
.drawer[data-open="true"] .drawer-veil { opacity: 1; }
.drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
background: var(--white); padding: 22px; overflow-y: auto;
transform: translateX(100%); transition: transform 220ms ease-out;
display: flex; flex-direction: column; gap: 6px;
}
.drawer[data-open="true"] .drawer-panel { transform: translateX(0); }
.drawer-close {
align-self: flex-end; width: 46px; height: 46px; background: transparent;
border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
font-size: 22px; line-height: 1; color: var(--navy); margin-bottom: 10px;
}
.drawer-panel nav { display: flex; flex-direction: column; gap: 6px; }
.drawer-panel a {
font-family: var(--font-title); font-weight: 600; font-size: 17px; color: var(--navy);
text-decoration: none; padding: 13px 6px; border-bottom: 1px solid var(--line); min-height: 44px;
}
.drawer-panel a.is-sub { font-family: var(--font-body); font-weight: 500; font-size: 15.5px; padding-left: 20px; color: var(--muted); }
/* ⚠️ `.drawer-panel a` (0-1-1) l'emportait sur `.btn--primary` (0-1-0) : le numéro sortait
en navy sur bleu (2,8:1, lu comme un bouton désactivé) avec le filet et le padding des
liens de menu. On rétablit le bouton. Aucun rapport DOM ne voit ça. */
.drawer-panel a.btn {
margin-top: 16px; color: var(--white); padding: 14px 26px;
border-bottom: 2px solid transparent; font-size: 16px; justify-content: center;
}
.drawer-panel a.btn:hover { color: var(--white); }
@media (max-width: 1040px) {
.nav { display: none; }
.hdr-tel { display: none; }
.burger { display: inline-flex; }
.hdr-end { gap: 10px; margin-right: 0; }
.hdr-in { min-height: 68px; }
}
/* ---------- 7 bis. HERO — direction A « Les deux adresses » (DESIGN.md §12) ---------- */
/* Deux photos côte à côte (habitat / local pro) séparées par un filet bleu, traversées
en dessous par une bande blanche qui porte le H1. Le texte n'est JAMAIS sur la photo :
c'est ce qui règle le contraste une bonne fois, et ce qui nous sort de la composition
« photo assombrie + texte à gauche » que 5 des 8 sites d'électricien font déjà. */
.hdr--over { position: fixed; top: 0; left: 0; right: 0; }
.hero { position: relative; background: var(--navy); }
/* Voile haut du hero. Les deux photos ont un plafond clair (spots + béton blanc) : sans lui,
le wordmark blanc tombe à 2,2:1 et « ELEC » à 1,05:1 sur la photo, soit invisible.
Le voile ne concerne QUE la bande du header et s'efface avant le sujet : ce n'est pas
la « photo assombrie + texte dessus » bannie au §2, le H1 reste sur la bande blanche. */
.hero-photos { position: relative; }
.hero-photos::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 2;
background: linear-gradient(to bottom, rgba(11, 37, 69, .78) 0%, rgba(11, 37, 69, .55) 40%, rgba(11, 37, 69, 0) 100%);
pointer-events: none;
}
.hero-photos { display: grid; grid-template-columns: 56fr 44fr; height: clamp(430px, 64vh, 610px); }
.hero-photos figure { position: relative; margin: 0; overflow: hidden; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; outline: none; }
.hero-photos figure + figure::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: var(--blue); z-index: 3;
}
.hero-lab {
position: absolute; top: 96px; left: 0; z-index: 4;
background: rgba(11, 37, 69, .9); color: var(--white);
font-family: var(--font-title); font-weight: 600; font-size: 13px;
letter-spacing: .02em; padding: 8px 15px;
}
.hero-band {
background: var(--white); position: relative; z-index: 5;
padding: clamp(30px, 4vw, 48px) 0 clamp(34px, 4.4vw, 54px);
}
.hero-band-in {
display: grid; grid-template-columns: 1.35fr .65fr;
gap: clamp(26px, 4vw, 60px); align-items: end;
}
.hero-band h1 { font-size: clamp(33px, 4.3vw, 60px); }
.hero-band p { color: var(--muted); margin-top: 16px; max-width: 56ch; }
.hero-band .act { display: grid; gap: 14px; justify-items: start; }
.tel-big {
font-family: var(--font-title); font-weight: 700; font-size: clamp(20px, 2vw, 25px);
color: var(--navy); text-decoration: none; letter-spacing: -.01em;
}
.tel-big:hover { color: var(--blue); }
@media (max-width: 900px) {
/* La césure verticale EST la direction : on la garde, mais en portrait, sinon les deux
photos deviennent des bandeaux illisibles. Hauteur portée par la RANGÉE et pas par
chaque figure : sinon les colonnes 56/44 prennent des hauteurs différentes et ne
s'alignent plus en bas. */
.hero-photos { height: clamp(300px, 90vw, 520px); }
.hero-photos figure { height: 100%; }
.hero-photos figure + figure::before { width: 4px; }
/* Étiquettes en bandeau de pied : au milieu de la photo, elles la mangeaient.
min-height commune, sinon celle de droite passe à 2 lignes sous 375 px et les deux
bandeaux décrochent l'un par rapport à l'autre. */
/* HAUTEUR FIXE, pas min-height en em : celle de droite passe à 2 lignes sous 390 px et
les deux bandeaux décrochaient de 9 px — le bas du hero partait en marche d'escalier.
Padding latéral 12 px : à 390 px le texte de droite finissait à 7 px du bord d'écran. */
.hero-lab {
top: auto; bottom: 0; left: 0; right: 0; text-align: center;
background: rgba(11, 37, 69, .92); font-size: 12px; padding: 8px 12px;
line-height: 1.3; height: 48px;
display: flex; align-items: center; justify-content: center;
}
.hero-band-in { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 480px) {
.hero-lab { font-size: 11px; padding: 7px 10px; letter-spacing: 0; height: 44px; }
/* Sur un écran 375x667 (iPhone SE, toujours en service) le bouton de devis tombait
46 px sous le pli. On rend ces pixels sur la hauteur des photos et le rembourrage
de la bande : la césure verticale reste largement lisible. */
.hero-photos { height: clamp(270px, 78vw, 520px); }
.hero-band { padding-top: 20px; }
}
/* ---------- 8. Deux colonnes par clientèle (la section signature de l'accueil) ---------- */
/* Remplace la grille de 4 cartes : les 5 déclinaisons sont épuisées (DESIGN.md §2) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.duo-col > .cut { margin-bottom: 26px; }
.duo-col h3 { margin-bottom: 12px; }
.duo-col p { color: var(--muted); margin-bottom: 14px; }
.duo-col .duo-list { list-style: none; padding: 0; display: grid; gap: 9px; }
.duo-col .duo-list li {
padding-left: 20px; position: relative; font-size: 16px; color: var(--ink);
}
.duo-col .duo-list li::before {
content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 2px; background: var(--blue);
}
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
/* ---------- 9. Rangée de photos à retrait croissant (re-composition ELECMAN §1) ---------- */
.rang { display: grid; grid-template-columns: 1.25fr 1.25fr .9fr; gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.rang figure { margin: 0; }
.rang figure:nth-child(2) { margin-left: clamp(0px, 2vw, 26px); }
.rang figure:nth-child(3) { margin-left: clamp(0px, 4vw, 52px); }
/* Les trois sources ont des ratios différents (4:3, 16:9, 3:2) : laissées libres, elles
finissaient à 312 / 219 / 165 px de haut, soit 147 px d'escalier en bas de rangée et
trois légendes à trois altitudes — ça se lit comme une grille cassée, pas comme un
décalage voulu. Hauteur commune : le SEUL décalage reste le retrait gauche (DESIGN §8). */
.rang figure img { width: 100%; height: clamp(190px, 21vw, 300px); object-fit: cover; }
.rang figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 860px) {
.rang { grid-template-columns: 1fr; }
.rang figure:nth-child(2), .rang figure:nth-child(3) { margin-left: 0; }
.rang figure img { height: clamp(210px, 52vw, 320px); }
}
/* ---------- 10. Tableau de faits (remplace le trio « 3 avantages + icônes ») ---------- */
.faits { border-top: 2px solid var(--navy); }
.faits > div {
display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(16px, 3vw, 46px);
padding: 24px 0; border-bottom: 1px solid var(--line);
}
.faits dt { font-family: var(--font-title); font-weight: 600; font-size: 17px; color: var(--navy); }
.faits dd { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .faits > div { grid-template-columns: 1fr; gap: 8px; } }
/* ---------- 11. Zone d'intervention : carte SVG + colonnes typographiques ---------- */
/* ⛔ Jamais un conteneur de carte vide (raté AGORA). ⛔ « 50 km » jamais dans un titre. */
.zone { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.zone-map { background: var(--paper); padding: clamp(18px, 2.5vw, 30px); }
.zone-map svg { width: 100%; height: auto; }
.zone-list { columns: 2; column-gap: 34px; list-style: none; padding: 0; }
.zone-list li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
@media (max-width: 860px) {
.zone { grid-template-columns: 1fr; }
/* En une colonne, la carte tombe à 314 px de large : les libellés de communes étaient
rendus à 7,6 px, donc illisibles — une carte qu'on ne peut pas lire ne sert à rien.
On supprime le rembourrage (le fond est déjà celui de la section) et on remonte les
corps de texte du SVG, marge de sécurité vérifiée sur les collisions de libellés. */
.zone-map { padding: 0; background: none; }
.zone-map .lbl { font-size: 17px; }
.zone-map .lbl-m { font-size: 22px; }
.zone-map .cap { font-size: 14.5px; }
}
@media (max-width: 420px) { .zone-list { columns: 1; } }
/* ---------- 12. Encart CTA décalé, à cheval sur le footer (remplace le bandeau 6/8) ---------- */
.cta-band { padding-top: var(--sec); padding-bottom: 0; }
.cta-card {
background: var(--blue); color: var(--white);
display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(22px, 3vw, 46px); align-items: center;
padding: clamp(30px, 4vw, 52px);
margin-bottom: calc(var(--sec) * -0.42); /* chevauche le footer */
position: relative; z-index: 2;
}
.cta-card h2 { color: var(--white); }
.cta-card p { color: #EDF4FE; margin-top: 12px; } /* 5,1:1 sur --blue ; #DCE9FC tombait à 4,48 (AA = 4,5) */
.cta-card .btn-row { justify-content: flex-end; }
@media (max-width: 820px) {
.cta-card { grid-template-columns: 1fr; }
.cta-card .btn-row { justify-content: flex-start; }
}
/* ---------- 13. Footer 2 blocs (le footer 4 colonnes est le même partout — §2) ---------- */
.ftr {
background: var(--navy); color: #C3D6EE;
padding-top: calc(var(--sec) * 0.75); padding-bottom: 34px;
clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% 100%, 0 100%);
}
.ftr-in { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(30px, 5vw, 70px); }
.ftr-mark { font-family: var(--font-title); font-weight: 700; font-size: clamp(30px, 4.2vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.ftr-mark span { color: #7FB2FF; }
.ftr-contact { margin-top: 22px; display: grid; gap: 8px; }
.ftr-contact a { color: var(--white); font-weight: 600; text-decoration: none; font-size: 18px; }
.ftr-contact a:hover { color: #7FB2FF; text-decoration: underline; }
.ftr-zone { margin-top: 18px; max-width: 46ch; }
.ftr-nav { list-style: none; padding: 0; display: grid; gap: 10px; }
.ftr-nav a { color: #C3D6EE; text-decoration: none; font-size: 15.5px; }
.ftr-nav a:hover { color: var(--white); text-decoration: underline; }
.ftr-legal {
margin-top: clamp(34px, 5vw, 58px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: #93AEd0;
}
.ftr-legal a { color: #93AEd0; }
@media (max-width: 760px) { .ftr-in { grid-template-columns: 1fr; } }
/* Le logo client, dès réception : EN TRÈS GRAND dans le footer (skill logo-client §3) */
.ftr-logo img { max-width: 300px; outline: none; }
/* ---------- 14. Formulaire ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-title); font-weight: 600; font-size: 15px; color: var(--navy); }
.field input, .field textarea, .field select {
width: 100%; padding: 13px 15px; min-height: 50px;
border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 100, 214, .14); outline: none;
}
.field .hint { font-size: 13.5px; color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
/* ---------- 14 bis. Bandeau de confirmation d'envoi ---------- */
.sent {
display: none; margin-bottom: 26px; padding: 18px 22px;
background: #E7F1FE; border-left: 5px solid var(--blue); color: var(--navy);
}
.sent b { font-family: var(--font-title); }
body[data-sent="1"] .sent { display: block; }
/* ---------- 15. Divers ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 66px); align-items: start; }
/* En-tête de page service : asymétrie 62/38 (DESIGN.md §8) */
.split--62 { grid-template-columns: 62fr 38fr; align-items: center; }
@media (max-width: 860px) { .split, .split--62 { grid-template-columns: 1fr; } }
.resu { list-style: none; padding: 0; display: grid; gap: 18px; }
.resu li { padding-left: 26px; position: relative; }
.resu li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 3px; background: var(--blue);
}
.resu b { font-family: var(--font-title); display: block; color: var(--navy); margin-bottom: 3px; }
.resu span { color: var(--muted); font-size: 15.5px; }
.card-plain { background: var(--white); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); }
.matiere { position: relative; }
.matiere img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.crosslinks { display: flex; flex-wrap: wrap; gap: 12px; }
.crosslinks a {
font-family: var(--font-title); font-weight: 600; font-size: 15.5px; text-decoration: none;
border: 1px solid var(--line); padding: 13px 19px; color: var(--navy); border-radius: var(--r);
transition: border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
min-height: 48px; display: inline-flex; align-items: center; gap: 11px;
}
/* Chevron : sans lui, la pastille se lit comme une étiquette, pas comme un lien vers la
page de prestation — or ce sont les seules portes d'entrée des pages qui vendent. */
.crosslinks a::after {
content: ""; width: 7px; height: 7px; flex: none;
border-top: 2px solid var(--blue); border-right: 2px solid var(--blue);
transform: rotate(45deg); transition: none;
}
.crosslinks a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
/* Section « Nos autres domaines » : un H2 et 3 pastilles dans 116 px de padding haut ET
bas se lisaient comme une section vide (5 pages sur 8). Rythme resserré. */
.sec--links { padding-block: clamp(44px, 5vw, 76px) clamp(34px, 3.6vw, 54px); }
.sec--links .sec-head { margin-bottom: clamp(20px, 2.2vw, 28px); }
/* ---------- 16. Accessibilité mouvement (DESIGN.md §9) ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
}