/* ==========================================================================
Coeur Sûr · feuille de style unique
Charte : marine #0b1956 · rose #fc9fbc · bordeaux #6f0a3d · lilas #f5d1ff
Display : Abril Fatface (du site actuel) · Texte : Karla
Signature : l'étoile de vie du logo, en filet, comme motif structurel
========================================================================== */
/* --- 1. Tokens ---------------------------------------------------------- */
:root{
--marine: #0b1956;
--marine-2: #16265f; /* fond superposé sur marine */
--rose: #fc9fbc;
--rose-fonce: #c92f5e; /* rose lisible : 5,18:1 sur blanc, 4,87:1 sur crème */
--bordeaux: #6f0a3d;
--lilas: #f5d1ff;
--bleu-ciel: #5884e7;
--creme: #fdf6f8;
--blanc: #ffffff;
--encre: #0b1956;
--encre-douce: #4a5578;
--display: "Abril Fatface", Georgia, serif;
--texte: "Karla", "Segoe UI", sans-serif;
--large: 1160px;
--etroit: 720px;
--r: 14px; /* rayon des cartes */
--r-pill: 999px;
--ombre: 0 2px 14px rgba(11,25,86,.07);
--ombre-h: 0 10px 30px rgba(11,25,86,.14);
}
/* --- 2. Base ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }
body{
margin:0; background:var(--blanc); color:var(--encre);
font-family:var(--texte); font-size:17px; line-height:1.65;
font-weight:400; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* height:auto est OBLIGATOIRE : les portent des attributs width/height
(réservation de place, anti-CLS). Sans lui, max-width:100% rétrécit la
largeur mais laisse la hauteur de l'attribut, donc la photo est ÉTIRÉE.
Les images à hauteur imposée (logo, vignette, hero) ont leur propre règle,
plus spécifique, qui gagne. */
img,svg,picture{ max-width:100%; height:auto; display:block; }
a{ color:var(--rose-fonce); text-underline-offset:.22em; text-decoration-thickness:1.5px; }
a:hover{ color:var(--bordeaux); }
:focus-visible{ outline:3px solid var(--rose-fonce); outline-offset:3px; border-radius:4px; }
.hero :focus-visible,.appel :focus-visible,.section-marine :focus-visible,.pied :focus-visible{ outline-color:#fff; }
::selection{ background:var(--rose); color:var(--marine); }
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.06; margin:0 0 .5em; letter-spacing:-.005em; }
h1{ font-size:clamp(2.25rem,4.7vw,3.6rem); }
h2{ font-size:clamp(1.95rem,4.4vw,3.1rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.2; }
h4,.titre-carte{ font-family:var(--texte); font-size:1.05rem; font-weight:700; margin:0 0 .35em; letter-spacing:.005em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--marine); color:#fff; padding:.8rem 1.2rem; }
.skip:focus{ left:.5rem; top:.5rem; }
/* --- 3. Layout ---------------------------------------------------------- */
.wrap{ width:min(100% - 2.5rem, var(--large)); margin-inline:auto; }
.wrap-etroit{ width:min(100% - 2.5rem, var(--etroit)); margin-inline:auto; }
.section{ padding-block:clamp(3.5rem,7vw,6rem); position:relative; }
.section-marine{ background:var(--marine); color:#eef1fa; }
.section-marine h2,.section-marine h3{ color:#fff; }
.section-creme{ background:var(--creme); }
.eyebrow{
font-family:var(--texte); font-size:.78rem; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; color:var(--rose-fonce);
margin:0 0 .9rem; display:flex; align-items:center; gap:.55rem;
}
.section-marine .eyebrow{ color:var(--rose); }
.eyebrow::before{
content:""; width:1.5rem; height:1.5rem; flex:none;
background:currentColor;
-webkit-mask:var(--etoile) center/contain no-repeat;
mask:var(--etoile) center/contain no-repeat;
}
.lead{ font-size:1.16rem; color:var(--encre-douce); }
.section-marine .lead{ color:#c3cbe6; }
/* --- 4. Signature : l'étoile de vie ------------------------------------- */
/* Symbole des services de secours, repris du logo. Sert de puce, d'eyebrow
et de filigrane géant. Défini une fois en masque SVG. */
:root{
/* Étoile de vie pleine : trois barres arrondies croisées à 60 degrés. */
--etoile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Crect x='39' y='5' width='22' height='90' rx='11'/%3E%3Crect x='39' y='5' width='22' height='90' rx='11' transform='rotate(60 50 50)'/%3E%3Crect x='39' y='5' width='22' height='90' rx='11' transform='rotate(120 50 50)'/%3E%3C/g%3E%3C/svg%3E");
/* Version en filet, pour le filigrane de grande taille (fidèle au logo). */
--etoile-filet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='39' y='5' width='22' height='90' rx='11'/%3E%3Crect x='39' y='5' width='22' height='90' rx='11' transform='rotate(60 50 50)'/%3E%3Crect x='39' y='5' width='22' height='90' rx='11' transform='rotate(120 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}
.etoile-fond{
position:absolute; pointer-events:none; z-index:0; aspect-ratio:1;
background:currentColor; opacity:.06;
-webkit-mask:var(--etoile-filet) center/contain no-repeat;
mask:var(--etoile-filet) center/contain no-repeat;
}
/* --- 5. Séparateur nuage ------------------------------------------------ */
/* Remplace la vague générique du thème actuel. Repris du motif de nuages
déjà présent dans les assets de la marque. */
.nuage{ display:block; width:100%; height:auto; }
.nuage-bas{ margin-top:-1px; }
/* --- 6. Boutons --------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
min-height:52px; padding:.85rem 1.7rem; border-radius:var(--r-pill);
font-family:var(--texte); font-size:1rem; font-weight:700; line-height:1.2;
text-decoration:none; border:2px solid transparent; cursor:pointer;
transition:background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primaire{ background:var(--rose); color:var(--marine); border-color:var(--rose); box-shadow:0 4px 16px rgba(252,159,188,.4); }
.btn-primaire:hover{ background:var(--bordeaux); border-color:var(--bordeaux); color:#fff; box-shadow:var(--ombre-h); }
.btn-secondaire{ background:transparent; color:var(--marine); border-color:var(--marine); }
.btn-secondaire:hover{ background:var(--marine); color:#fff; }
/* Sur fond marine (sections sombres, hero, encart d'appel), le bouton
secondaire doit s'inverser, sinon il est marine sur marine donc invisible. */
.section-marine .btn-secondaire,
.hero .btn-secondaire,
.appel .btn-secondaire,
.bandeau-cookies .btn-secondaire{ color:#fff; border-color:rgba(255,255,255,.55); }
.section-marine .btn-secondaire:hover,
.hero .btn-secondaire:hover,
.appel .btn-secondaire:hover,
.bandeau-cookies .btn-secondaire:hover{ background:#fff; color:var(--marine); border-color:#fff; }
.btn-large{ font-size:1.06rem; padding:1.05rem 2.1rem; min-height:58px; }
.btn[aria-disabled="true"]{ background:#e7e9f0; color:#59617a; border-color:#e7e9f0; box-shadow:none; pointer-events:none; }
/* --- 7. En-tête --------------------------------------------------------- */
.entete{
position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93);
backdrop-filter:saturate(1.5) blur(10px);
border-bottom:1px solid rgba(11,25,86,.09);
}
.entete-in{ display:flex; align-items:center; gap:1rem; min-height:74px; }
.marque{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--marine); margin-right:auto; }
.marque img{ height:46px; width:auto; }
.marque b{ font-family:var(--display); font-size:1.3rem; font-weight:400; letter-spacing:.01em; line-height:1; }
.marque .baseline{ display:block; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-douce); font-weight:600; }
.nav{ display:flex; align-items:center; gap:.4rem; }
.nav a{
color:var(--marine); text-decoration:none; font-weight:600; font-size:.97rem;
padding:.55rem .7rem; border-radius:8px;
/* Un libellé de navigation ne se coupe JAMAIS en deux : « Le cours » sur deux
lignes fait grandir l'en-tête et donne un menu bancal. S'il n'y a plus la
place, c'est au burger de prendre le relais, pas au texte de se plier. */
white-space:nowrap;
}
.nav a:hover{ background:var(--creme); color:var(--bordeaux); }
.nav a[aria-current="page"]{ color:var(--bordeaux); box-shadow:inset 0 -2px 0 var(--rose); border-radius:0; }
.nav .btn{ min-height:46px; padding:.6rem 1.25rem; font-size:.95rem; margin-left:.5rem; }
.nav .btn:hover{ background:var(--bordeaux); color:#fff; }
.burger{
display:none; width:48px; height:48px; border:1px solid rgba(11,25,86,.18);
background:#fff; border-radius:10px; cursor:pointer; padding:0;
align-items:center; justify-content:center;
}
.burger span{ display:block; width:20px; height:2px; background:var(--marine); position:relative; transition:.2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--marine); transition:.2s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.entete.ouvert .burger span{ background:transparent; }
.entete.ouvert .burger span::before{ top:0; transform:rotate(45deg); }
.entete.ouvert .burger span::after{ top:0; transform:rotate(-45deg); }
/* Seuil du burger : 997 px depuis le retrait de « Bienne » et « Neuchâtel » du
menu (2026-08-22). Ce qui cède en premier n'est pas la nav, qui est en
nowrap, mais LE MOT-SYMBOLE comprimé à sa gauche : sa signature « premiers
secours chez l'enfant » se casse en deux lignes et déborde de la barre.
Le témoin à mesurer est donc la hauteur de cette signature, pas la nav.
Mesure du 2026-08-22, au pixel, sur la page réelle : cassé jusqu'à 997 px,
propre dès 998 (mot-symbole 274 + nav 667 + gouttière 16 + les 40 px de
marges du conteneur = 997). La même addition donnait 1179 à sept entrées.
⛔ Une simulation qui force la barre en ligne avec des règles injectées se
trompe : elle écrase le rembourrage du bouton et a annoncé 976 au lieu de
997. On mesure sur le CSS réel, jamais sur une nav reconstituée.
Historique : 920 px à l'origine · 1160 au 7e lien (« Crèches », 13.08) ·
1179 au renommage « Emilie » → « Qui suis-je ? » (22.08) · 997 à cinq entrées.
⚠️ Tout lien de navigation ajouté, RETIRÉ ou RENOMMÉ oblige à REVÉRIFIER ce
seuil en capture. Le compter dans sa tête ne suffit pas : un simple
changement de libellé avait déjà déplacé le seuil de 19 px. */
@media (max-width:997px){
.burger{ display:flex; }
.nav{
display:none; position:absolute; left:0; right:0; top:100%;
flex-direction:column; align-items:stretch; gap:0;
background:#fff; border-bottom:1px solid rgba(11,25,86,.1);
padding:.6rem 1.25rem 1.2rem; box-shadow:var(--ombre-h);
max-height:calc(100dvh - 74px); overflow-y:auto;
}
.entete.ouvert .nav{ display:flex; }
.nav a{ padding:.95rem .4rem; border-bottom:1px solid rgba(11,25,86,.07); border-radius:0; }
.nav a[aria-current="page"]{ box-shadow:none; }
.nav .btn{ margin:.9rem 0 0; justify-content:center; min-height:52px; }
}
/* --- 8. Hero ------------------------------------------------------------ */
.hero{ background:var(--marine); color:#fff; position:relative; overflow:hidden; }
.hero-in{
display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem);
align-items:center; padding-block:clamp(3rem,6vw,5.2rem);
position:relative; z-index:1;
}
.hero .etoile-fond{ color:var(--rose); width:min(56rem,88vw); top:-24%; left:-16%; opacity:.075; }
.hero h1{ color:#fff; margin-bottom:.42em; }
.hero h1 em, h1 em{ font-style:normal; color:var(--rose); }
.hero-texte p{ color:#c8d0e8; font-size:1.2rem; max-width:34ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }
.hero-faits{
margin-top:1.7rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.16);
color:#aeb9dc; font-size:.95rem; font-weight:600; letter-spacing:.01em;
}
.hero-faits b{ color:#fff; font-weight:700; }
.hero-media{ position:relative; }
/* Enfant direct : sinon la media query mobile plus bas attrape aussi
la vignette du badge, qui est imbriquée dans .hero-media. */
.hero-media > img{
width:100%; height:clamp(300px,44vw,520px); object-fit:cover;
border-radius:calc(var(--r) * 1.6);
}
.hero-badge{
position:absolute; left:-1rem; bottom:-1.4rem; background:#fff; color:var(--marine);
border-radius:var(--r); padding:.85rem 1.15rem; box-shadow:var(--ombre-h);
display:flex; align-items:center; gap:.7rem; max-width:16rem;
}
.hero-badge img{ height:44px; width:44px; border-radius:50%; object-fit:cover; }
.hero-badge span{ font-size:.86rem; line-height:1.35; }
.hero-badge b{ display:block; font-size:.94rem; }
@media (max-width:880px){
.hero-in{ grid-template-columns:1fr; gap:2.2rem; }
.hero-texte p{ max-width:none; }
.hero-media{ order:-1; margin-bottom:1.6rem; }
.hero-media > img{ height:clamp(230px,52vw,340px); }
.hero-badge{ left:auto; right:.4rem; bottom:-1.5rem; max-width:14.5rem; }
}
/* --- 9. Cartes de session ----------------------------------------------- */
.sessions{ display:grid; gap:1rem; }
.session{
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem;
background:#fff; border:1px solid rgba(11,25,86,.12); border-radius:var(--r);
padding:1.15rem 1.4rem; box-shadow:var(--ombre);
transition:border-color .2s, box-shadow .2s, transform .2s;
}
.session:hover{ border-color:var(--rose); box-shadow:var(--ombre-h); transform:translateY(-2px); }
.session-date{
text-align:center; background:var(--creme); border-radius:11px;
padding:.6rem .85rem; min-width:5.1rem; line-height:1.1;
}
.session-date .j{ display:block; font-family:var(--display); font-size:1.85rem; color:var(--marine); }
/* Mois et annee a .78rem au minimum : sous 12px, la pastille de date devient
penible a lire sur un telephone. */
.session-date .m{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--rose-fonce); margin-top:.2rem; }
.session-date .a{ display:block; font-size:.78rem; color:var(--encre-douce); }
.session-info b{ display:block; font-size:1.06rem; }
.session-info span{ color:var(--encre-douce); font-size:.94rem; }
.session-complet{ background:#f6f7fa; }
.session-complet .session-date{ background:#eceef4; }
.etiquette{
display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; padding:.2rem .55rem; border-radius:var(--r-pill);
background:var(--lilas); color:var(--bordeaux); margin-left:.45rem; vertical-align:.08em;
}
@media (max-width:620px){
.session{ grid-template-columns:auto 1fr; row-gap:1rem; }
.session .btn{ grid-column:1 / -1; width:100%; }
}
/* --- 10. Cartes et grilles ---------------------------------------------- */
.grille{ display:grid; gap:1.3rem; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .g2,.g3{ grid-template-columns:1fr; } }
.carte{
background:#fff; border:1px solid rgba(11,25,86,.11); border-radius:var(--r);
padding:1.5rem 1.6rem; box-shadow:var(--ombre);
}
.section-marine .carte{ background:var(--marine-2); border-color:rgba(255,255,255,.14); color:#dbe1f2; box-shadow:none; }
.carte-lien{ text-decoration:none; color:inherit; display:block; transition:border-color .2s, box-shadow .2s, transform .2s; }
.carte-lien:hover{ border-color:var(--rose); box-shadow:var(--ombre-h); transform:translateY(-3px); color:inherit; }
.carte-lien .fleche{ color:var(--rose-fonce); font-weight:700; }
/* Liste avec puces en étoile de vie */
.liste-etoile{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.liste-etoile li{ position:relative; padding-left:2rem; }
.liste-etoile li::before{
content:""; position:absolute; left:0; top:.28em; width:1.15rem; height:1.15rem;
background:var(--rose-fonce);
-webkit-mask:var(--etoile) center/contain no-repeat;
mask:var(--etoile) center/contain no-repeat;
}
.section-marine .liste-etoile li::before{ background:var(--rose); }
/* Programme : deux colonnes de blocs titrés */
.module{ border-top:1px solid rgba(11,25,86,.13); padding:1.35rem 0 .1rem; }
.section-marine .module{ border-color:rgba(255,255,255,.16); }
.module h3{ font-family:var(--texte); font-size:1.08rem; font-weight:700; margin-bottom:.35rem; }
.module p{ color:var(--encre-douce); font-size:.98rem; }
.section-marine .module p{ color:#bcc5e2; }
/* --- 11. Témoignage ----------------------------------------------------- */
.avis{ background:#fff; border-radius:var(--r); padding:clamp(1.6rem,3vw,2.5rem); box-shadow:var(--ombre); border:1px solid rgba(11,25,86,.1); }
.avis blockquote{ margin:0; font-size:1.1rem; }
.avis blockquote p:first-child::before{ content:"« "; color:var(--rose); }
.avis blockquote p:last-of-type::after{ content:" »"; color:var(--rose); }
.avis figcaption{ margin-top:1.1rem; font-size:.95rem; color:var(--encre-douce); }
.avis figcaption b{ color:var(--marine); }
.etoiles{ color:var(--rose-fonce); letter-spacing:.12em; font-size:1.05rem; }
/* --- 12. FAQ ------------------------------------------------------------ */
.faq{ border-top:1px solid rgba(11,25,86,.14); }
.faq details{ border-bottom:1px solid rgba(11,25,86,.14); }
.faq summary{
cursor:pointer; list-style:none; padding:1.15rem 2.6rem 1.15rem 0; position:relative;
font-weight:700; font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:""; position:absolute; right:.5rem; top:1.4rem; width:13px; height:13px;
border-right:2.5px solid var(--rose-fonce); border-bottom:2.5px solid var(--rose-fonce);
transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.7rem; }
.faq details p{ padding-bottom:1.2rem; color:var(--encre-douce); max-width:62ch; }
/* --- 13. Formulaires ---------------------------------------------------- */
.form{ display:grid; gap:1.05rem; }
/* align-content:start est OBLIGATOIRE ici. Sans lui, un `.champ` placé dans une
rangée `.duo` plus haute que son contenu voit ses deux pistes (libellé et
champ) s'étirer pour combler le vide : le champ de droite descendait de 10 px
et grandissait de 9 px par rapport à celui de gauche, sur les trois rangées
des formulaires. Le défaut existait depuis le premier build sur /contact/ et
/cours-prive-a-domicile/, invisible au premier coup d'œil mais bien réel.
Règle générale : une grille imbriquée dans une grille doit dire si elle
accepte d'être étirée, sinon elle répartit le vide dans son contenu. */
.champ{ display:grid; gap:.35rem; align-content:start; }
.champ label{ font-weight:700; font-size:.94rem; }
.champ .aide{ font-weight:400; color:var(--encre-douce); font-size:.87rem; }
.champ input,.champ select,.champ textarea{
font:inherit; font-size:1rem; color:var(--encre); background:#fff;
border:1.5px solid rgba(11,25,86,.24); border-radius:10px; padding:.8rem .9rem;
min-height:52px; width:100%;
}
.champ textarea{ min-height:130px; resize:vertical; }
.champ input:focus,.champ select:focus,.champ textarea:focus{ border-color:var(--rose-fonce); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:620px){ .duo{ grid-template-columns:1fr; } }
.consentement{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:var(--encre-douce); }
.consentement input{ width:20px; height:20px; min-height:0; margin-top:.2rem; flex:none; accent-color:var(--rose-fonce); }
.pot{ display:none; }
/* --- 14. Encart d'appel ------------------------------------------------- */
.appel{ background:var(--marine); color:#fff; border-radius:calc(var(--r) * 1.4); padding:clamp(1.9rem,4vw,3.2rem); position:relative; overflow:hidden; }
.appel .etoile-fond{ color:var(--rose); width:26rem; right:-7rem; top:-7rem; opacity:.1; }
.appel > *{ position:relative; z-index:1; }
.appel h2{ color:#fff; margin-bottom:.3em; }
.appel > p{ color:#c8d0e8; max-width:52ch; }
.appel-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
/* --- 15. Pied de page --------------------------------------------------- */
.pied{ background:var(--marine); color:#b9c2e0; padding-block:3.4rem 1.6rem; font-size:.95rem; }
.pied a{ color:#dfe4f4; text-decoration:none; }
.pied a:hover{ color:var(--rose); text-decoration:underline; }
.pied h3{ font-family:var(--texte); font-weight:700; color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.pied-grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; }
@media (max-width:820px){ .pied-grille{ grid-template-columns:1fr 1fr; gap:2rem; } .pied-marque{ grid-column:1 / -1; } }
@media (max-width:520px){ .pied-grille{ grid-template-columns:1fr; } }
.pied-marque img{ height:64px; width:auto; margin-bottom:.9rem; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; }
/* Rembourrage vertical cale pour que chaque lien du pied fasse au moins 44px
de haut au doigt (ligne de 22px + 2 x 11px). */
.pied ul a{ display:inline-block; padding-block:.7rem; }
.pied-bas a{ display:inline-block; padding-block:.72rem; }
.pied-bas{
margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14);
display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:center;
font-size:.87rem; color:#8e9ac2;
}
.pied-bas a{ color:#8e9ac2; }
.signature{ margin-left:auto; }
.signature a{ color:#b9c2e0; font-weight:600; }
.signature .pt{ color:#FC6600; }
.zone-desservie{ color:#8e9ac2; font-size:.88rem; margin-top:1rem; max-width:62ch; }
/* --- 15b. Bandeau de consentement --------------------------------------- */
/* Barre pleine largeur en bas, pas de voile ni de fenêtre modale : le contenu
reste lisible et atteignable pendant le choix. Refuser est AUSSI accessible
qu'accepter (même taille, même rangée, aucun bouton grisé) : un refus rendu
plus difficile que l'accord vicie le consentement. */
.bandeau-cookies{
position:fixed; inset:auto 0 0 0; z-index:60;
background:var(--marine); color:#e7ebf7;
border-top:2px solid var(--rose);
box-shadow:0 -10px 30px rgba(11,25,86,.22);
padding:1.1rem 0 calc(1.1rem + env(safe-area-inset-bottom));
}
/* [hidden] doit gagner sur le display du bandeau, sinon l'attribut ne fait rien. */
.bandeau-cookies[hidden]{ display:none; }
.bandeau-cookies-in{
display:flex; align-items:center; gap:1.2rem 2rem; flex-wrap:wrap;
}
.bandeau-cookies-in > div:first-child{ flex:1 1 26rem; min-width:0; }
.bandeau-cookies h2{
font-family:var(--texte); font-size:1.02rem; font-weight:700;
color:#fff; margin:0 0 .3rem;
}
.bandeau-cookies p{ margin:0; font-size:.92rem; line-height:1.55; max-width:70ch; }
.bandeau-cookies a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Rangée d'actions en flex, JAMAIS un
: un paragraphe qui ne contient que
des boutons finit par se faire écraser par les règles de texte (piège payé). */
.bandeau-cookies-actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
@media (max-width:620px){
.bandeau-cookies-actions{ width:100%; }
.bandeau-cookies-actions .btn{ flex:1 1 auto; justify-content:center; }
}
/* Entrée « modifier mon choix » dans le pied. C'est une action, donc un bouton,
mais il doit se lire comme les liens voisins. */
.lien-cookies{
appearance:none; background:none; border:0; padding:.35rem 0;
font:inherit; color:#8e9ac2; cursor:pointer;
text-decoration:underline; text-underline-offset:3px;
}
.lien-cookies:hover{ color:#fff; }
/* --- 16. Divers --------------------------------------------------------- */
.figure-legende{ font-size:.86rem; color:var(--encre-douce); margin-top:.6rem; }
/* Inversion sur fond sombre. Toute légende posée sur marine passe ici,
sinon c'est du #4a5578 sur #0b1956, illisible. */
.section-marine .figure-legende,.hero .figure-legende,.appel .figure-legende{ color:#a9b3d4; }
/* Recadrage sans déformation. Le conteneur impose la proportion, l'image la
remplit en ROGNANT (object-fit:cover) : on perd des bords, jamais les
proportions du sujet. À utiliser dès qu'on aligne des photos de formats
différents côte à côte, ce que le portrait 2:3 et le paysage 3:2 imposent. */
.recadre-carre{ aspect-ratio:1; object-fit:cover; width:100%; }
.recadre-bande{ aspect-ratio:16/9; object-fit:cover; width:100%; }
.recadre-portrait{ aspect-ratio:4/5; object-fit:cover; width:100%; }
/* Bande pleine largeur, proportion d'origine conservée telle quelle. */
.photo-bande{ width:100%; }
/* Le même arrondi que la photo du hero, sur TOUTE photo de contenu : sans
cette règle, seul le hero était arrondi et le reste du site à angles vifs.
.nuage est un