/*
Theme Name: Fantastic Loans
Theme URI: https://fantastic-loans.com
Author: Fantastic Loans
Description: Thème bloc sur mesure pour Fantastic Loans — plateforme de crédit en ligne. Trois langues : allemand, portugais, italien. Palette bleu nuit et or, tirée du logo.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fantastic-loans
Tags: block-theme, full-site-editing, finance, one-column, translation-ready
*/

/* ==========================================================================
   Ce fichier est GÉNÉRÉ par scripts/build-theme.py :
     modeles/theme/entete.css  +  site/assets/style.css  +  modeles/theme/gutenberg.css
   Ne pas l'éditer directement — la correction se perdrait à la génération
   suivante. Le CSS du design se modifie dans site/assets/style.css.
   ========================================================================== */

/* ==========================================================================
   Fantastic Loans — maquette phase 2
   Structure et dispositifs relevés sur la référence Guawa.
   Palette prélevée au pixel sur le logo fourni par le client :
   bleu nuit #001F5C → #2B4C7D, or #AF8440 → #FDE76F, sur fond blanc froid.
   ========================================================================== */

:root {
  --bleu-nuit:   #001F5C;
  --bleu:        #012866;
  --bleu-clair:  #2B4C7D;

  --or-sombre:   #AF8440;
  --or:          #E6B75F;
  --or-clair:    #FDE76F;

  --encre:       #0B1C3A;
  --encre-douce: #5C6B86;
  --attenue:     #9AA8BE;

  --blanc:       #FFFFFF;
  --fond:        #F2F5FA;
  --fond-2:      #E7EDF7;
  --bord:        #DCE3EF;

  --degrade:    linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-clair) 100%);
  --degrade-or: linear-gradient(135deg, var(--or-sombre) 0%, var(--or) 48%, var(--or-clair) 100%);

  --r-bande: 40px;
  --r-carte: 28px;
  --r-bloc:  20px;
  --r-pilule: 999px;

  --large: 1180px;
  --respir: 120px;
}

/* ---------- Socle ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* une seule famille sur toute la page, contrôles de formulaire compris */
button, input, select, textarea, output, legend, fieldset { font: inherit; }

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Pleine largeur : aucune marge latérale. `clip` et non `hidden`, sinon
   .page deviendrait défilable et le focus sur un élément de bord
   décalerait toute la page. */
.enveloppe {
  width: 100%;
  background: var(--fond);
  overflow: hidden;
  overflow: clip;
  position: relative;
}

/* ---------- Pièces communes ---------- */

.bouton-or,
.bouton-nuit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pilule);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bouton-or {
  background: var(--degrade-or);
  color: var(--bleu-nuit);
  box-shadow: 0 10px 26px rgba(175,132,64,.34);
}
.bouton-nuit { background: var(--degrade); color: var(--blanc); }
.bouton-or:hover, .bouton-nuit:hover { transform: translateY(-2px); }
.bouton-or:hover { box-shadow: 0 14px 32px rgba(175,132,64,.44); }

.petit { padding: 13px 24px; font-size: 15px; }
.grand { padding: 20px 40px; font-size: 17px; }

.titre-section {
  font-size: clamp(30px, 3.4vw, 46px);
  text-align: center;
}
.titre-section.clair { color: var(--blanc); }

.puce-or,
.puce-sombre,
.puce-fantome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pilule);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.puce-or     { background: var(--degrade-or); color: var(--bleu-nuit); padding: 11px 20px; }
.puce-sombre { background: rgba(255,255,255,.16); color: var(--blanc); padding: 5px 15px; font-size: 13px; }
.puce-fantome{ background: rgba(255,255,255,.18); color: var(--blanc); padding: 8px 17px;
               border: 0; cursor: pointer; }
.puce-fantome:hover { background: rgba(255,255,255,.3); }

/* ==========================================================================
   EN-TETE
   ========================================================================== */

.entete {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 46px;
  max-width: 1600px;
  margin: 0 auto;
}

/* La respiration est posée après le logo : la navigation et les actions
   forment ensuite un seul bloc à droite. */
.logo { display: inline-flex; align-items: center; margin-right: auto; }
.logo img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav-item { position: relative; }
.nav-lien {
  font-size: 15.5px; font-weight: 600; color: var(--encre-douce);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .15s ease;
}
.nav-lien:hover { color: var(--bleu); }

.sous-menu {
  position: absolute; top: calc(100% + 18px); left: -24px;
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 22px;
  box-shadow: 0 26px 60px rgba(1,30,80,.18);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .18s ease;
}
.nav-deroulant:hover .sous-menu,
.nav-deroulant:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
.sous-menu-grille {
  display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 2px 20px;
}
.sous-menu-grille a {
  padding: 9px 12px; border-radius: 11px; font-size: 15px; font-weight: 600;
  color: var(--encre-douce);
}
.sous-menu-grille a:hover { background: var(--fond); color: var(--bleu); }

.entete-actions { display: flex; align-items: center; gap: 14px; }
.lien-discret { font-size: 15.5px; font-weight: 700; color: var(--bleu); }
.lien-discret:hover { text-decoration: underline; }

/* --- sélecteur de langue --- */

.selecteur-langue { position: relative; }
.bouton-langue {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  font-size: 14px; font-weight: 800; color: var(--bleu);
  cursor: pointer;
}
.bouton-langue svg { width: 17px; height: 17px; fill: currentColor; }
.bouton-langue:hover { border-color: var(--or); }

.menu-langue {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 160px;
  background: var(--blanc);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 44px rgba(1,30,80,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .16s ease;
  z-index: 50;
}
.selecteur-langue.ouvert .menu-langue,
.selecteur-langue:focus-within .menu-langue { opacity: 1; visibility: visible; transform: none; }
.menu-langue a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 700; color: var(--encre-douce);
}
.menu-langue a:hover { background: var(--fond); color: var(--bleu); }

/* --- menu mobile : panneau plein ecran --- */

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 14px;
  background: var(--fond-2);
  cursor: pointer; padding: 0;
  place-items: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2.4px; border-radius: 2px;
  background: var(--bleu);
}

.menu-mobile {
  display: none;
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--blanc);
  overflow-y: auto;
  padding: 0 24px 32px;
  flex-direction: column;
}
.menu-mobile.ouvert { display: flex; }

.menu-mobile-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 36px;
}
.menu-mobile-tete .logo img { height: 34px; width: auto; }

.fermer-menu {
  position: relative;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
}
.fermer-menu::before, .fermer-menu::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 2.6px; border-radius: 2px;
  background: var(--encre);
}
.fermer-menu::before { transform: translate(-50%, -50%) rotate(45deg); }
.fermer-menu::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.menu-mobile-liste { display: flex; flex-direction: column; }

.menu-mobile .entree {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}

/* le chevron des entrees depliables */
.menu-mobile .entree-bascule::after {
  content: "";
  width: 13px; height: 13px;
  border-right: 2.6px solid var(--encre);
  border-bottom: 2.6px solid var(--encre);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .18s ease;
}
.entree-deroulante.ouverte .entree-bascule::after {
  transform: rotate(225deg) translate(-4px, -4px);
}

/* la liste des produits est repliee par defaut */
.menu-mobile .entree-deroulante > .menu-mobile-grille { display: none; }
.menu-mobile .entree-deroulante.ouverte > .menu-mobile-grille { display: grid; }

.menu-mobile .menu-mobile-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
  padding: 4px 0 14px;
}
.menu-mobile .menu-mobile-grille a {
  padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--encre-douce);
}

/* --- choix de la langue, drapeau en tete --- */

.menu-mobile-langues {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--bord);
  display: flex; flex-direction: column;
}
.menu-mobile .menu-mobile-titre {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--encre-douce);
  margin-bottom: 8px;
}
.entree-langue {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  font-size: 18px; font-weight: 600; color: var(--encre);
}
.entree-langue.est-actuelle { font-weight: 800; color: var(--bleu); }
.entree-langue.est-actuelle::after {
  content: "✓";
  margin-left: auto;
  font-weight: 800; color: var(--or-sombre);
}

.menu-mobile-cta { margin-top: 28px; width: 100%; }

/* ==========================================================================
   HERO — l'objet central est le simulateur, les figures débordent
   ========================================================================== */

.hero {
  position: relative;
  padding: 10px 40px 92px;
  text-align: center;
}

.hero-arche {
  position: absolute; inset: -220px -8% auto -8%;
  height: 760px;
  background: radial-gradient(60% 72% at 50% 100%, #FFFFFF 0%, #FAFCFF 42%, rgba(242,245,250,0) 72%);
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
  pointer-events: none;
}

.hero-haut { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; }

.titre-hero {
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.12;
  margin: 26px auto 0;
  max-width: 900px;
  text-wrap: balance;
}
.titre-hero .attenue { color: var(--attenue); }

.badge-flottant {
  position: absolute; top: 0; right: 4px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--degrade-or);
  color: var(--bleu-nuit);
  font-weight: 800; font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--r-pilule);
  box-shadow: 0 16px 34px rgba(175,132,64,.34);
}

.hero-scene {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 34px auto 0;
  display: flex;
  justify-content: center;
}

/* Figures détourées : positionnées sur le centre de la tête, relevé sur
   les fichiers (femme 55 % de sa largeur, homme 36 % de la sienne) pour
   que les visages restent en dehors de la carte. */
.figure {
  position: absolute;
  top: -26px;
  width: auto;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0) 99%);
}
.figure-gauche { left: -214px;  height: 760px; }
.figure-droite { right: -269px; height: 760px; }

.simulateur {
  position: relative;
  z-index: 3;
  width: min(640px, 100%);
  text-align: left;
  background: var(--degrade);
  border-radius: var(--r-carte);
  padding: 30px 32px 32px;
  color: var(--blanc);
  box-shadow: 0 34px 70px rgba(1,24,70,.3);
}

.simu-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.simu-tete h2 { font-size: 25px; }

.simu-label {
  display: block;
  font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,.78);
  padding: 0;
}
.simu-tete + .simu-label { margin-top: 22px; }

.simu-chiffre {
  display: block;
  font-size: 42px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  margin-top: 2px;
  color: var(--or-clair);
}

.curseur {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 13px; margin: 16px 0 0;
  border-radius: var(--r-pilule);
  background: rgba(255,255,255,.22);
  cursor: pointer;
}
.curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--blanc);
  border: 5px solid var(--or);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.curseur::-moz-range-thumb {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--blanc); border: 5px solid var(--or);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

.simu-bornes { display: flex; justify-content: space-between; margin-top: 11px; }

.simu-select {
  width: 100%;
  margin-top: 9px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-bloc);
  background: rgba(255,255,255,.12);
  color: var(--blanc);
  font-weight: 700;
  cursor: pointer;
}
.simu-select option { color: var(--encre); background: var(--blanc); }
.simu-tete + .simu-label,
.simu-bornes + .simu-label { margin-top: 22px; }

.simu-durees { border: 0; padding: 0; margin: 22px 0 0; }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.onglet {
  font-size: 14px; font-weight: 700;
  padding: 9px 17px; border-radius: var(--r-pilule);
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: var(--blanc);
  transition: background .15s ease, color .15s ease;
}
.onglet:hover { background: rgba(255,255,255,.28); }
.onglet.actif { background: var(--degrade-or); color: var(--bleu-nuit); }

.simu-resultats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.simu-case {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-bloc);
  padding: 15px 18px 17px;
}
.simu-case strong { display: block; font-size: 22px; font-weight: 800; margin-top: 3px; }

/* le lancement de la simulation, repris du parcours Floa */
.simu-lancer { margin-top: 24px; text-align: center; }
.simu-lancer .bouton-or { width: 100%; }
.simu-lancer-note {
  margin-top: 11px;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.82);
}

.simu-mention {
  margin-top: 18px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(255,255,255,.62);
}

/* ==========================================================================
   PANNEAU CHEVAUCHANT — remonte sur les figures
   ========================================================================== */

.panneau {
  position: relative;
  z-index: 5;
  max-width: var(--large);
  margin: -40px auto 0;
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 32px 34px 36px;
  box-shadow: 0 30px 70px rgba(1,30,80,.12);
}

.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.panneau-tete h2 { font-size: 26px; }

.cartes-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }

.carte-solution {
  border: 2px solid var(--bord);
  border-radius: var(--r-bloc);
  padding: 24px 24px 22px;
  background: var(--blanc);
  transition: border-color .18s ease, transform .18s ease;
}
.carte-solution:hover { transform: translateY(-3px); }
.carte-solution.active { border-color: var(--or); background: #FDFAF3; }
.carte-solution h3 { font-size: 19px; }
.carte-solution p { margin-top: 9px; font-size: 15px; color: var(--encre-douce); line-height: 1.55; }
.carte-chiffre { margin-top: 16px !important; font-size: 14px !important; color: var(--encre-douce); }
.carte-chiffre strong { font-size: 26px; color: var(--bleu); letter-spacing: -0.02em; }
.carte-chiffre span { font-size: 13px; }

/* ==========================================================================
   BANDE DE MARQUE PLEINE LARGEUR
   ========================================================================== */

.bande-marque {
  margin-top: var(--respir);
  background: var(--degrade);
  padding: 76px 46px 84px;
  border-radius: var(--r-bande) var(--r-bande) 0 0;
}

.grille-atouts {
  max-width: var(--large);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.carte-atout {
  grid-column: span 2;
  background: var(--blanc);
  border-radius: var(--r-bloc);
  padding: 24px 24px 26px;
}
.carte-atout:nth-child(4) { grid-column: 2 / span 2; }
.carte-atout:nth-child(5) { grid-column: 4 / span 2; }
.pictogramme { font-size: 26px; display: block; }
.carte-atout h3 { font-size: 18px; margin-top: 14px; }
.carte-atout p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--encre-douce); }

/* ==========================================================================
   PARCOURS — section asymétrique, texte à gauche
   ========================================================================== */

.parcours {
  max-width: var(--large);
  margin: 0 auto;
  padding: 90px 0 var(--respir);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.parcours-texte h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; color: var(--encre-douce); }
.parcours-texte h2 strong { font-weight: 800; color: var(--encre); }
.chapo { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--encre-douce); max-width: 46ch; }

.etapes { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.etapes li { display: flex; gap: 16px; align-items: flex-start; }
.num {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--degrade-or); color: var(--bleu-nuit);
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.etapes h3 { font-size: 17px; }
.etapes p { font-size: 15px; color: var(--encre-douce); margin-top: 3px; line-height: 1.5; }

.parcours-visuel { position: relative; }
.parcours-visuel img {
  border-radius: var(--r-carte);
  width: 100%; object-fit: cover;
  aspect-ratio: 4 / 3.4;
}
.bulle {
  position: absolute;
  left: -26px; bottom: 44px;
  display: inline-flex; align-items: baseline; gap: 12px;
  background: var(--degrade);
  color: var(--blanc);
  font-weight: 700; font-size: 16px;
  padding: 15px 26px;
  border-radius: var(--r-pilule);
  box-shadow: 0 20px 40px rgba(1,30,80,.3);
}
.bulle span { font-size: 12px; font-weight: 600; opacity: .75; }

/* ==========================================================================
   BANDEAU — section courte, type énorme
   ========================================================================== */

.bandeau-cta {
  max-width: var(--large);
  margin: 0 auto;
  background: var(--degrade);
  border-radius: var(--r-carte);
  padding: 58px 40px;
  text-align: center;
}
.bandeau-cta h2 { color: var(--blanc); font-size: clamp(28px, 3.6vw, 48px); }

/* ==========================================================================
   CONDITIONS — dense, pilules bleu nuit
   ========================================================================== */

.conditions { max-width: 940px; margin: 0 auto; padding: 86px 24px 0; }
.liste-pilules {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.liste-pilules li {
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-pilule);
  padding: 15px 26px 15px 48px;
  font-size: 15px; font-weight: 600;
  position: relative;
}
.liste-pilules li::before {
  content: "✓";
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-weight: 800; color: var(--or-clair);
}

/* ==========================================================================
   TAUX — figure détourée + pastilles flottantes
   ========================================================================== */

.taux {
  max-width: var(--large);
  margin: 0 auto;
  padding: var(--respir) 0;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.taux-visuel { position: relative; }
.taux-visuel::after {
  content: "";
  position: absolute; left: 50%; bottom: -26px;
  width: 360px; height: 360px; margin-left: -180px;
  background: radial-gradient(circle, rgba(43,76,125,.14) 0%, rgba(43,76,125,0) 68%);
  z-index: 0;
}
.taux-visuel img {
  position: relative; z-index: 1;
  height: 460px; width: auto; margin: 0 auto;
  transform: scaleX(-1);
}

.pastille {
  position: absolute; z-index: 2;
  background: var(--degrade-or);
  color: var(--bleu-nuit);
  font-weight: 800; font-size: 15px;
  padding: 11px 20px;
  border-radius: var(--r-pilule);
  box-shadow: 0 14px 30px rgba(175,132,64,.3);
}
.p1 { top: 14%;  left: -6px; }
.p2 { top: 42%;  right: -4px; }
.p3 { bottom: 20%; left: 8px; }

.taux-texte h2 { font-size: clamp(30px, 3.2vw, 44px); }
.sur-titre { margin-top: 12px; color: var(--bleu); font-weight: 800; font-size: 17px; }
.taux-texte p + p { margin-top: 14px; }
.taux-texte > p { color: var(--encre-douce); line-height: 1.65; max-width: 54ch; }

.encart-exemple {
  margin-top: 26px;
  background: var(--blanc);
  border-radius: var(--r-bloc);
  padding: 22px 24px 24px;
  border: 2px solid var(--bord);
}
.encart-exemple h3 { font-size: 15px; }
.encart-exemple p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--encre-douce); }
.encart-exemple strong { color: var(--encre); }
.encart-exemple .mention { font-size: 12px; opacity: .75; }

/* ==========================================================================
   FAQ — colonne étroite, centrée
   ========================================================================== */

.faq { max-width: 860px; margin: 0 auto; padding: 0 24px var(--respir); }
.faq-chapo { text-align: center; margin-top: 14px; color: var(--encre-douce); }

.accordeon { margin-top: 36px; display: grid; gap: 10px; }
.qr { background: var(--blanc); border-radius: var(--r-bloc); overflow: hidden; }
.qr-question {
  width: 100%; text-align: left;
  font-size: 17px; font-weight: 700; color: var(--encre);
  background: none; border: 0; cursor: pointer;
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.chevron {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fond-2);
  position: relative;
  transition: background .2s ease;
}
.chevron::before, .chevron::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2.4px; border-radius: 2px; background: var(--bleu);
  transform: translate(-50%, -50%);
}
.chevron::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .2s ease; }
.qr.ouverte .chevron { background: var(--degrade-or); }
.qr.ouverte .chevron::after { opacity: 0; }

.qr-reponse { display: none; padding: 0 26px 24px; }
.qr.ouverte .qr-reponse { display: block; }
.qr-reponse p { color: var(--encre-douce); line-height: 1.65; font-size: 15.5px; max-width: 70ch; }

/* ==========================================================================
   PAGE DE RESULTAT DE SIMULATION
   ========================================================================== */

.resultat {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 110px;
}

.resultat-titre {
  font-size: clamp(26px, 2.8vw, 36px);
  text-align: center;
  text-wrap: balance;
}
.resultat-titre span { color: var(--bleu); }
.resultat-sous-titre {
  text-align: center; margin-top: 8px;
  font-size: 15px; color: var(--encre-douce);
}

.resultat-corps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: start;
}

/* --- colonne des réglages --- */

.reglages { padding-top: 6px; }
.reglage-titre {
  display: block;
  font-size: 19px; font-weight: 800;
  letter-spacing: -0.02em;
}
.reglages .reglage-titre + .champ-unite { margin-top: 16px; }
.reglages .reglage-bornes + .reglage-titre { margin-top: 44px; }

.champ-unite {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--bord);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blanc);
}
.champ-unite input {
  width: 110px;
  border: 0; outline: 0;
  padding: 12px 14px;
  font-size: 17px; font-weight: 800;
  color: var(--encre);
  background: transparent;
}
.champ-unite input:focus { box-shadow: inset 0 0 0 2px var(--or); }
.champ-unite .unite {
  display: grid; place-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--bord);
  background: var(--fond-2);
  font-size: 13px; font-weight: 800;
  color: var(--encre-douce);
  letter-spacing: .04em;
}

/* le curseur est ici sur fond clair : la piste vide doit se voir */
.reglages .curseur { background: var(--fond-2); margin-top: 20px; }

.reglage-bornes {
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-size: 14px; color: var(--encre-douce);
}

/* --- carte de résultat --- */

.carte-resultat {
  position: relative;
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 36px 36px 34px;
  box-shadow: 0 30px 70px rgba(1,24,70,.26);
}
.carte-resultat-icone {
  position: absolute; top: 30px; right: 32px;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(0,0,0,.26);
  display: grid; place-items: center;
}
.carte-resultat-icone svg { width: 34px; height: 34px; fill: var(--or-clair); }

.carte-label { font-size: 17px; font-weight: 700; color: rgba(255,255,255,.86); }
.carte-mensualite {
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  margin-top: 4px;
  color: var(--or-clair);
}
.carte-duree { font-size: 17px; font-weight: 700; margin-top: 4px; }

.carte-lignes { margin: 30px 0 0; }
.carte-lignes .ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.carte-lignes dt { font-size: 16px; font-weight: 800; }
.carte-lignes dd { margin: 0; font-size: 17px; font-weight: 800; }
.carte-lignes .mince { padding: 7px 0; border-top: 0; }
.carte-lignes .mince dt,
.carte-lignes .mince dd { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.84); }
.carte-lignes .forte { padding-bottom: 8px; }

.carte-action { display: flex; margin: 26px auto 0; }
.carte-resultat .bouton-nuit {
  background: #06101F;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}

.resultat-reprise { text-align: center; margin-top: 30px; }
.resultat-reprise a {
  font-weight: 700; color: var(--bleu);
  text-decoration: underline; text-underline-offset: 4px;
}
.resultat-mention {
  max-width: 760px; margin: 28px auto 0;
  text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--encre-douce);
}

/* ==========================================================================
   PAGE DE DEMANDE DE PRET
   ========================================================================== */

.demande { max-width: 1140px; margin: 0 auto; padding: 34px 24px 110px; }

.fil {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--encre-douce);
}
.fil a { font-weight: 600; }
.fil a:hover { color: var(--bleu); text-decoration: underline; }
.fil strong { color: var(--bleu); }

.demande-titre { margin-top: 20px; font-size: clamp(28px, 3vw, 40px); }
.demande-chapo { margin-top: 12px; color: var(--encre-douce); max-width: 60ch; }

.demande-corps {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 48px;
  align-items: start;
}

/* --- le formulaire --- */

.groupe-champs { border: 0; padding: 0; margin: 0 0 34px; }
.groupe-champs legend {
  padding: 0; margin-bottom: 18px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
}

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: 14px; font-weight: 700; color: var(--encre-douce); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--blanc);
  color: var(--encre);
  font-weight: 600;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: 0; border-color: var(--or); box-shadow: 0 0 0 3px rgba(230,183,95,.3); }
.champ.en-defaut input,
.champ.en-defaut select { border-color: #C2453B; background: #FDF4F3; }

.case {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--blanc);
  font-size: 15px; line-height: 1.5;
  cursor: pointer;
}
.case + .case { margin-top: 10px; }
.case input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bleu); flex: 0 0 auto; }
.case.en-defaut { border-color: #C2453B; background: #FDF4F3; }

.formulaire-erreur {
  margin-bottom: 16px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #FDF4F3;
  border: 1px solid #E8B6B1;
  color: #8E2C24;
  font-size: 15px; font-weight: 700;
}
.formulaire-envoi { width: 100%; }
.formulaire-mention {
  margin-top: 16px;
  font-size: 12.5px; line-height: 1.6; color: var(--encre-douce);
}

/* --- rappel de la simulation --- */

.recap {
  position: sticky; top: 24px;
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 28px 28px 26px;
  box-shadow: 0 26px 60px rgba(1,24,70,.24);
}
.recap-titre { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.78); }
.recap-projet {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  margin-top: 4px; color: var(--or-clair);
}
.recap-lignes { margin: 20px 0 0; }
.recap-lignes .ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.recap-lignes dt { font-size: 15px; font-weight: 700; }
.recap-lignes dd { margin: 0; font-size: 16px; font-weight: 800; }
.recap-lignes .forte dd { color: var(--or-clair); font-size: 20px; }
.recap-lignes .mince { padding: 6px 0; border-top: 0; }
.recap-lignes .mince dt,
.recap-lignes .mince dd { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }

.recap-modifier {
  display: inline-block; margin-top: 18px;
  font-size: 14px; font-weight: 700; color: var(--or-clair);
  text-decoration: underline; text-underline-offset: 4px;
}

/* --- confirmation --- */

.confirmation {
  max-width: 620px; margin: 40px auto 0;
  text-align: center;
  background: var(--blanc);
  border-radius: var(--r-carte);
  padding: 46px 34px 42px;
  box-shadow: 0 26px 60px rgba(1,30,80,.12);
}
.confirmation-coche {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--degrade-or);
  color: var(--bleu-nuit);
  font-size: 30px; font-weight: 800;
}
.confirmation h2 { font-size: 28px; }
.confirmation p { margin-top: 14px; color: var(--encre-douce); line-height: 1.65; }
.confirmation .bouton-nuit { margin-top: 26px; }

/* ==========================================================================
   PAGES INTERNES — socle commun
   ========================================================================== */

.page-interne { max-width: var(--large); margin: 0 auto; padding: 34px 24px 100px; }

.entete-interne { max-width: 760px; }
.entete-interne h1 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 46px); }
.chapo-interne { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--encre-douce); }

.mention-interne {
  margin-top: 64px; padding-top: 22px;
  border-top: 1px solid var(--bord);
  font-size: 12.5px; color: var(--encre-douce);
}

.lien-souligne {
  font-weight: 700; color: var(--bleu);
  text-decoration: underline; text-underline-offset: 4px;
}

/* ==========================================================================
   GRILLE DE PRODUITS
   ========================================================================== */

.grille-produits {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.carte-produit {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: var(--r-bloc);
  padding: 24px 24px 22px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.carte-produit:hover {
  transform: translateY(-3px);
  border-color: var(--or);
  box-shadow: 0 18px 40px rgba(1,30,80,.1);
}
.carte-produit h3 { font-size: 19px; }
.carte-produit > p { margin-top: 9px; font-size: 15px; line-height: 1.55; color: var(--encre-douce); }
.carte-produit-chiffres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px !important;
}
.carte-produit-chiffres span {
  background: var(--fond-2);
  border-radius: var(--r-pilule);
  padding: 6px 13px;
  font-size: 13px; font-weight: 700; color: var(--bleu);
}
.carte-produit-lien {
  margin-top: auto; padding-top: 18px;
  font-size: 14px; font-weight: 800; color: var(--bleu);
}
.carte-produit-lien::after { content: " →"; }

.encart-appel {
  margin-top: 56px;
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 46px 40px;
  text-align: center;
}
.encart-appel h2 { font-size: clamp(26px, 3vw, 36px); }
.encart-appel p { margin-top: 12px; color: rgba(255,255,255,.86); max-width: 54ch; margin-inline: auto; }
.encart-appel .bouton-or { margin-top: 26px; }
.encart-appel-note { margin-top: 12px !important; font-size: 14px; font-weight: 600; }

/* ==========================================================================
   FICHE PRODUIT
   ========================================================================== */

.produit-haut {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 56px;
  align-items: start;
}
.produit-texte h1 { margin-top: 20px; font-size: clamp(30px, 3.4vw, 44px); }
.produit-accroche { margin-top: 14px; font-size: 19px; font-weight: 700; color: var(--bleu); }

.produit-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.produit-points li {
  position: relative; padding-left: 32px;
  font-size: 16px; line-height: 1.55;
}
.produit-points li::before {
  content: "✓";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--degrade-or); color: var(--bleu-nuit);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}

.produit-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }

.produit-fiche {
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 28px 28px 24px;
  box-shadow: 0 26px 60px rgba(1,24,70,.22);
}
.produit-fiche-titre { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.78); margin-bottom: 6px; }

.encart-exemple-large { margin-top: 56px; max-width: none; }
.encart-exemple-large h2 { font-size: 19px; }

.bloc-conditions { margin-top: 64px; }
.bloc-conditions .liste-pilules { max-width: 940px; margin-inline: auto; }
.autres-produits { margin-top: 72px; }
.autres-produits .grille-produits { margin-top: 34px; }

/* ==========================================================================
   PAGES REDACTIONNELLES
   ========================================================================== */

.corps-redactionnel { max-width: 760px; margin-top: 48px; display: grid; gap: 38px; }
.section-redac h2 { font-size: 23px; }
.section-redac p { margin-top: 12px; line-height: 1.7; color: var(--encre-douce); }
.liste-puces { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.liste-puces li {
  position: relative; padding-left: 24px;
  line-height: 1.6; color: var(--encre-douce);
}
.liste-puces li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--or);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.bloc-contact {
  margin-top: 48px;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start;
}
.formulaire-contact h2 { font-size: 23px; margin-bottom: 20px; }
.formulaire-reponse {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #F2F8F3;
  border: 1px solid #BEDFC6;
  color: #1E6A33;
  font-size: 15px; font-weight: 700;
}

.carte-coordonnees {
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 28px;
}
.carte-coordonnees h2 { font-size: 20px; color: var(--or-clair); }
.carte-coordonnees p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); }
.carte-coordonnees strong { color: var(--blanc); font-size: 14px; }

/* ==========================================================================
   ESPACE CLIENT
   ========================================================================== */

.bloc-connexion {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.carte-connexion {
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: var(--r-carte);
  padding: 32px;
  display: grid; gap: 16px;
}
.carte-connexion h2 { font-size: 23px; }
.connexion-aide { text-align: center; font-size: 14px; }
.connexion-aide a { font-weight: 700; color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; }

.carte-connexion-aide {
  background: var(--degrade);
  color: var(--blanc);
  border-radius: var(--r-carte);
  padding: 32px;
}
.carte-connexion-aide h2 { font-size: 20px; color: var(--or-clair); margin-bottom: 8px; }
.carte-connexion-aide .liste-puces li { color: rgba(255,255,255,.88); }
.carte-connexion-aide .liste-puces li::before { background: var(--or-clair); }

/* ==========================================================================
   PLAN DU SITE
   ========================================================================== */

.grille-plan {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.colonne-plan { display: flex; flex-direction: column; gap: 10px; }
.colonne-plan h2 { font-size: 18px; margin-bottom: 6px; }
.colonne-plan a { font-size: 15px; font-weight: 600; color: var(--encre-douce); }
.colonne-plan a:hover { color: var(--bleu); text-decoration: underline; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.pied {
  background: var(--degrade);
  color: var(--blanc);
  padding: 72px 46px 38px;
  border-radius: var(--r-bande) var(--r-bande) 0 0;
}
.pied-haut {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.pied-logo { display: inline-flex; align-items: center; gap: 11px; }
.pied-logo .marque {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--degrade-or);
  box-shadow: inset -7px -7px 0 0 var(--bleu-nuit);
}
.pied-logo .mot { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--blanc); }
.pied-logo .mot span { color: var(--or-clair); }
.pied-marque p { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.84); max-width: 34ch; }
.pied-contact a { font-weight: 700; }
.pied-contact a:hover { text-decoration: underline; }

.pied-colonne { display: flex; flex-direction: column; gap: 9px; }
.pied-colonne h3 { font-size: 15px; margin-bottom: 6px; color: var(--or-clair); }
.pied-colonne a { font-size: 14.5px; color: rgba(255,255,255,.84); }
.pied-colonne a:hover { color: var(--blanc); text-decoration: underline; }

.avertissement {
  max-width: var(--large);
  margin: 46px auto 0;
  background: rgba(0,0,0,.24);
  border-radius: var(--r-bloc);
  padding: 15px 22px;
  font-size: 13.5px; font-weight: 600; text-align: center;
}
.pied-bas {
  max-width: var(--large);
  margin: 26px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pied-droits { font-size: 13px; color: rgba(255,255,255,.78); margin: 0; }
.pied-plan {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88);
  text-decoration: underline; text-underline-offset: 4px;
}
.pied-plan:hover { color: var(--blanc); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: grid; }
  .menu-mobile { padding-inline: 46px; }
  .entete-actions { margin-left: auto; }
}

@media (max-width: 1100px) {
  .parcours, .taux { grid-template-columns: 1fr; gap: 44px; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .cartes-solutions { grid-template-columns: 1fr; }
  .grille-atouts { grid-template-columns: 1fr 1fr; }
  .carte-atout, .carte-atout:nth-child(4), .carte-atout:nth-child(5) { grid-column: span 1; }
  .liste-pilules { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .entete { padding: 16px; gap: 8px; }
  .entete-actions { gap: 8px; }
  .entete .lien-discret { display: none; }
  .entete .bouton-or.petit { padding: 10px 14px; font-size: 13px; }
  .logo img { height: 32px; }
  .menu-mobile { padding-inline: 20px; }
  .hero { padding: 10px 18px 0; }
  .badge-flottant { position: static; margin: 0 auto 18px; }
  .hero-scene { margin-top: 26px; }
  .figure { display: none; }
  .simulateur { padding: 24px 20px 26px; }
  .simu-tete h2 { font-size: 21px; }
  .simu-chiffre { font-size: 34px; }
  .simu-resultats { grid-template-columns: 1fr; }
  .panneau { margin: 34px 14px 0; padding: 24px 20px 26px; }
  .panneau-tete { flex-direction: column; align-items: flex-start; }
  .bande-marque { padding: 54px 20px 60px; }
  .grille-atouts { grid-template-columns: 1fr; }
  .parcours, .taux { padding-left: 20px; padding-right: 20px; }
  .bandeau-cta { margin: 0 14px; padding: 40px 22px; }
  .bulle { left: 10px; bottom: 14px; font-size: 14px; padding: 12px 18px; }
  .taux-visuel img { height: 330px; }
  .pied { padding: 52px 22px 30px; }
  .pied-haut { grid-template-columns: 1fr; gap: 28px; }
  .resultat { padding: 28px 18px 80px; }
  .carte-resultat { padding: 28px 22px 26px; }
  .carte-resultat-icone { width: 54px; height: 54px; top: 24px; right: 22px; }
  .carte-resultat-icone svg { width: 26px; height: 26px; }
}

@media (max-width: 1000px) {
  .grille-produits { grid-template-columns: 1fr 1fr; }
  .grille-plan { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .resultat-corps { grid-template-columns: 1fr; gap: 40px; }
  .demande-corps { grid-template-columns: 1fr; gap: 36px; }
  .recap { position: static; order: -1; }
  .produit-haut { grid-template-columns: 1fr; gap: 36px; }
  .bloc-contact, .bloc-connexion { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  .grille-champs { grid-template-columns: 1fr; }
  .demande { padding: 24px 18px 80px; }
  .recap { padding: 22px 20px 20px; }
  .page-interne { padding: 24px 18px 70px; }
  .grille-produits, .grille-plan { grid-template-columns: 1fr; }
  .encart-appel { padding: 34px 22px; }
  .produit-fiche, .carte-coordonnees, .carte-connexion, .carte-connexion-aide { padding: 22px; }
  .produit-actions { gap: 16px; }
  .produit-actions .bouton-or { width: 100%; }
}

/* ==========================================================================
   BOUTONS FLOTTANTS — WhatsApp à gauche, retour en haut à droite
   Les icônes sont des masques CSS : un SVG inline ne porte aucune
   information éditable et n'a rien à faire dans le contenu.
   ========================================================================== */

.flottant {
  position: fixed;
  bottom: 26px;
  z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: transform .18s ease, opacity .22s ease, visibility .22s ease;
}
.flottant:hover { transform: translateY(-3px); }
.flottant::before {
  content: "";
  width: 28px; height: 28px;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

.flottant-whatsapp {
  left: 26px;
  background: #25D366;
  box-shadow: 0 12px 30px rgba(37,211,102,.4);
}
.flottant-whatsapp::before {
  background: #FFFFFF;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42l-.47-.01c-.16 0-.43.06-.65.31-.22.24-.85.83-.85 2.03s.88 2.35 1 2.51c.12.17 1.72 2.63 4.17 3.69.58.25 1.04.4 1.39.51.59.19 1.12.16 1.54.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.22-.16-.47-.28Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.42l-.47-.01c-.16 0-.43.06-.65.31-.22.24-.85.83-.85 2.03s.88 2.35 1 2.51c.12.17 1.72 2.63 4.17 3.69.58.25 1.04.4 1.39.51.59.19 1.12.16 1.54.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.1-.22-.16-.47-.28Z'/%3E%3C/svg%3E");
}

.flottant-haut {
  right: 26px;
  background: var(--degrade);
  box-shadow: 0 12px 30px rgba(1,24,70,.34);
  opacity: 0; visibility: hidden;
}
.flottant-haut.visible { opacity: 1; visibility: visible; }
.flottant-haut::before {
  background: var(--or-clair);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.6 4.3 12.3l1.6 1.6 5-5V20h2.2V8.9l5 5 1.6-1.6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.6 4.3 12.3l1.6 1.6 5-5V20h2.2V8.9l5 5 1.6-1.6z'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .flottant { width: 48px; height: 48px; bottom: 16px; }
  .flottant-whatsapp { left: 16px; }
  .flottant-haut { right: 16px; }
  .flottant::before { width: 24px; height: 24px; }
}

/* ==========================================================================
   MACHINE À ÉCRIRE — titre du hero
   Le texte complet reste dans le HTML : il est lisible sans script, et
   indexable. Le script ne fait que le révéler.
   ========================================================================== */

/* Pendant la frappe, la hauteur est figee et l'equilibrage desactive :
   `text-wrap: balance` redistribue les mots a chaque caractere et peut
   ajouter une ligne en cours de route — mesure : 53 px de saut. */
.titre-hero.en-frappe {
  height: var(--hauteur-titre, auto);
  overflow: hidden;
  text-wrap: pretty;
}
.titre-hero.en-frappe::after {
  content: "";
  display: inline-block;
  width: 3px; height: 0.92em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--or-sombre);
  animation: clignote 1s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .titre-hero.en-frappe::after { animation: none; }
}

/* ==========================================================================
   DRAPEAUX
   SVG intégrés en image de fond : un drapeau est multicolore, un masque CSS
   ne le rendrait qu'en aplat. Et les emojis drapeaux ne s'affichent pas
   sous Windows, qui les remplace par deux lettres.
   ========================================================================== */

.drapeau {
  display: inline-block;
  flex: 0 0 auto;
  width: 26px; height: 18px;
  border-radius: 3px;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11,28,58,.16);
}
.drapeau-de {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23000'/%3E%3Crect y='1' width='5' height='2' fill='%23DD0000'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E");
}
.drapeau-pt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FF0000'/%3E%3Crect width='2' height='3' fill='%23006600'/%3E%3Ccircle cx='2' cy='1.5' r='.62' fill='%23FFE600' stroke='%23006600' stroke-width='.14'/%3E%3C/svg%3E");
}
.drapeau-it {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FFFFFF'/%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E");
}
/* ==========================================================================
   RÉSEAUX SOCIAUX — pied de page
   Les glyphes sont des masques CSS : un SVG inline n'est pas un bloc natif
   et ne porte aucune information éditable (substitution 1 de la méthode).
   Le lien, lui, reste un vrai lien, donc modifiable dans l'éditeur.
   ========================================================================== */

.pied-reseaux {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reseau {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.reseau:hover {
  border-color: var(--or-clair);
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

/* le libellé reste dans le document pour les lecteurs d'écran */
.reseau span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.reseau::before {
  content: "";
  width: 20px; height: 20px;
  background: var(--blanc);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.reseau:hover::before { background: var(--or-clair); }

.reseau-facebook::before {
  -webkit-mask-image: var(--ico-facebook); mask-image: var(--ico-facebook);
}
.reseau-instagram::before {
  -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram);
}
.reseau-tiktok::before {
  -webkit-mask-image: var(--ico-tiktok); mask-image: var(--ico-tiktok);
}
.reseau-youtube::before {
  -webkit-mask-image: var(--ico-youtube); mask-image: var(--ico-youtube);
}
.reseau-linkedin::before {
  -webkit-mask-image: var(--ico-linkedin); mask-image: var(--ico-linkedin);
}
.reseau-telegram::before {
  -webkit-mask-image: var(--ico-telegram); mask-image: var(--ico-telegram);
}
.reseau-viber::before {
  -webkit-mask-image: var(--ico-viber); mask-image: var(--ico-viber);
}

:root {
  --ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21.5v-8.4h2.8l.42-3.3h-3.2V7.7c0-.95.27-1.6 1.63-1.6h1.74V3.15c-.3-.04-1.33-.13-2.53-.13-2.5 0-4.22 1.53-4.22 4.34v2.42H7.3v3.3h2.84v8.4z'/%3E%3C/svg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.3'/%3E%3C/svg%3E");
  --ico-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.9 5.9a4.5 4.5 0 0 1-1.1-2.9h-3.2v12.6a2.4 2.4 0 1 1-1.8-2.3V9.9a5.6 5.6 0 1 0 5 5.5V9.5a7.6 7.6 0 0 0 4.3 1.4V7.9a4.5 4.5 0 0 1-3.2-2z'/%3E%3C/svg%3E");
  --ico-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.55 2.55 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.42a2.55 2.55 0 0 0-1.8 1.8A26.6 26.6 0 0 0 2 12a26.6 26.6 0 0 0 .4 4.8 2.55 2.55 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.55 2.55 0 0 0 1.8-1.8A26.6 26.6 0 0 0 22 12a26.6 26.6 0 0 0-.4-4.8zM10 15.1V8.9l5.2 3.1z'/%3E%3C/svg%3E");
  --ico-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.9 20H4.1V9.3h2.8zM5.5 8.1a1.63 1.63 0 1 1 0-3.26 1.63 1.63 0 0 1 0 3.26zM20 20h-2.8v-5.6c0-1.5-.55-2.26-1.63-2.26-1.17 0-1.78.79-1.78 2.26V20h-2.7V9.3h2.7v1.22a3.17 3.17 0 0 1 2.74-1.5c1.93 0 3.47 1.18 3.47 4.2z'/%3E%3C/svg%3E");
  --ico-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 2.95 11.6c-1.05.42-1.04 1.4.04 1.72l4.62 1.44 1.78 5.38c.22.6.4.84.88.84.37 0 .54-.17.75-.38l2.25-2.2 4.68 3.46c.86.47 1.48.23 1.7-.8l3.07-14.5c.31-1.26-.48-1.83-1.3-1.46zM18 7.7 9.5 15.2l-.33 3.52-1.47-4.5z'/%3E%3C/svg%3E");
  --ico-viber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.9 2 2.8 5.8 2.8 10.5c0 2.6 1.3 4.9 3.3 6.4v4.3l3.9-2.2c.65.1 1.32.17 2 .17 5.1 0 9.2-3.8 9.2-8.67S17.1 2 12 2zm4.4 11.7c-.3.6-1.2 1-1.8 1-.5 0-1-.1-2.5-.8-2-.9-3.4-3-3.5-3.1-.1-.2-.9-1.2-.9-2.2s.5-1.5.7-1.7c.2-.2.4-.3.6-.3h.4c.15 0 .3 0 .5.4l.7 1.6c.1.2 0 .4-.1.5l-.3.4c-.1.13-.2.22-.08.42.1.2.5.9 1.08 1.4.8.7 1.4.9 1.6 1 .2.08.3.08.42-.1l.48-.6c.14-.18.3-.2.5-.12l1.5.8c.3.2.4.3.48.4.1.2.1.8-.18 1.4z'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .reseau { width: 38px; height: 38px; border-radius: 10px; }
  .reseau::before { width: 18px; height: 18px; }
  .pied-reseaux { gap: 8px; justify-content: center; }
}

@media (max-width: 680px) {
  .pied-bas { flex-direction: column; text-align: center; gap: 18px; }
}

/* ==========================================================================
   COUCHE D'ADAPTATION GUTENBERG
   Tout ce qui précède est le CSS de la maquette, inchangé. Ci-dessous, et
   seulement ici, ce qu'il faut ajouter pour que ce même CSS tienne sur des
   blocs natifs. Rien n'est réécrit au-dessus : c'est le principe de la
   méthode — les classes du composant sont posées sur le bloc via className.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Espacement automatique
   theme.json pose déjà blockGap à 0. Ceci est le filet de sécurité, écrit
   À SPÉCIFICITÉ NULLE : la version .wp-block-group > * écraserait toutes
   les marges des composants.
   -------------------------------------------------------------------------- */

:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }

/* --------------------------------------------------------------------------
   2 · Accents typographiques
   Une classe sur un élément inline d'un titre est invalidée par l'éditeur.
   Le gris atténué du titre hero passe donc par un <em> nu, stylé par son
   contexte. Même chose pour le mot en gras du titre de section parcours.
   -------------------------------------------------------------------------- */

.titre-hero em {
  font-style: normal;
  color: var(--attenue);
}
.parcours-texte h2 em {
  font-style: normal;
  font-weight: 800;
  color: var(--encre);
}
.carte-chiffre em {
  font-style: normal;
  font-size: 26px; font-weight: 800;
  color: var(--bleu); letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   3 · Couches décoratives
   L'arche du hero était un <div> vide : dans l'éditeur, un groupe vide est
   un bloc que le client sélectionne, ne comprend pas, et supprime. Elle
   devient un pseudo-élément de la section.
   -------------------------------------------------------------------------- */

.hero::before {
  content: "";
  position: absolute; inset: -220px -8% auto -8%;
  height: 760px;
  background: radial-gradient(60% 72% at 50% 100%, #FFFFFF 0%, #FAFCFF 42%, rgba(242,245,250,0) 72%);
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4 · Boutons
   core/button pose la className sur le CONTENEUR div.wp-block-button, pas
   sur le lien. Les styles visent donc le lien à l'intérieur, et le
   conteneur se neutralise — sinon il hérite des règles de la maquette et
   dessine une seconde pastille autour de la première.
   -------------------------------------------------------------------------- */

.wp-block-button.bouton-or,
.wp-block-button.bouton-nuit {
  display: inline-block;
  background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none;
}

.wp-block-button.bouton-or > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pilule);
  font-weight: 800; white-space: nowrap; cursor: pointer;
  background: var(--degrade-or);
  color: var(--bleu-nuit);
  box-shadow: 0 10px 26px rgba(175,132,64,.34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wp-block-button.bouton-or > .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(175,132,64,.44);
}

.wp-block-button.bouton-nuit > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pilule);
  font-weight: 800; white-space: nowrap;
  background: var(--degrade); color: var(--blanc);
  transition: transform .18s ease;
}
.wp-block-button.bouton-nuit > .wp-block-button__link:hover { transform: translateY(-2px); }

.wp-block-button.petit > .wp-block-button__link { padding: 13px 24px; font-size: 15px; }
.wp-block-button.grand > .wp-block-button__link { padding: 20px 40px; font-size: 17px; }

/* le CTA de l'en-tête et celui des encarts gardent leur place dans la rangée */
.entete-actions .wp-block-buttons { display: flex; }

/* --------------------------------------------------------------------------
   5 · Navigation
   core/navigation remplace les liens écrits à la main : c'est ce qui rend
   le menu réellement éditable. Les styles visent le lien interne du bloc.
   -------------------------------------------------------------------------- */

.wp-block-navigation.nav { gap: 26px; }
.nav .wp-block-navigation-item__content {
  font-size: 15.5px; font-weight: 600; color: var(--encre-douce);
  text-decoration: none;
  transition: color .15s ease;
}
.nav .wp-block-navigation-item__content:hover,
.nav .current-menu-item > .wp-block-navigation-item__content { color: var(--bleu); }

.nav .wp-block-navigation__submenu-container {
  background: var(--blanc);
  border: 0; border-radius: var(--r-carte);
  padding: 14px;
  box-shadow: 0 26px 60px rgba(1,30,80,.18);
  min-width: 260px;
}
.nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 12px; border-radius: 11px; font-size: 15px;
}
.nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--fond); color: var(--bleu);
}

/* Le panneau mobile est entièrement traité en section 12 : rien ici, sous
   peine d'écraser ces règles-là par une spécificité plus forte. Vécu :
   texte blanc sur fond blanc, et 18 px au lieu de 26. */

.pied .wp-block-navigation { display: block; }
.pied-colonne .wp-block-navigation-item__content {
  font-size: 14.5px; color: rgba(255,255,255,.84); text-decoration: none;
}
.pied-colonne .wp-block-navigation-item__content:hover { color: var(--blanc); text-decoration: underline; }

/* --------------------------------------------------------------------------
   6 · Images
   La className d'un core/image atterrit sur la FIGURE. Les règles de
   cadrage visent donc `.classe img`, jamais l'élément directement.
   -------------------------------------------------------------------------- */

figure.wp-block-image.figure { position: absolute; top: -26px; z-index: 1; pointer-events: none; }
figure.wp-block-image.figure img {
  width: auto; height: 760px; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,0) 99%);
}
figure.wp-block-image.figure-gauche { left: -214px; }
figure.wp-block-image.figure-droite { right: -269px; }

figure.wp-block-image.visuel-parcours img {
  border-radius: var(--r-carte);
  width: 100%; object-fit: cover; aspect-ratio: 4 / 3.4;
}
figure.wp-block-image.visuel-taux img {
  height: 460px; width: auto; margin: 0 auto;
  transform: scaleX(-1);
}
figure.wp-block-image.logo-site img { height: 42px; width: auto; }

/* --------------------------------------------------------------------------
   7 · Enveloppe et structure
   `.enveloppe` porte le fond et le rognage ; en thème bloc, c'est le <main>
   qui joue ce rôle. La classe reste la même, donc le CSS ne bouge pas.
   -------------------------------------------------------------------------- */

.wp-block-group.enveloppe { width: 100%; }
body .wp-site-blocks > * { margin-block: 0; }

/* --------------------------------------------------------------------------
   8 · Listes
   core/list sort un <ul class="wp-block-list"> : les listes stylées de la
   maquette doivent accepter cette classe en plus de la leur.
   -------------------------------------------------------------------------- */

ul.wp-block-list.liste-pilules,
ul.wp-block-list.liste-puces,
ul.wp-block-list.produit-points { padding-left: 0; list-style: none; }

/* --------------------------------------------------------------------------
   9 · Shortcodes des composants interactifs
   Le simulateur, la carte de résultat et les formulaires sont rendus par
   le thème. core/shortcode les enveloppe dans un paragraphe en édition ;
   sur le site, la sortie est le balisage de la maquette, inchangé.
   -------------------------------------------------------------------------- */

.wp-block-shortcode { margin: 0; }

/* --------------------------------------------------------------------------
   10 · Structures que la conversion a changées
   Chaque règle ci-dessous compense un écart de DOM entre la maquette et la
   sortie des blocs natifs, à géométrie identique.
   -------------------------------------------------------------------------- */

/* en-tête : le logo est une figure, pas un lien */
.entete > figure.wp-block-image.logo-site { margin-right: auto; }

/* sélecteur de langue rendu par core/navigation */
.menu-langue-bloc { gap: 10px; }
.menu-langue-bloc .wp-block-navigation-item__content {
  padding: 9px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r-pilule);
  background: var(--blanc);
  font-size: 14px; font-weight: 800; color: var(--bleu);
  text-decoration: none;
}
.menu-langue-bloc .wp-block-navigation-item__content:hover { border-color: var(--or); }

/* étapes du parcours : <li> flex devenu groupe en grille */
.etapes { display: grid; gap: 14px; }
.etape {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
  align-items: start;
}
.etape .num { grid-row: 1 / span 2; }
.etape h3 { font-size: 17px; grid-column: 2; }
.etape > p:not(.num) { grid-column: 2; font-size: 15px; color: var(--encre-douce); margin-top: 3px; line-height: 1.5; }

/* carte produit : <a> englobant devenu groupe, le lien est dans le titre */
.wp-block-group.carte-produit {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: var(--r-bloc);
  padding: 24px 24px 22px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wp-block-group.carte-produit:hover {
  transform: translateY(-3px); border-color: var(--or);
  box-shadow: 0 18px 40px rgba(1,30,80,.1);
}
.carte-produit h3 a { color: inherit; text-decoration: none; }
.carte-produit h3 a::after { content: ""; position: absolute; inset: 0; }
.wp-block-group.carte-produit { position: relative; }
.carte-produit-chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px !important; }
.carte-produit-chiffres em {
  font-style: normal;
  background: var(--fond-2); border-radius: var(--r-pilule);
  padding: 6px 13px; font-size: 13px; font-weight: 700; color: var(--bleu);
}

/* fiche de conditions du produit : <dl> devenu liste */
.fiche-lignes { margin: 6px 0 0; }
.fiche-lignes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 15px; font-weight: 700;
}
.fiche-lignes li em { font-style: normal; font-weight: 800; }
.fiche-lignes li:nth-child(3) em { color: var(--or-clair); font-size: 18px; }

/* bulle du parcours : <span> devenu <em> */
.bulle em { font-style: normal; font-size: 12px; font-weight: 600; opacity: .75; }

/* signature du pied : <span> imbriqués devenus strong + em */
.pied-logo { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--blanc); }
.pied-logo em { font-style: normal; color: var(--or-clair); }

/* titre de la page de résultat : le projet est un <em> */
.resultat-titre em { font-style: normal; color: var(--or-clair); }
.resultat-entete { max-width: none; text-align: center; }
.resultat-entete .resultat-titre em { color: var(--bleu); }

/* accordéon : le <button> est devenu un paragraphe éditable (substitution 3),
   le chevron un pseudo-élément — un <span> vide serait un bloc fantôme. */
/* le chevron était un élément du flux dans la maquette et donnait sa
   hauteur minimale à la ligne ; devenu pseudo-élément, il faut la poser. */
p.qr-question {
  position: relative;
  display: flex; align-items: center; min-height: 72px;
  width: 100%; text-align: left;
  font-size: 17px; font-weight: 700; color: var(--encre);
  padding: 22px 70px 22px 26px;
  cursor: pointer;
}
p.qr-question::after {
  content: "";
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fond-2);
}
p.qr-question::before {
  content: "+";
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; z-index: 1;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: var(--bleu);
}
.qr.ouverte p.qr-question::after { background: var(--degrade-or); }
.qr.ouverte p.qr-question::before { content: "–"; color: var(--bleu-nuit); }
.qr .qr-reponse { display: none; padding: 0 26px 24px; }
.qr.ouverte .qr-reponse { display: block; }

/* pictogramme des atouts : <span> devenu paragraphe */
/* devenu un <p>, il héritait de .carte-atout p : marge et hauteur de ligne
   à remettre sur celles du <span> de la maquette. */
p.pictogramme { font-size: 26px; margin-top: 0; line-height: 1.6; }

/* les colonnes du pied empilent leurs liens, le bloc les met en ligne */
.pied-colonne .wp-block-navigation,
.pied-colonne .wp-block-navigation__container {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.pied-colonne .wp-block-navigation-item { display: block; }

/* la signature du pied est un paragraphe parmi d'autres dans .pied-marque :
   elle héritait de leur couleur et de leur marge. */
.pied-marque > p.pied-logo {
  display: flex; align-items: center; gap: 11px;
  margin-top: 0;
  color: var(--blanc);
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
}
.pied-marque > p.pied-logo::before {
  content: "";
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--degrade-or);
  box-shadow: inset -7px -7px 0 0 var(--bleu-nuit);
}
.pied-logo strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   11 · Boutons flottants
   core/button pose la className sur le conteneur : l'icône et la position
   visent donc le conteneur, et le lien à l'intérieur se neutralise.
   -------------------------------------------------------------------------- */

.wp-block-buttons.boutons-flottants { display: contents; }

.wp-block-button.flottant > .wp-block-button__link {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border-radius: 50%;
  background: none; box-shadow: none;
  font-size: 0; line-height: 0;
  text-indent: -9999px; overflow: hidden;
}
.wp-block-button.flottant:hover > .wp-block-button__link { transform: none; }

/* Le conteneur du bouton flottant doit rester une grille pour centrer son
   icône : sans cela le pseudo-élément se colle en haut à gauche et le lien,
   qui occupe les 56 px, passe par-dessus. Le lien est donc sorti du flux. */
.wp-block-button.flottant {
  display: grid;
  place-items: center;
}
.wp-block-button.flottant > .wp-block-button__link {
  position: absolute;
  inset: 0;
  width: auto; height: auto;
}

/* --------------------------------------------------------------------------
   12 · Panneau mobile
   Le panneau du bloc natif a été abandonné : ses styles, imprimés après la
   feuille du thème, reprenaient la main à chaque correctif. Le panneau est
   donc celui de la maquette, au balisage maîtrisé. Son CSS est déjà dans la
   feuille ; ne restent ici que les écarts dus aux blocs.
   -------------------------------------------------------------------------- */

/* le burger est un paragraphe : trois barres en un seul pseudo-élément */
p.burger { display: none; }
@media (max-width: 1240px) {
  p.burger {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin: 0;
    border-radius: 14px; background: var(--fond-2);
    cursor: pointer;
  }
  p.burger::before {
    content: "";
    width: 18px; height: 14px;
    background:
      linear-gradient(var(--bleu), var(--bleu)) top    / 18px 2.4px no-repeat,
      linear-gradient(var(--bleu), var(--bleu)) center / 18px 2.4px no-repeat,
      linear-gradient(var(--bleu), var(--bleu)) bottom / 18px 2.4px no-repeat;
  }
}

/* la croix de fermeture est un paragraphe, pas un <button> */
p.fermer-menu {
  position: relative;
  width: 44px; height: 44px; margin: 0;
  cursor: pointer;
}

/* le logo du panneau est une figure */
.menu-mobile-tete figure.wp-block-image.logo-site { margin: 0; }
.menu-mobile-tete figure.wp-block-image.logo-site img { height: 34px; width: auto; }

/* les entrées sont des paragraphes contenant un lien */
.menu-mobile p.entree { margin: 0; }
.menu-mobile p.entree > a { color: inherit; text-decoration: none; flex: 1 1 auto; }
.menu-mobile .menu-mobile-grille p { margin: 0; }
.menu-mobile .menu-mobile-grille p > a {
  display: block; padding: 9px 0;
  font-size: 15px; font-weight: 600; color: var(--encre-douce);
  text-decoration: none;
}
.menu-mobile p.entree-langue { margin: 0; }
.menu-mobile p.entree-langue > a {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; width: 100%;
}
.menu-mobile p.entree-langue::before {
  content: "";
  flex: 0 0 auto;
  width: 26px; height: 18px; border-radius: 3px;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11,28,58,.16);
}
.menu-mobile p.drapeau-devant-de::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23000'/%3E%3Crect y='1' width='5' height='2' fill='%23DD0000'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E");
}
.menu-mobile p.drapeau-devant-pt::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FF0000'/%3E%3Crect width='2' height='3' fill='%23006600'/%3E%3Ccircle cx='2' cy='1.5' r='.62' fill='%23FFE600' stroke='%23006600' stroke-width='.14'/%3E%3C/svg%3E");
}
.menu-mobile p.drapeau-devant-it::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FFFFFF'/%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E");
}
.menu-mobile p.entree-langue {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; font-size: 18px; font-weight: 600; color: var(--encre);
}
.menu-mobile p.entree-langue.est-actuelle { font-weight: 800; color: var(--bleu); }
.menu-mobile p.entree-langue.est-actuelle::after {
  content: "✓"; margin-left: auto; font-weight: 800; color: var(--or-sombre);
}

/* le bouton du bas : conteneur core/buttons, pleine largeur */
.menu-mobile .wp-block-buttons.menu-mobile-cta { display: block; margin-top: 28px; }
.menu-mobile .wp-block-buttons.menu-mobile-cta .wp-block-button { display: block; width: 100%; }
.menu-mobile .wp-block-buttons.menu-mobile-cta .wp-block-button__link { width: 100%; }

/* --------------------------------------------------------------------------
   13 · Réseaux sociaux
   Chaque lien est un paragraphe portant la classe : le glyphe vient du
   masque posé sur le paragraphe, le lien reste à l'intérieur.
   -------------------------------------------------------------------------- */

.pied-reseaux p.reseau { margin: 0; }
.pied-reseaux p.reseau > a {
  position: absolute; inset: 0;
  display: block;
  text-indent: -9999px; overflow: hidden;
}
.pied-reseaux p.reseau { position: relative; }
.pied-bas p.pied-droits,
.pied-bas p.pied-plan { margin: 0; }
.pied-bas p.pied-plan > a {
  color: inherit;
  text-decoration: underline; text-underline-offset: 4px;
}