/* ==========================================================
Un choix brillant, direction visuelle, septembre 2026
Palette tiree du logo : marine #1E3353, rose #C48B7F,
creme #F8F4EF. Rien d'invente.
Formes : surfaces et images a angle vif (rayon 0),
controles en pilule. Une seule regle, appliquee partout.
Typo : Recia ne sert qu'a quatre moments (le titre d'accueil,
la phrase rose, la citation vedette, le numero de telephone). Switzer porte tout
le reste, y compris les titres de section.
========================================================== */
@font-face{font-family:'Recia';src:url('fonts/recia-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:swap}
/* Deux familles de jetons, jamais melangees :
- le TEXTE et les SURFACES basculent entre clair et sombre ;
- les CHAMPS de couleur (rose, marine) gardent leur propre
paire fond/texte dans les deux modes, pour qu'aucune section
ne s'inverse au milieu de la page. */
:root{
--ink:#1e3353; --ink-soft:#56647b;
--base:#f8f4ef; --surface:#ffffff; --edge:#e6ded4;
--rose:#c48b7f; --rose-line:#e3cec7; --rose-stroke:#a86b5e;
--field-rose:#cd988c; --on-rose:#1e3353;
--field-navy:#1e3353; --on-navy:#f8f4ef; --on-navy-soft:#cfd8e8;
--btn-bg:#1e3353; --btn-fg:#f8f4ef; --btn-bg-h:#2c4670;
--scrim:19,30,48;
--err:#a03226; --field-line:#7a8599;
color-scheme:light;
--wrap:1180px;
/* Gouttiere : jamais plus etroite que l'encoche d'un telephone en paysage
(viewport-fit=cover dans ), sinon le texte passe dessous. */
--gut:max(clamp(20px,4vw,44px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
--r-control:999px;
/* Echelles : 5 tailles de texte courant, 2 espacements de section. */
--fs-label:13px; --fs-small:15px; --fs-ui:16px; --fs-body:17px; --fs-h3:20px;
--sec:clamp(56px,7vw,100px); --sec-lg:clamp(72px,9vw,136px);
--t:.15s ease; --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
:root{
--ink:#f4efe8; --ink-soft:#b6bccb;
--base:#101a29; --surface:#16233a; --edge:#27354c;
--rose:#d6a89d; --rose-line:#3a4b66; --rose-stroke:#d6a89d;
--field-rose:#7c4334; --on-rose:#fbeee9;
--field-navy:#0b1220; --on-navy:#f4efe8; --on-navy-soft:#c2cbdd;
--btn-bg:#f4efe8; --btn-fg:#101a29; --btn-bg-h:#ffffff;
--err:#f2a094; --field-line:#8a95a8;
color-scheme:dark;
}
}
*,*::before,*::after{box-sizing:border-box}
/* En-tete colle : une ancre doit s'arreter sous lui, pas derriere. */
html{scroll-padding-top:124px}
@media(max-width:900px){html{scroll-padding-top:98px}}
@media(max-width:720px){html{scroll-padding-top:78px}}
body{margin:0;background:var(--base);color:var(--ink);
font:400 var(--fs-body)/1.6 'Switzer',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
/* Les photos sont servies en AVIF avec repli WebP via ; l'enveloppe ne cree aucune boite. */
.hero-img picture,.cell-photo picture,.who-sign picture,.band picture{display:contents}
/* ne doit jamais avoir de boite : sinon, dans une grille ou un flex avec gap, il prend une place vide. */
picture>source{display:none}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
/* Une seule graisse forte sur le site : 600. Le fichier 700 n'est plus charge (19 Ko). */
b,strong{font-weight:600}
/* Interligne serre par defaut : sans lui, un titre sur deux lignes herite de 1,6. */
h1,h2{line-height:1.12}h3{line-height:1.25}
p{margin:0}
p,li,blockquote,figcaption,summary{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.serif{font-family:'Recia',Georgia,serif;font-weight:500;letter-spacing:-.025em}
/* ---- controles ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
padding:0 26px;border-radius:var(--r-control);background:var(--btn-bg);color:var(--btn-fg);
font-weight:600;font-size:var(--fs-ui);text-decoration:none;border:1px solid var(--btn-bg);
transition:background-color var(--t),border-color var(--t),transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.lnk{display:inline-flex;align-items:center;min-height:46px;font-weight:600;font-size:var(--fs-ui);
text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
text-decoration-color:var(--rose);transition:text-decoration-color var(--t)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-rose a:focus-visible{outline-color:var(--on-rose)}
.on-ink a:focus-visible,.on-ink summary:focus-visible{outline-color:var(--on-navy)}
.skip{position:absolute;left:16px;top:-100px;z-index:80;background:var(--surface);
padding:12px 18px;border-radius:var(--r-control);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* ---- entete ---- */
.hd{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--edge)}
.hd-in{display:flex;align-items:center;gap:28px;height:112px}
.hd-logo{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto}
/* Logo horizontal avec slogan (guide de marque v6), ramene de 380 a 320 px
pour un en-tete moins haut.
A 320 px le logo fait ~83 px de haut et les majuscules du slogan ~6 px ;
c'est le plancher de lisibilite, ne pas descendre plus bas avec le slogan.
En-tete a 112 px : la zone de protection est reduite dans la meme proportion.
Sous 900px, l'en-tete passe au logo compact (voir ). */
.hd-logo img{width:320px;height:auto}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:26px;flex:0 1 auto}
.hd-nav a:not(.btn){font-size:var(--fs-ui);font-weight:500;text-decoration:none;min-height:44px;
display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:7px;
text-decoration-thickness:2px;text-decoration-color:transparent;transition:text-decoration-color var(--t)}
.hd-tel{font-variant-numeric:tabular-nums;white-space:nowrap}
.hd-in.wrap{max-width:1320px}
/* Liens du menu : les quatre en ligne des 1250 px (logo a 320 px).
En dessous, ils passent tous dans le bouton Menu, jamais par paliers :
un lien retire sans repli laissait A propos et Secteurs inaccessibles
entre 1024 et 1249 px (audit du 24 sept.). */
@media(max-width:1249px){.hd-nav a.hd-hide{display:none}}
@media(max-width:900px){.hd-in{height:86px}.hd-logo img{width:258px}}
/* Sous 720px l'entete garde le telephone seul : l'action principale
descend dans une barre fixe, qui est la vraie façon d'appeler ou
d'ecrire quand on tient son telephone. */
@media(max-width:720px){
.hd-nav .btn{display:none}
.hd-in{height:66px;gap:14px}
.hd-logo img{width:176px}
}
/* Sous 400px, le logo et le telephone ne tiennent plus cote a cote. */
@media(max-width:400px){.hd-logo img{width:152px}}
/* Telephone groupe avec le bouton (ordinateur et tablette) : un trait fin
separe la navigation des deux facons de joindre Julianne. Sous 720px,
c'est le .hd-tel d'origine qui reste affiche, sans changement. */
.hd-nav a.hd-call{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
padding-left:26px;border-left:1px solid var(--edge);min-height:44px}
.hd-call-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:var(--base);color:var(--ink);transition:background var(--t)}
.hd-call-tx{display:flex;flex-direction:column;line-height:1.15}
.hd-call-tx small{font-size:var(--fs-label);font-weight:500;color:var(--ink-soft)}
.hd-call-tx b{font-size:var(--fs-ui);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.hd-nav a.hd-call:hover .hd-call-ic{background:var(--edge)}}
@media(min-width:721px){.hd-nav a.hd-tel{display:none}}
@media(max-width:720px){.hd-nav a.hd-call{display:none}}
/* Bascule de langue dans l'en-tete, ordinateur et tablette seulement.
Sous 720px, elle reste au pied de page (l'en-tete mobile est plein). */
.hd-nav a.hd-lang{font-size:var(--fs-label);font-weight:600;letter-spacing:.08em}
@media(max-width:720px){.hd-nav a.hd-lang{display:none}}
/* L'en-tete doit tenir sans deborder a toutes les largeurs : on resserre
les espacements, puis on retire l'icone du telephone sur tablette. */
@media(min-width:721px){.hd-nav{gap:18px}.hd-nav a.hd-call{padding-left:18px}}
@media(min-width:721px) and (max-width:1023px){.hd-nav{gap:16px}.hd-nav a.hd-call{padding-left:16px}}
@media(min-width:721px) and (max-width:820px),(min-width:901px) and (max-width:1099px){.hd-call-ic{display:none}}
@media(min-width:721px) and (max-width:780px){.hd-nav{gap:12px}.hd-nav a.hd-call{padding-left:12px}}
@media(min-width:1024px) and (max-width:1365px){.hd-nav{gap:14px}.hd-nav a.hd-call{padding-left:14px}}
.bar{display:none}
@media(max-width:720px){
.bar{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed;inset:auto 0 0 0;z-index:50;
background:var(--surface);border-top:1px solid var(--edge);
padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px))}
.bar .btn{min-height:46px}
.ft{padding-bottom:calc(34px + 72px + env(safe-area-inset-bottom,0px))}
/* Le focus clavier et les ancres s'arrêtent au-dessus de la barre, pas derrière. */
html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* ---- 1. accueil : bande asymetrique, image a fond perdu ---- */
.hero{background:var(--base);overflow:clip}
/* La colonne de gauche s'aligne sur la grille de la page ;
l'image part a fond perdu jusqu'au bord droit de l'ecran. */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
gap:clamp(32px,5vw,64px);align-items:center;
padding:clamp(44px,5vw,76px) 0 clamp(44px,5vw,76px) max(var(--gut),calc((100% - var(--wrap))/2))}
.hero h1{font-size:clamp(32px,3.4vw,49px);line-height:1.06;max-width:30ch}
.hero p{margin-top:24px;max-width:27rem;font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-img{position:relative}
.hero-img img{width:100%;height:clamp(340px,46vw,560px);object-fit:cover;object-position:center 45%}
@media(max-width:860px){
.hero-in{grid-template-columns:1fr;padding:36px var(--gut) 0;gap:30px}
.hero-img{margin-inline:calc(var(--gut)*-1)}
.hero-img img{height:300px}
}
/* ---- 3. Julianne : titre, corps sur deux colonnes, signature ---- */
.who{background:var(--surface)}
/* Bloc editorial empile : titre pleine mesure, corps sur deux
colonnes, puis une signature avec un portrait assez présent pour
rendre la présentation personnelle au premier coup d'oeil. */
/* Texte a gauche, portrait de Julianne en grand a droite : c'est
l'atout de confiance de la page, il ne reste pas en vignette. */
.who-in{padding-block:var(--sec-lg);display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,320px);grid-template-rows:auto 1fr;
column-gap:clamp(40px,6vw,96px);align-items:start}
.who h2{grid-column:1;font-size:clamp(26px,2.8vw,36px);line-height:1.14;max-width:24ch}
.who-body{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(22px,3vw,44px);margin-top:30px}
.who-body p{color:var(--ink-soft)}
.who-sign{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:14px}
.who-sign img{width:100%;height:auto;aspect-ratio:360/440;object-fit:cover;object-position:center 22%}
.who-sign b{display:block;font-size:var(--fs-body)}
.who-sign span{font-size:var(--fs-small);color:var(--ink-soft)}
@media(max-width:820px){
.who-in{grid-template-columns:1fr;grid-template-rows:none}
.who-body{grid-template-columns:1fr;gap:18px}
.who-sign{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;margin-top:34px;
padding-top:24px;border-top:1px solid var(--edge)}
.who-sign img{width:130px}}
/* ---- 4. services : grille bento (3 cellules) + liste des services secondaires ---- */
.srv{background:var(--base);padding-block:var(--sec)}
.srv h2{font-size:clamp(26px,2.8vw,36px);line-height:1.14;max-width:18ch}
.srv>.wrap>p{margin-top:18px;max-width:46ch;color:var(--ink-soft)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.cell{position:relative;background:var(--surface);border:1px solid var(--edge);padding:26px;
display:flex;flex-direction:column}
.cell h3{font-size:var(--fs-h3);line-height:1.25}
.cell p{margin-top:10px;font-size:var(--fs-ui);color:var(--ink-soft)}
.cell-photo{padding:0;overflow:clip}
.cell-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* Fond plein SOUS le degrade : la legende reste lisible meme si
la photo ne charge pas, et le contraste est mesurable. */
.cell-photo .cap{position:relative;margin-top:auto;padding:24px 24px 22px;
background-color:rgba(19,30,48,.86);
background-image:linear-gradient(to top,rgba(19,30,48,.45),rgba(19,30,48,0));color:#f8f4ef}
.cell-photo .cap h3,.cell-photo .cap p{color:#f8f4ef}
.cell-a{grid-column:span 2;grid-row:span 2;min-height:340px}
.cell-b{grid-column:span 2}
.cell-c{grid-column:span 2;min-height:252px}
.cell-tint{background:var(--field-rose);border-color:var(--field-rose)}
.cell-tint h3,.cell-tint p{color:var(--on-rose)}
/* Trois services secondaires : une liste, pas une rangee de cartes egales. */
.srv-more{margin-top:40px;max-width:900px}
.srv-more article{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:8px clamp(20px,4vw,56px);align-items:baseline;padding:18px 0}
.srv-more article+article{border-top:1px solid var(--edge)}
.srv-more h3{font-size:var(--fs-h3);line-height:1.3}
.srv-more p{font-size:var(--fs-ui);color:var(--ink-soft)}
@media(max-width:860px){
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell-a{grid-column:span 2;grid-row:auto;min-height:280px}
.cell-b,.cell-c{grid-column:span 2}
.srv-more article{grid-template-columns:1fr}
}
/* ---- 5. la phrase : champ rose pleine largeur ---- */
.claim{background:var(--field-rose);color:var(--on-rose);padding-block:var(--sec)}
.claim .serif{font-size:clamp(32px,5vw,58px);line-height:1.08;max-width:16ch}
.claim p{margin-top:24px;font-size:clamp(17px,1.6vw,19px);max-width:44ch;color:var(--on-rose)}
/* ---- 6. temoignages : colonnes, filets roses, pas de cartes ---- */
.says{background:var(--surface);padding-block:var(--sec-lg)}
.says h2{font-size:clamp(26px,3vw,36px);line-height:1.12;max-width:20ch}
/* Une voix au premier plan, deux en retrait et decalees vers le bas. */
.says-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
column-gap:clamp(32px,6vw,96px);row-gap:34px;margin-top:48px;align-items:start}
.says figure{margin:0;border-top:2px solid var(--rose);padding-top:22px}
.says figure:first-child{grid-row:1;border-top:0;padding-top:0}
.says figure:nth-child(3){grid-column:2;grid-row:2}
.says-grid .src{grid-column:1;grid-row:2;align-self:start;justify-self:start}
.says figure:first-child blockquote{font-family:'Recia',Georgia,serif;font-weight:500;
font-size:clamp(26px,3.1vw,40px);line-height:1.18;letter-spacing:-.02em;max-width:22ch}
.says figure:first-child figcaption{margin-top:26px}
.says figure:nth-child(2){margin-top:clamp(0px,5vw,72px)}
.says blockquote{margin:0;font-size:var(--fs-body);line-height:1.55}
.says figcaption{margin-top:16px;font-size:var(--fs-small);color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.says .fb{width:22px;height:22px;flex:none}
.says figcaption b{display:block;font-size:var(--fs-small);color:var(--ink)}
@media(max-width:820px){.says-grid{grid-template-columns:1fr;gap:28px}
.says figure:first-child,.says figure:nth-child(3),.says-grid .src{grid-column:auto;grid-row:auto}
.says figure:nth-child(2){margin-top:0}}
/* Frequences : une phrase sous la liste des services (ancienne section 7). */
.srv-freq{margin-top:28px;max-width:62ch;font-size:var(--fs-ui);color:var(--ink-soft)}
.srv-freq b{color:var(--ink);font-weight:600}
/* ---- 8. deroulement : composition asymetrique ----
Titre et contenu cales a gauche, colonnes inegales, pastilles de trois
tailles posees sur une meme ligne de base, filet qui part de la premiere
pastille et file jusqu'au bord droit. La photo de fond est decentree a droite. */
.flow{background:var(--surface);padding-block:var(--sec)}
.flow h2{font-size:clamp(26px,3vw,36px);line-height:1.12;max-width:16ch}
/* Trois etapes : filet continu, un point par etape, le verbe comme titre.
Pas d'images (elles n'illustraient pas l'etape). */
.steps{position:relative;list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;
display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:clamp(24px,3.5vw,56px)}
.steps::before{content:"";position:absolute;left:6px;right:0;top:0;height:1px;background:var(--edge)}
.steps li{position:relative;padding-top:34px}
.steps li::before{content:"";position:absolute;top:0;left:0;
width:13px;height:13px;margin-top:-6px;border-radius:50%;background:var(--ink)}
.steps h3{margin-top:14px;font-size:var(--fs-h3)}
.steps p{margin-top:10px;font-size:var(--fs-ui);color:var(--ink-soft);max-width:30ch}
.flow .btn{margin-top:clamp(36px,4vw,52px)}
@media(max-width:760px){
.steps{grid-template-columns:1fr;gap:44px}
.steps::before,.steps li::before{display:none}
.steps li{padding-top:0}}
/* ---- 9. secteurs : champ marine ---- */
.zone{background:var(--field-navy);color:var(--on-navy);padding-block:var(--sec)}
.zone-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,70px)}
.zone h2{font-size:clamp(26px,3.2vw,40px);line-height:1.12;max-width:14ch}
.zone p{margin-top:18px;color:var(--on-navy-soft);max-width:38ch}
/* Mobile: a light rose field with navy text keeps the long town list airy. */
@media(max-width:720px){
.zone{--field-navy:#f2e3de;--on-navy:#1e3353;--on-navy-soft:#56647b}
}
/* Villes : deux colonnes aerees, un seul filet au-dessus du groupe. */
.towns{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 32px;align-content:start;border-top:1px solid currentColor}
.towns li{padding:9px 0;font-size:var(--fs-body);font-weight:500}
@media(max-width:820px){.zone-in{grid-template-columns:1fr;gap:26px}}
/* Carte simplifiee (ordinateur) : dessinee en SVG dans la page, villes placees
d'apres leurs coordonnees. Sous 1001 px, la liste reste et la carte disparait. */
.zone-in{align-items:center}
.map{display:block;width:100%;height:auto;overflow:visible;font-family:'Switzer',system-ui,sans-serif}
.map-r{fill:none;stroke:var(--on-navy-soft);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.map-r-main{stroke-width:2.5}
.map-d{fill:var(--rose)}
.map-ott{fill:none;stroke:var(--on-navy-soft);stroke-width:1.5;opacity:.7}
.map-l{fill:var(--on-navy);font-size:18px;font-weight:500;letter-spacing:-.01em}
.map-hint{fill:var(--on-navy-soft);font-size:14px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.zone-note{margin-top:14px;font-size:var(--fs-small);color:var(--on-navy-soft);max-width:38ch}
/* La carte suit la largeur de sa colonne : sous 1000 px ses etiquettes tombaient a 10 px.
Elle ne s'affiche donc qu'a partir de 1001 px ; en dessous, la liste des villes la remplace. */
@media(min-width:1001px){.zone .towns{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:1000px){.map,.zone-note{display:none}}
/* ---- 10. questions ---- */
.faq{background:var(--surface);padding-block:var(--sec)}
.faq h2{font-size:clamp(26px,3vw,36px);line-height:1.12;max-width:22ch}
.faq-list{margin-top:34px;max-width:78ch}
.faq details{border-top:1px solid var(--edge)}
.faq details:last-child{border-bottom:1px solid var(--edge)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:20px;min-height:64px;font-size:var(--fs-body);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:13px;height:13px;
border-right:2px solid var(--rose-stroke);border-bottom:2px solid var(--rose-stroke);
transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 0 22px;color:var(--ink-soft);max-width:68ch}
/* ---- 11. contact ---- */
.end{background:var(--base);padding-block:var(--sec)}
.end-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:end}
.end h2{font-size:clamp(26px,2.9vw,38px);line-height:1.12;max-width:20ch}
.end .tel{display:inline-flex;align-items:center;min-height:52px;margin-top:22px;
font-size:clamp(30px,4vw,44px);text-decoration:none;font-variant-numeric:tabular-nums;
border-bottom:2px solid var(--rose)}
.end-side p{color:var(--ink-soft);max-width:36ch}
.end-side .btn{margin-top:22px}
.end-side .mail{display:block;margin-top:22px;font-size:var(--fs-small);overflow-wrap:anywhere}
.end-side .hours{font-size:var(--fs-small);color:var(--ink-soft);margin-top:6px}
@media(max-width:820px){.end-in{grid-template-columns:1fr;align-items:start;gap:30px}}
/* ---- pied ---- */
.ft{background:var(--field-navy);color:var(--on-navy);padding-block:52px 26px}
.ft-in{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:34px 40px;align-items:start}
/* Pied : logo complet a 260 px (198 px rendait le slogan illisible). */
.ft img{width:260px;height:auto}
/* Le logo est marine : sur un fond marine il faut la variante creme,
et sous 720px le lockup complet cede la place au compact, dont la
ligne ENTRETIEN MENAGER tomberait sous 5px de haut. Les deux
bascules sont portees par , pas par du CSS. */
.ft p{font-size:var(--fs-small);color:var(--on-navy-soft)}
.ft a{min-height:44px;display:inline-flex;align-items:center}
/* Pied complet : coordonnees, liens et secteurs repetes sur chaque page
(meme nom, meme numero, memes secteurs partout pour le SEO local). */
.ft .ft-brand p{margin-top:14px;max-width:28ch}
.ft .ft-h{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--on-navy);margin-bottom:8px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{font-size:var(--fs-small);color:var(--on-navy-soft)}
.ft li a{min-height:44px;color:var(--on-navy);text-decoration:underline;text-underline-offset:5px;
text-decoration-thickness:1px;text-decoration-color:transparent;transition:text-decoration-color var(--t);
overflow-wrap:anywhere}
.ft li span{display:inline-flex;align-items:center;min-height:44px}
.ft .ft-areas{font-size:var(--fs-small);line-height:1.65;max-width:30ch}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;
margin-top:36px;padding-top:14px;border-top:1px solid rgba(248,244,239,.18)}
.ft .ft-base p{font-size:var(--fs-label)}
@media (hover:hover) and (pointer:fine){.ft li a:hover{text-decoration-color:var(--rose)}}
@media(max-width:980px){.ft-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr;gap:28px}}
.ft .nw{white-space:nowrap}
/* Sous 720px, la barre d'action fixe couvre le bas : le pied garde assez
de marge pour que le lien de langue reste visible au-dessus d'elle. */
@media(max-width:720px){.ft{padding-bottom:calc(26px + 72px + env(safe-area-inset-bottom,0px))}}
/* ---- mouvement reduit ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* =====================================================================
Page « Ce que ça inclut »
Contenu de reference : on ne rejoue pas la bande asymetrique ni le
bento de l'accueil. Les pieces sont une liste consultable, pas
quatre blocs heros empiles.
===================================================================== */
/* Page courante : le rose marque, il ne colore pas le texte.
A 2,86:1 sur blanc il ne passe pas en couleur de libelle. */
.hd-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;
text-decoration-thickness:2px;text-decoration-color:var(--rose)}
/* En-tete de page compact, avec les raccourcis vers les pieces. */
.phead{background:var(--base);padding-block:var(--sec)}
.phead h1{font-size:clamp(33px,4.2vw,54px);line-height:1.05;max-width:17ch}
.phead>.wrap>p{margin-top:20px;max-width:58ch;font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft)}
.jumps{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jumps a{border:1px solid var(--rose-stroke);border-radius:var(--r-control);padding:11px 20px;
font-size:var(--fs-ui);font-weight:500;min-height:44px;display:inline-flex;align-items:center;
text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t)}
/* Bande photo pleine largeur : de l'air entre l'en-tete et la liste. */
.band img{width:100%;height:clamp(190px,24vw,340px);object-fit:cover}
/* Les pieces : nom a gauche, taches a droite, un filet entre chaque. */
.rooms{background:var(--surface);padding-block:var(--sec)}
.rooms h2{font-size:clamp(26px,3vw,36px);max-width:24ch}
.rooms>.wrap>h2+p{margin-top:16px;max-width:52ch;color:var(--ink-soft)}
.room{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(18px,4vw,56px);padding:clamp(24px,3vw,36px) 0;
border-top:1px solid var(--rose-line)}
.room:first-of-type{margin-top:34px}
.room:last-of-type{border-bottom:1px solid var(--rose-line)}
.room h3{font-size:clamp(20px,2.1vw,25px);line-height:1.2}
.room-intro{margin-top:10px;color:var(--ink-soft);max-width:32ch}
.tasks{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(20px,3vw,44px)}
.tasks li{break-inside:avoid;padding:8px 0 8px 26px;position:relative;font-size:var(--fs-ui)}
.tasks li::before{content:"";position:absolute;left:1px;top:15px;width:11px;height:6px;
border-left:2px solid var(--rose);border-bottom:2px solid var(--rose);transform:rotate(-45deg)}
@media(max-width:820px){.room{grid-template-columns:1fr;gap:12px}.tasks{columns:1}}
/* Les ajouts : le champ rose de la page, quatre demandes en ligne. */
.extras{background:var(--field-rose);color:var(--on-rose);padding-block:var(--sec)}
.extras h2{font-size:clamp(26px,3vw,36px);max-width:20ch}
.extras>.wrap>p{margin-top:16px;max-width:56ch}
.extras ul{list-style:none;margin:34px 0 0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:currentColor}
.extras li{background:var(--field-rose);padding:22px 20px;font-weight:600;font-size:var(--fs-body)}
@media(max-width:820px){.extras ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.extras ul{grid-template-columns:1fr}}
/* Portee : ce qui est convenu, et ce que je n'offre pas. */
.scope{background:var(--base);padding-block:var(--sec)}
.scope-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
gap:clamp(26px,4vw,64px);align-items:center}
.scope h2{font-size:clamp(24px,2.6vw,32px);max-width:20ch}
.scope p{margin-top:16px;color:var(--ink-soft);max-width:50ch}
.scope .no{border-left:3px solid var(--rose);padding-left:20px}
.scope img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(max-width:820px){.scope-in{grid-template-columns:1fr;gap:24px}.scope-img{order:-1}}
/* Bascule de langue : au pied de page, pas dans l'en-tete. A 320px
l'en-tete tient deja tout juste le logo et le telephone. */
.ft-lang{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:600;
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
text-decoration-color:var(--rose);transition:text-decoration-color var(--t)}
.says-note{margin-top:14px;font-size:var(--fs-small);color:var(--ink-soft);max-width:52ch}
.says-note+.says-grid{margin-top:32px}
/* Page de soumission : la barre mobile n'a qu'un bouton, on ne se
propose pas d'aller sur la page ou on se trouve deja. */
.bar-one{grid-template-columns:1fr}
/* =====================================================================
Page de soumission
Formes : les pilules restent aux boutons et aux chips. Les champs
sont a angle vif comme les surfaces, sinon un textarea en pilule
devient illisible. La regle est donc : boutons et chips en pilule,
tout le reste a zero.
===================================================================== */
.quote-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(28px,5vw,72px);padding-block:var(--sec);align-items:start}
.quote-aside h1{font-size:clamp(31px,3.8vw,46px);line-height:1.06;max-width:15ch}
.quote-aside>p{margin-top:20px;max-width:42ch;color:var(--ink-soft)}
.quote-meta{margin-top:14px;font-size:var(--fs-small);color:var(--ink-soft)}
.quote form{background:var(--surface);border:1px solid var(--edge);
border-top:3px solid var(--rose);padding:clamp(20px,3vw,34px)}
.req{font-size:var(--fs-small);color:var(--ink-soft)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,2vw,24px)}
.f{margin-top:18px}
.quote label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:7px}
.quote input:not([type=checkbox]),.quote select,.quote textarea{
width:100%;padding:12px 14px;font:inherit;font-size:var(--fs-ui);line-height:1.4;
color:var(--ink);background:var(--base);border:1px solid var(--field-line);border-radius:0;min-height:48px}
.quote textarea{min-height:0;resize:vertical}
.quote input:focus-visible,.quote select:focus-visible,.quote textarea:focus-visible{
outline:3px solid var(--ink);outline-offset:2px;border-radius:0}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;
font-size:var(--fs-ui);font-weight:400;cursor:pointer;min-height:44px}
.consent input{width:24px;height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--ink)}
.quote .note{margin-top:16px;font-size:var(--fs-small);color:var(--ink-soft);max-width:58ch}
.quote button[type=submit]{margin-top:26px;width:100%}
/* Piege a robots : hors ecran, jamais masque par display:none,
sinon certains navigateurs ignorent le champ. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:860px){.quote-in{grid-template-columns:1fr;gap:24px}
.fields{grid-template-columns:1fr}}
/* Erreurs de formulaire, en ligne sous le champ. */
.field-error{display:block;margin-top:7px;font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--err)}
.quote input[aria-invalid=true],.quote select[aria-invalid=true],.quote textarea[aria-invalid=true]{
border-color:var(--err);border-width:2px}
.form-status{margin:0 0 6px;font-weight:600;color:var(--err)}
.form-status:empty{display:none}
.btn[disabled]{opacity:.6;cursor:not-allowed}
/* Un libelle de navigation ne se replie jamais. */
.hd-nav a{white-space:nowrap}
/* Entre 721 et 800px, le logo compact reduit laisse la place au telephone et au bouton. */
@media(min-width:721px) and (max-width:800px){.hd-logo img{width:224px}}
/* Survols : souris seulement. Sur un ecran tactile, un toucher laissait
l'etat de survol colle au bouton. */
@media (hover:hover) and (pointer:fine){
.btn:hover{background:var(--btn-bg-h)}
/* Bouton contour : la teinte de bordure en fond, comme l'icone du telephone ;
le blanc sur creme (1,10:1) ne se voyait pas. */
.btn-ghost:hover{background:var(--edge)}
.lnk:hover{text-decoration-color:var(--ink)}
.hd-nav a:not(.btn):hover{text-decoration-color:var(--rose)}
.jumps a:hover{background:var(--field-rose);border-color:var(--field-rose);color:var(--on-rose)}
.ft-lang:hover{text-decoration-color:var(--on-navy)}
/* Survols manquants (audit du 23 sept.) */
.end .tel{transition:border-color var(--t)}
.end .tel:hover{border-bottom-color:var(--ink)}
.faq summary:hover{text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:6px;text-decoration-thickness:2px}
.faq summary:hover::after{border-color:var(--ink)}
.hd-menu summary:hover{background:var(--base)}
.hd-nav .hd-menu-panel a:hover{text-decoration-line:underline;text-decoration-color:var(--rose)}
/* Logo : un leger retrait au survol, seule reaction d'un lien sans texte. */
.hd-logo{transition:opacity var(--t)}
.hd-logo:hover{opacity:.78}
/* Bloc telephone : le numero se souligne en rose comme les liens du menu,
y compris entre 1024 et 1099 px, ou l'icone est masquee. */
.hd-nav a.hd-call:hover .hd-call-tx b{text-decoration:underline;text-decoration-color:var(--rose);
text-underline-offset:5px;text-decoration-thickness:2px}
}
/* 12. Mobile en mode sombre : le champ Secteurs reste marine (le rose pale
du mode clair mobile ferait un bloc blanc au milieu d'une page sombre). */
@media (prefers-color-scheme:dark) and (max-width:720px){
.zone{--field-navy:#0b1220;--on-navy:#f4efe8;--on-navy-soft:#c2cbdd}
}
/* 6. Bouton de langue : cible de 44px, et visible sur mobile aussi. */
.hd-nav a.hd-lang{min-width:44px;justify-content:center}
@media(max-width:720px){
.hd-nav a.hd-lang{display:inline-flex;min-width:40px;font-size:var(--fs-label);border:1px solid var(--edge);
border-radius:var(--r-control);padding:0 10px}
}
/* Sous 370px le numero de l'en-tete cede sa place : la barre du bas porte deja « Appeler ». */
@media(max-width:369px){.hd-nav a.hd-tel{display:none}}
/* Page courante : sur la page de soumission, le bouton de l'en-tete pointait
vers la page ou l'on est deja ; il disparait (audit du 24 sept.). */
.hd-nav a.btn[aria-current="page"]{display:none}
/* Texte pour lecteurs d'ecran seulement (ex. « nouvel onglet »), qui s'affichait. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Consentement : texte courant, pas un libelle en gras. */
.quote .consent{font-weight:400}
/* 5. En-tete reduit apres defilement (ordinateur). La marge du bas compense
exactement la hauteur perdue : le contenu ne saute pas. */
.hd-logo-sm{display:none}
@media(min-width:901px){
.hd.is-compact{margin-bottom:28px}
.hd.is-compact .hd-in{height:84px}
.hd.is-compact .hd-logo>picture:first-child{display:none}
.hd.is-compact .hd-logo-sm{display:block}
.hd.is-compact .hd-logo-sm img{width:258px;height:auto}
/* 100 px seulement quand l'en-tete est reduit ; sinon (page a peine
defilee, ou sans JavaScript) l'en-tete fait 113 px et le 124 px par defaut s'applique. */
html:has(.hd.is-compact){scroll-padding-top:100px}
}
/* ---- Soumission ---- */
/* .quote label (display:block) ecrasait le flex du consentement : la 2e ligne
passait sous la case. */
.quote .consent{display:flex}
/* Lien dans une note : en ligne, sans la cible de 46 px qui ecartait les lignes. */
.quote .note .lnk{display:inline;min-height:0;font-size:inherit}
.quote .help{margin-top:7px;font-size:var(--fs-small);color:var(--ink-soft)}
@media(min-width:861px){.quote-aside{position:sticky;top:120px}}
/* Mobile : le formulaire prend toute la largeur, sans boite autour. */
@media(max-width:860px){
.quote form{background:transparent;border:0;border-top:3px solid var(--rose);padding:24px 0 0}
.quote input:not([type=checkbox]),.quote select,.quote textarea{background:var(--surface)}
}
/* Merci : consignes en texte simple, les crochets restent aux listes de taches. */
.tasks.plain{columns:1}
.tasks.plain li{padding-left:0}
.tasks.plain li::before{display:none}
/* ---- Menu sous 1250 px : un natif, aucune dependance ----
Au-dessus, les quatre liens sont dans l'en-tete (voir plus haut). */
.hd-menu{display:none}
@media(max-width:1249px){
.hd-menu{display:block}
.hd-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-control);
font-size:var(--fs-small);font-weight:600;white-space:nowrap}
.hd-menu summary::-webkit-details-marker{display:none}
.hd-menu summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease-out)}
.hd-menu[open] summary::after{transform:translateY(2px) rotate(225deg)}
.hd-menu[open] summary{background:var(--base)}
.hd-menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);
border-bottom:1px solid var(--edge);box-shadow:0 12px 24px -16px rgba(var(--scrim),.35);
padding:8px var(--gut) 16px;display:grid}
.hd-nav .hd-menu-panel a{min-height:52px;font-size:var(--fs-body);font-weight:500;border-bottom:1px solid var(--edge);
display:flex;align-items:center;text-decoration:none}
.hd-nav .hd-menu-panel a:last-child{border-bottom:0}
.hd-nav .hd-menu-panel a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--rose);
text-decoration-thickness:2px;text-underline-offset:7px}
}
/* Mobile : le menu prend la place du numero, la barre du bas porte deja « Appeler ». */
@media(max-width:720px){.hd-nav a.hd-tel{display:none}.hd-menu summary{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.hd-menu summary::after{transition:none}}
/* Tablette (721-1023 px) : le bloc telephone passe dans le menu pour que
l'en-tete tienne ; sous 721 px, la barre du bas porte l'appel. */
.hd-nav .hd-menu-panel a.hd-menu-tel{display:none}
@media(min-width:721px) and (max-width:1023px){
.hd-nav a.hd-call{display:none}
.hd-nav .hd-menu-panel a.hd-menu-tel{display:flex;font-weight:600}
}
/* Tres petits ecrans : la langue reste au pied de page. */
@media(max-width:369px){.hd-nav a.hd-lang{display:none}}
@media(max-width:720px){.hd-menu{order:2}}
/* 404 bilingue : la partie anglaise sous un filet, en plus petit. */
.nf-en{margin-top:44px;padding-top:30px;border-top:1px solid var(--edge)}
.nf-en h2{font-size:clamp(22px,2.4vw,28px)}
.nf-en p{margin-top:12px;color:var(--ink-soft)}
.nf-en .jumps{margin-top:20px}
/* Focus clavier dans le pied marine : le contour marine y etait invisible. */
.ft a:focus-visible{outline-color:var(--on-navy)}
/* Tactile : pas de zoom au double-tap sur les contrôles, et une teinte de marque
au toucher plutôt que le gris d'iOS. */
a,button,summary,input,select,textarea,label{touch-action:manipulation}
html{-webkit-tap-highlight-color:rgba(30,51,83,.12)}
@media (prefers-color-scheme:dark){html{-webkit-tap-highlight-color:rgba(244,239,232,.12)}}
/* ---- transitions entre pages ----
Fondu court d'une page a l'autre ; l'en-tete et la barre du bas restent en place.
Chrome, Edge et Safari recents seulement ; les autres gardent le changement sec.
Aucun script. Desactive quand le visiteur demande moins d'animations. */
@view-transition{navigation:auto}
.hd{view-transition-name:entete}
.bar{view-transition-name:barre}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.legal{background:var(--surface);padding-block:var(--sec)}
.legal p{max-width:62ch;font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft)}
.legal p+p{margin-top:22px}
.legal .lnk{display:inline;min-height:0;font-size:inherit}
.legal a[href^="tel"]{white-space:nowrap}