/* ==========================================================================
   theme.css — CHARTE de Remali Bril'Or (nettoyage, Lyon 1er).
   Reprise de l'ancien site (27/10/2026) : barre d'infos bleu nuit, en-tête blanc et menu en capitales espacées,
   grande photo sous un voile bleu, titres Poppins soulignés et centrés, sections en dégradé bleu, cartes blanches
   arrondies, chiffres en Poppins très gras, pied bleu nuit avec une vague. Couleurs du logo (bleu #245b91,
   bleu clair #009ee0). Titres Poppins, texte Open Sans : les polices de l'ancien site, auto-hébergées (scripts/polices.py).
   Ce fichier ne contient QUE l'habillage : la structure et l'accessibilité viennent de style.css (modèle).
   ========================================================================== */

:root {
  /* Couleurs de l'ancien site et du logo */
  --nuit: #1a2f4e;              /* barre d'infos, pied de page, titres */
  --bleu: #1e5fa5;              /* liens, boutons */
  --bleu-2: #2466a8;            /* dégradés des sections */
  --bleu-logo: #245b91;
  --bleu-clair: #4a9fd4;        /* décor (suffixes des chiffres, filets) */
  --ciel: #8fc7ee;              /* texte d'accent sur fond bleu */
  --gris-clair: #f5f7fa;
  --degrade: linear-gradient(135deg, #1a2f4e 0%, #2466a8 60%, #1e5fa5 100%);

  /* Variables du modèle remplacées (contrastes contrôlés par scripts/verifier.py) */
  --c-primaire: #1e5fa5;
  --c-primaire-fonce: #1a2f4e;
  --c-accent: #4a9fd4;
  --c-texte: #333333;
  --c-texte-doux: #555b66;
  --c-fond: #ffffff;
  --c-fond-alt: #f5f7fa;
  --c-sombre: #1a2f4e;
  --c-bordure: #e3e8ef;

  --police-titres: "Poppins", system-ui, sans-serif;
  --police-texte: "Open Sans", system-ui, sans-serif;
  --arrondi: 12px;
  --ombre: 0 8px 30px rgba(30, 95, 165, .12);
}

/* ── Typographie : titres Poppins bleu nuit, soulignés et centrés (ancien site) ── */
h1, h2, h3 { color: var(--nuit); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.section > .conteneur > h2, .section > .conteneur > div > h2, #apropos h2 {
  text-align: center; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px;
  text-decoration-color: var(--bleu-clair); margin-bottom: 1.1em;
}
.section-surtitre { text-align: center; font-family: var(--police-texte); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-texte-doux); margin-bottom: .6em; }

/* ── En-tête : barre bleu nuit, menu blanc en capitales espacées ─────────── */
.barre-infos { background: var(--nuit); color: #fff; font-size: .82rem; }
.barre-infos p { padding: 8px 0; gap: 4px 34px; }
.barre-infos .icone { width: 15px; height: 15px; color: var(--ciel); }
.entete { background: #fff; box-shadow: 0 2px 14px rgba(26, 47, 78, .08); }
.entete-inner { padding: 8px 0; }
.logo-image img { height: 54px; width: auto; }
@media (min-width: 821px) { .menu ul { gap: 24px; } }
@media (max-width: 820px) { .menu li .bouton { display: block; } }
.menu a:not(.bouton) { color: var(--nuit); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.menu a:not(.bouton):hover, .menu a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu-clair); box-shadow: none; }
@media (min-width: 821px) { .menu a.bouton[href^="tel:"] { display: none; } }   /* le numéro est dans la barre d'infos */

/* ── Boutons : pilules en dégradé bleu, Poppins (ancien site) ──────────── */
.bouton { border-radius: 50px; font-family: var(--police-titres); font-weight: 700; padding: 14px 32px; border: 0;
  background: linear-gradient(135deg, var(--bleu), #1b6db5); box-shadow: 0 6px 20px rgba(30, 95, 165, .3); }
.bouton:hover { background: linear-gradient(135deg, var(--nuit), var(--bleu)); }
.bouton-secondaire { background: transparent; border: 2px solid currentColor; box-shadow: none; }

/* ── Haut de page : option SITE['hero_fond'] du modèle (photo en fond, plein écran) — ici seulement le voile et le titre ── */
:root {
  --hero-voile: linear-gradient(100deg, rgb(26 47 78 / .9) 0%, rgb(26 47 78 / .72) 45%, rgb(30 95 165 / .35) 100%);
  --hero-voile-mobile: rgb(26 47 78 / .82);
  --hero-hauteur-entete: 106px;
}
.hero-surtitre { font: 600 .82rem/1.4 var(--police-titres); letter-spacing: .2em; margin-bottom: 18px; }
.hero h1 { font-weight: 800; text-transform: uppercase; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.hero-texte { font-size: 1.12rem; max-width: 46ch; }
@media (min-width: 821px) and (max-height: 820px) { .hero h1 { font-size: clamp(2.2rem, 7vh, 3.6rem); } }
/* « Découvrir » (28/10/2026, demande de l'utilisateur) : au style des boutons du haut (pilule à contour blanc, police des titres),
   calé sur le bord gauche du texte sous les boutons, flèche à droite du mot */
@media (min-width: 821px) {
  .hero-fond .hero-suite { left: max(24px, calc((100% - 1140px) / 2)); transform: none; flex-direction: row; align-items: center; gap: 10px;
    padding: 11px 24px; border: 2px solid rgb(255 255 255 / .55); border-radius: 50px; color: #fff;
    font: 700 .92rem/1.2 var(--police-titres); letter-spacing: .02em; text-transform: none; }
  .hero-fond .hero-suite > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hero-fond .hero-suite .icone { order: 2; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 0; animation: none; display: block; }
  .hero-fond .hero-suite:hover { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }
  .hero-fond .hero-suite:hover .icone { background: none; color: #fff; }
}

/* ── Barre de confiance : bandeau blanc à icônes bleues ─────────────────── */
.confiance { background: #fff; border-bottom: 1px solid var(--c-bordure); }
.confiance ul { padding: 24px 0; }
.confiance .icone { color: var(--bleu); width: 42px; height: 42px; padding: 9px; background: #eaf2fb; border-radius: 50%; }
.confiance strong { color: var(--nuit); font-family: var(--police-titres); font-weight: 700; }
@media (max-width: 899px) { .confiance ul { display: grid; grid-template-columns: 1fr; gap: 14px; } }

/* ── Services : cartes blanches arrondies, titres en capitales bleues ──── */
#services { background: #fff; }
.carte { background: #fff; border: 0; border-radius: var(--arrondi); box-shadow: var(--ombre); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.carte:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(30, 95, 165, .2); }
#services .carte { text-align: center; }
#services .carte h3, #services .carte-lien-titre { color: var(--bleu); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }

/* ── Présentation : section en dégradé bleu, texte blanc, chiffres (ancien site) ── */
#apropos { background: var(--degrade); color: #fff; }
#apropos h2, #apropos .section-surtitre { color: #fff; }
#apropos h2 { text-decoration-color: var(--ciel); }
#apropos p { color: rgba(255, 255, 255, .92); }
#apropos .chiffre { color: #fff; font-family: var(--police-titres); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
#apropos .chiffre-legende { color: var(--ciel); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; }
#apropos .chiffres li { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-left: 4px solid var(--ciel); box-shadow: none; }
#apropos .chiffres { align-self: center; }

/* ── Pourquoi choisir : fond gris clair, cartes à icône ronde ────────────── */
.hero ~ .section.section-engagements:not(.section-appel) { background: var(--gris-clair); }
.engagements li { background: #fff; border: 0; border-radius: var(--arrondi); box-shadow: var(--ombre); padding: 34px 24px; text-align: center; }
.engagements .icone { color: #fff; background: linear-gradient(135deg, var(--bleu), var(--bleu-clair)); width: 64px; height: 64px; padding: 16px; border-radius: 50%; margin: 0 auto 10px; }
.engagements h3 { text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }

/* ── Nous trouver, zones, carte ──────────────────────────────────────────── */
#trouver { background: #fff; }
.titre-bloc { font-size: 1.2rem; color: var(--nuit); }
.coordonnees .icone { color: var(--bleu); }
.zones li { background: #eaf2fb; color: var(--nuit); border-radius: 50px; }
.au-clic { border-radius: var(--arrondi); }

/* ── FAQ : questions dans des cartes blanches, signe « + » rond (ancien site) ── */
#faq { background: var(--gris-clair); }
.faq details { background: #fff; border: 1px solid var(--c-bordure); border-radius: var(--arrondi); }
.faq summary { font-family: var(--police-titres); font-weight: 600; color: var(--nuit); }

/* ── Ils nous font confiance : logos en couleurs dans des cartes blanches (ancien site) ── */
.hero ~ .section[aria-labelledby="partenaires-titre"]:not(.section-appel) { background: #fff; }
.partenaires { gap: 24px 30px; }   /* logos en couleurs dans des cartes : option SITE['partenaires_couleur'] */

/* ── Formulaires ────────────────────────────────────────────────────────── */
.formulaire { background: #fff; border-radius: var(--arrondi); box-shadow: var(--ombre); }
.champ input, .champ textarea, .champ select { background: #f8fafd; border-radius: 8px; }

/* ── Bandeau d'appel et pied de page bleu nuit avec une vague (ancien site) ── */
.section-appel { background: var(--degrade); }
.section-appel h2 { color: #fff; text-decoration: none; }
.section-appel p { color: rgba(255, 255, 255, .9); }
.section-appel .bouton-clair { background: #fff; color: var(--nuit); box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.pied { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .82); margin-top: 60px; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,70 480,0 720,35 C960,70 1200,0 1440,35 L1440,70 L0,70 Z' fill='%231a2f4e'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.section-appel + .pied, main + .pied { margin-top: 0; }
.pied-nom { font-family: var(--police-titres); font-weight: 700; color: #fff; }
.pied-titre { color: var(--ciel); font-family: var(--police-titres); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.pied-liens a, .pied address a { color: #fff; text-decoration: none; }
.pied-liens a:hover, .pied address a:hover { text-decoration: underline; }
.pied-bas { color: rgba(255, 255, 255, .7); }

/* ── Téléphone ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .logo-image img { height: 46px; }
  .barre-mobile { background: var(--nuit); border-top: 2px solid var(--bleu-clair); }
  .barre-mobile a { color: #fff; font-weight: 600; }
  .barre-mobile a + a { border-left-color: rgba(255, 255, 255, .2); }
}
@media (max-width: 520px) { #apropos .chiffres { grid-template-columns: 1fr 1fr; } }