/* ============================================================================
 * Stars Evolution — Système de composants
 * Fichier : css/systeme.css
 * ============================================================================
 * Charger APRÈS style.css : cette feuille ne redéfinit rien, elle ajoute.
 * Elle reprend les variables existantes (--se-red, --se-blue, --font-display…).
 *
 * Le rouge #E63946 porte l'accent et l'action — c'est l'identité de la marque.
 * Le bleu #1E3A8A porte le sujet et la structure.
 * ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
 * LE SYSTÈME — appliqué à la palette Stars Evolution
 * Le rouge #E63946 prend la place de l'accent : c'est leur identité.
 * ══════════════════════════════════════════════════════════════════════════ */


/* L'en-tête est désormais dans css/header.css. */

/* ── 2. BOUTONS : MAJUSCULES + flèche encerclée, en pilule ──────────────── */
.se-btn {
  display:inline-flex; align-items:center; gap: 11px;
  padding: 12px 12px 12px 24px;
  border-radius: 100px; border: 1.5px solid transparent;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  text-decoration:none; cursor:pointer;
  transition: all .18s;
}
.se-btn .fleche {
  width: 26px; height: 26px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; flex-shrink:0;
  transition: transform .18s;
}
.se-btn:hover .fleche { transform: translateX(3px); }

/* Primaire : rouge plein */
.se-btn-primaire { background: var(--se-red); color:#fff; }
.se-btn-primaire .fleche { background: rgba(255,255,255,.22); }
.se-btn-primaire:hover { background: var(--se-red-dark); box-shadow: 0 8px 24px rgba(230,57,70,.32); }
/* Secondaire : bordé */
.se-btn-secondaire { background:#fff; color: var(--se-red); border-color: var(--se-red); }
.se-btn-secondaire .fleche { background: rgba(230,57,70,.12); }
.se-btn-secondaire:hover { background: rgba(230,57,70,.05); }
/* Bleu : l'autre voix */
.se-btn-bleu { background: var(--se-blue); color:#fff; }
.se-btn-bleu .fleche { background: rgba(255,255,255,.22); }
.se-btn-bleu:hover { background: var(--se-blue-dark); box-shadow: 0 8px 24px rgba(30,58,138,.3); }
/* Inversé : sur fond coloré */
.se-btn-inverse { background:#fff; color: var(--se-red); }
.se-btn-inverse .fleche { background: rgba(230,57,70,.12); }
.se-btn-inverse:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
/* Fantôme : sur fond coloré, bordé blanc */
.se-btn-fantome { background: transparent; color:#fff; border-color: rgba(255,255,255,.45); }
.se-btn-fantome .fleche { background: rgba(255,255,255,.18); }
.se-btn-fantome:hover { background: rgba(255,255,255,.12); border-color:#fff; }

/* ── 3. TITRE DE SECTION : le motif en 3 temps ──────────────────────────── */
/* Centre par defaut : c'est le cas d'une section pleine largeur. */
.se-sect-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }

/* MAIS dans une colonne (grille 2 colonnes texte/image), le titre doit rester
   aligne a gauche : le centrer casse la lecture. */
.about-content .se-sect-head,
.se-sect-head.gauche {
  text-align: left; max-width: none; margin: 0 0 24px;
}
.about-content .se-sect-head .se-filet,
.se-sect-head.gauche .se-filet { justify-content: flex-start; }
.about-content .se-sect-head .se-sous,
.se-sect-head.gauche .se-sous { margin-left: 0; }
/* Le surtitre garde son filet, mais seulement a droite */
.about-content .se-sect-head .se-surtitre::before,
.se-sect-head.gauche .se-surtitre::before { display: none; }
/* Surtitre entre deux filets */
.se-surtitre {
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--font-heading); font-style: italic;
  font-size: 14px; font-weight: 600; color: var(--se-blue);
  margin-bottom: 14px;
}
.se-surtitre::before, .se-surtitre::after {
  content:''; width: 46px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--se-blue));
}
.se-surtitre::after { background: linear-gradient(90deg, var(--se-blue), transparent); }
/* Titre bicolore */
.se-titre {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 800;
  color: var(--se-ink); line-height: 1.18; letter-spacing: -.02em;
  margin: 0 0 12px;
}
.se-titre .bleu  { color: var(--se-blue); }
.se-titre .rouge { color: var(--se-red); }
.se-sous {
  font-size: 15px; color: var(--se-gray-500);
  line-height: 1.65; margin: 0 auto; max-width: 600px;
}
/* Filet à point central */
.se-filet {
  display:flex; align-items:center; justify-content:center;
  gap: 7px; margin-top: 20px;
}
.se-filet span { height: 2px; width: 34px; background: var(--se-gray-200); border-radius: 2px; }
.se-filet .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--se-red); }
.se-filet .lg { width: 22px; background: var(--se-blue); }

/* Variante sur fond sombre */
.se-sect-head.sombre .se-titre { color:#fff; }
.se-sect-head.sombre .se-surtitre { color: #93C5FD; }
.se-sect-head.sombre .se-sous { color: rgba(255,255,255,.7); }
.se-sect-head.sombre .se-surtitre::before { background: linear-gradient(90deg, transparent, #93C5FD); }
.se-sect-head.sombre .se-surtitre::after  { background: linear-gradient(90deg, #93C5FD, transparent); }

/* ── 4. BANNIÈRE INTERNE ────────────────────────────────────────────────── */
.se-banniere {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #F1F5FF 0%, #E8EEFF 100%);
  /* Le header est fixe : la bannière doit lui laisser sa place, sinon le titre
     passe dessous. On se cale sur --header-total, comme le fait le hero —
     plutôt qu'une valeur en dur qui se désynchronise. */
  padding: calc(var(--header-total, 126px) + 34px) 0 58px;
  text-align: center;
}
.se-banniere-titre {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px); font-weight: 800;
  letter-spacing: -.025em; margin: 0 0 12px;
}
.se-banniere-titre .a { color: var(--se-ink); }
.se-banniere-titre .b { color: var(--se-blue); }
/* Fil d'Ariane */
.se-fil {
  display:inline-flex; align-items:center; gap: 9px;
  font-size: 13px; color: var(--se-gray-500);
}
.se-fil a { color: var(--se-blue); text-decoration:none; font-weight: 600; }
.se-fil a:hover { text-decoration: underline; }
.se-fil .sep { color: var(--se-gray-300); }
.se-fil .ici { color: var(--se-red); font-weight: 600; }
/* Pilule CTA */
.se-pilule {
  display:inline-flex; align-items:center; gap: 12px;
  background:#fff; border-radius: 100px;
  padding: 8px 8px 8px 22px; margin-top: 22px;
  box-shadow: 0 6px 22px rgba(30,58,138,.10);
  font-size: 13.5px; color: var(--se-gray-600);
}
.se-pilule strong { color: var(--se-blue); font-weight: 700; }
.se-pilule .rond {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--se-red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size: 11px;
}
/* Le décor */
.se-deco { position:absolute; pointer-events:none; }
.se-deco-points {
  top: 22px; left: 22px; width: 96px; height: 60px;
  background-image: radial-gradient(var(--se-blue) 1.6px, transparent 1.6px);
  background-size: 13px 13px; opacity:.22;
}
.se-deco-jaune {
  top: 62px; left: 74px; width: 52px; height: 52px;
  border-radius: 50%; background: #FBBF24; opacity:.9;
}
.se-deco-rouge {
  bottom: 24px; left: 30%; width: 74px; height: 74px;
  border-radius: 50%; border: 2px dashed var(--se-red); opacity:.28;
}
.se-deco-hexa {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%231E3A8A' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
  opacity: .8;
}

/* ── 5. FAQ ─────────────────────────────────────────────────────────────── */
/* Deux colonnes : l'image équilibre le bloc et donne un visage au propos. */
.se-faq-wrap {
  display:grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 44px; align-items:center;
}
.se-faq-img { position:relative; }
.se-faq-img-cadre {
  position:relative; border-radius: 20px; overflow:hidden;
  aspect-ratio: 3/4;
}
.se-faq-img-cadre img { width:100%; height:100%; object-fit:cover; display:block; }
/* Le cadre bleu décalé, comme dans la référence */
.se-faq-img::before {
  content:''; position:absolute;
  left:-16px; bottom:-16px; width: 62%; height: 58%;
  border: 3px solid var(--se-blue); border-radius: 20px;
  z-index:-1;
}
/* La bulle « ? » */
.se-faq-bulle {
  position:absolute; top: 8%; right: -14px;
  width: 74px; height: 74px; border-radius: 50%;
  background:#fff; box-shadow: 0 10px 30px rgba(10,14,31,.14);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: 30px; font-weight: 800;
  color: var(--se-red);
}
.se-faq-bulle::after {
  content:''; position:absolute; bottom: -6px; left: 18px;
  width: 16px; height: 16px; background:#fff;
  transform: rotate(45deg);
  box-shadow: 4px 4px 10px rgba(10,14,31,.06);
}
.se-faq { display:grid; gap: 11px; }
.se-q {
  border-radius: 14px; overflow:hidden;
  border: 1px solid var(--se-gray-200); background:#fff;
  transition: all .2s;
}
.se-q-tete {
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap: 14px;
  padding: 17px 19px; background:none; border:none;
  cursor:pointer; text-align:left; font-family: inherit;
}
.se-q-pastille {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(230,57,70,.10); color: var(--se-red);
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; flex-shrink:0; transition: all .2s;
}
.se-q-t {
  flex:1; font-family: var(--font-heading);
  font-size: 14.5px; font-weight: 700; color: var(--se-ink);
}
.se-q-chevron { color: var(--se-gray-400); font-size: 12px; transition: transform .25s; }
.se-q-corps { max-height: 0; overflow:hidden; transition: max-height .3s ease; }
.se-q-r {
  padding: 0 19px 18px 61px;
  font-size: 14px; color: var(--se-gray-600); line-height: 1.7;
}
/* Ouverte : le bandeau passe en PLEIN */
.se-q.ouverte { border-color: var(--se-red); box-shadow: 0 8px 26px rgba(230,57,70,.13); }
.se-q.ouverte .se-q-tete { background: var(--se-red); }
.se-q.ouverte .se-q-t { color:#fff; }
.se-q.ouverte .se-q-pastille { background: rgba(255,255,255,.22); color:#fff; }
.se-q.ouverte .se-q-chevron { color: rgba(255,255,255,.8); transform: rotate(180deg); }
.se-q.ouverte .se-q-corps { max-height: 360px; }
.se-q.ouverte .se-q-r { background: rgba(230,57,70,.035); padding-top: 17px; }

@media (max-width: 1024px) {
  .se-faq-wrap { grid-template-columns: 1fr; gap: 30px; }
  .se-faq-img { max-width: 340px; margin: 0 auto; }
}

/* ── 6. CTA ─────────────────────────────────────────────────────────────── */
.se-cta {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--se-blue-dark) 0%, var(--se-blue) 55%, #2E4CB8 100%);
  border-radius: 22px; padding: 40px 44px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 32px; flex-wrap:wrap;
}
.se-cta-txt { flex:1; min-width: 280px; position:relative; z-index:2; }
.se-cta .se-cta-t {
  font-family: var(--font-display); font-size: 25px; font-weight: 800;
  color: #fff; margin: 0 0 8px; letter-spacing: -.02em;
}
.se-cta .se-cta-s {
  font-size: 14.5px; color: rgba(255,255,255,.82);
  line-height: 1.6; margin: 0; max-width: 520px;
}
.se-cta-btns { display:flex; gap: 11px; flex-wrap:wrap; position:relative; z-index:2; }
.se-cta-deco {
  position:absolute; right:-70px; top:-70px;
  width: 300px; height: 300px; border-radius:50%;
  background: radial-gradient(circle, rgba(230,57,70,.28), transparent 68%);
}

/* Le sous-titre de bannière */
.se-banniere-sous {
  font-size: 15px; color: var(--se-gray-500);
  line-height: 1.65; margin: 16px auto 0; max-width: 620px;
}
/* La pilule est un lien */
a.se-pilule { text-decoration: none; transition: all .18s; }
a.se-pilule:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,58,138,.16); }

/* L'en-tête : le CTA de nav se replie sur mobile */
@media (max-width: 1200px) {
  .se-nav-cta { display: none; }
}
@media (max-width: 1024px) {
  .se-nav-menu { display: none; }
  .se-nav { padding: 0 12px 0 0; }
  .se-nav-logo { border-radius: 16px 0 22px 0; padding: 10px 18px; }
  .se-nav-logo img { height: 38px; }
}
@media (min-width: 1025px) {
  .se-header .menu-toggle { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * LA FAQ — on restyle la structure existante (.faq-item / .faq-question)
 * Le JS de main.js gère déjà « une seule ouverte » : rien à y changer.
 * ══════════════════════════════════════════════════════════════════════════ */

.faq-list { display: grid; gap: 11px; }

.faq-item {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--se-gray-200);
  background: #fff;
  transition: all .2s;
}
.faq-question {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 19px;
  cursor: pointer;
  transition: background .2s;
}
.faq-question span {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 14.5px; font-weight: 700;
  color: var(--se-ink);
  transition: color .2s;
}
/* Le « + » devient une pastille */
.faq-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(230,57,70,.10); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  transition: all .25s;
}
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer-inner {
  padding: 0 19px 18px 19px;
  font-size: 14px; color: var(--se-gray-600); line-height: 1.7;
}

/* Ouverte : le bandeau passe en ROUGE plein */
.faq-item.active {
  border-color: var(--se-red);
  box-shadow: 0 8px 26px rgba(230,57,70,.13);
}
.faq-item.active .faq-question { background: var(--se-red); }
.faq-item.active .faq-question span { color: #fff; }
.faq-item.active .faq-toggle {
  background: rgba(255,255,255,.22); color: #fff;
  transform: rotate(45deg);
}
.faq-item.active .faq-answer { max-height: 460px; }
.faq-item.active .faq-answer-inner {
  background: rgba(230,57,70,.035);
  padding-top: 17px;
}

/* ── La colonne de gauche : photo + identité + contacts directs ───────────── */
/* Une image seule ne dit rien. Ici on met un visage, un nom, et le moyen de
   joindre cette personne : la FAQ devient une conversation, pas une liste. */
.se-faq-wrap {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 44px; align-items: start;
}

.fq-aside { position: relative; }

.fq-photo {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 18px 44px rgba(10,14,31,.14);
}
.fq-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le voile : il porte le nom sans écraser le visage */
.fq-photo-voile {
  position: absolute; inset: auto 0 0 0; height: 52%;
  background: linear-gradient(0deg, rgba(10,14,31,.9) 12%, rgba(10,14,31,.4) 52%, transparent);
}
.fq-photo-id { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.fq-photo-nom {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2;
}
.fq-photo-role {
  font-size: 12.5px; font-weight: 600;
  color: var(--se-red-light); margin-top: 3px;
}

/* La bulle chevauche la photo et la carte : elle fait le lien */
.fq-bulle {
  position: absolute; right: -13px; top: 26px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--se-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 10px 28px rgba(230,57,70,.42);
  z-index: 2;
}
.fq-bulle::after {
  content: ''; position: absolute; inset: -7px;
  border-radius: 50%; border: 2px solid rgba(230,57,70,.34);
  animation: fq-pulse 2.4s infinite;
}
@keyframes fq-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.42); opacity: 0; }
}

.fq-carte {
  margin-top: -22px; margin-left: 18px; margin-right: -8px;
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; padding: 26px 20px 18px;
  box-shadow: 0 12px 34px rgba(10,14,31,.08);
}
.fq-carte .fq-carte-p {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600;
  color: var(--se-ink); line-height: 1.55;
  margin: 0 0 16px;
}
.fq-carte-contacts { display: grid; gap: 8px; }
.fq-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--se-gray-50);
  border: 1px solid transparent;
  text-decoration: none; transition: all .18s;
}
.fq-contact:hover {
  background: #fff; border-color: rgba(230,57,70,.3);
  transform: translateX(3px);
}
.fq-contact-ic {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(230,57,70,.10); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  transition: all .18s;
}
.fq-contact:hover .fq-contact-ic { background: var(--se-red); color: #fff; }
.fq-contact-wa .fq-contact-ic { background: rgba(37,211,102,.12); color: #25D366; }
.fq-contact-wa:hover { border-color: rgba(37,211,102,.4); }
.fq-contact-wa:hover .fq-contact-ic { background: #25D366; color: #fff; }
.fq-contact-l {
  display: block; font-size: 10.5px; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .5px;
}
.fq-contact-v {
  display: block; font-family: var(--font-heading);
  font-size: 13.5px; font-weight: 700; color: var(--se-ink); margin-top: 1px;
}

@media (max-width: 1024px) {
  .se-faq-wrap { grid-template-columns: 1fr; gap: 30px; }
  .fq-aside { max-width: 400px; margin: 0 auto; width: 100%; }
  .fq-photo { aspect-ratio: 16/10; }
  .fq-photo-voile { height: 62%; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE SERVICES — navigation collante + blocs numérotés
 * ══════════════════════════════════════════════════════════════════════════ */

.sv-zone { padding: 78px 0 40px; background: #fff; }
.sv-grille {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 56px; align-items: start;
}

/* ── La colonne qui suit le scroll ────────────────────────────────────────── */
.sv-nav-in { position: sticky; top: 100px; }
.sv-nav-t {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--se-gray-400); margin-bottom: 14px;
}
.sv-nav-liste {
  display: grid; gap: 2px;
  border-left: 2px solid var(--se-gray-200);
  padding-left: 0;
}
.sv-lien {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  text-decoration: none; transition: all .2s;
}
.sv-lien-n {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
  color: var(--se-gray-300); width: 20px; flex-shrink: 0;
  transition: color .2s;
}
.sv-lien-txt {
  flex: 1; font-family: var(--font-heading);
  font-size: 14px; font-weight: 600;
  color: var(--se-gray-600); transition: color .2s;
}
.sv-lien-f { font-size: 11px; color: var(--se-red); opacity: 0; transform: translateX(-6px); transition: all .2s; }
.sv-lien:hover { background: var(--se-gray-50); }
.sv-lien:hover .sv-lien-txt { color: var(--se-ink); }
/* Actif : le trait rouge marque la position */
.sv-lien.actif { border-left-color: var(--se-red); background: rgba(230,57,70,.04); }
.sv-lien.actif .sv-lien-n { color: var(--se-red); }
.sv-lien.actif .sv-lien-txt { color: var(--se-ink); font-weight: 700; }
.sv-lien.actif .sv-lien-f { opacity: 1; transform: translateX(0); }

.sv-nav-cta {
  margin-top: 26px; padding: 20px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5FF);
  border: 1px solid var(--se-gray-200); border-radius: 14px;
}
.sv-nav-cta-t {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; color: var(--se-ink);
  line-height: 1.4; margin-bottom: 4px;
}
.sv-nav-cta-s { font-size: 12.5px; color: var(--se-gray-500); margin-bottom: 14px; }

/* ── Les blocs ────────────────────────────────────────────────────────────── */
.sv-corps { display: grid; gap: 92px; }
.sv-bloc { position: relative; scroll-margin-top: 100px; }
/* Le numéro en filigrane : il donne le rythme */
.sv-bloc-num {
  position: absolute; top: -34px; right: 0;
  font-family: var(--font-display);
  font-size: 128px; font-weight: 900; line-height: 1;
  color: var(--se-gray-100);
  pointer-events: none; user-select: none; z-index: 0;
}
.sv-bloc-tete { position: relative; z-index: 1; max-width: 620px; }
.sv-bloc-t {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  color: var(--se-ink); line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 12px;
}
.sv-bloc-t .rouge { color: var(--se-red); }
.sv-bloc-s { font-size: 15px; color: var(--se-gray-500); line-height: 1.7; margin: 0; }

/* ── Le visuel ────────────────────────────────────────────────────────────── */
.sv-visuel {
  position: relative; margin: 28px 0;
  border-radius: 18px; overflow: visible;
}
.sv-visuel img {
  width: 100%; height: 340px; object-fit: cover;
  border-radius: 18px; display: block;
}
/* La pastille de chiffre, posée sur le visuel */
.sv-visuel-badge {
  position: absolute; right: -14px; bottom: -18px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px;
  padding: 13px 18px 13px 14px;
  box-shadow: 0 12px 34px rgba(10,14,31,.14);
}
.sv-visuel-badge-ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--se-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.sv-visuel-badge-ic.bleu { background: var(--se-blue); }
.sv-visuel-badge-v {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; color: var(--se-ink);
}
.sv-visuel-badge-l {
  font-size: 10px; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 1px;
}
/* Le bouton de lecture, pour la vidéo */
.sv-visuel-lecture {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
  transition: transform .2s;
}
.sv-visuel-lecture:hover { transform: scale(1.09); }
.sv-visuel-lecture::before {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
  animation: sv-pulse 2.2s infinite;
}
@keyframes sv-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Les atouts ───────────────────────────────────────────────────────────── */
.sv-atouts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 34px;
}
.sv-atout {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--se-gray-200);
  border-radius: 14px;
  transition: all .2s;
}
.sv-atout:hover {
  border-color: rgba(230,57,70,.32);
  box-shadow: 0 10px 30px rgba(10,14,31,.07);
  transform: translateY(-3px);
}
.sv-atout-ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(230,57,70,.09); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 13px;
  transition: all .2s;
}
.sv-atout:hover .sv-atout-ic { background: var(--se-red); color: #fff; }
.sv-atout h4 {
  font-family: var(--font-heading);
  font-size: 14.5px; font-weight: 700; color: var(--se-ink);
  margin: 0 0 5px;
}
.sv-atout p { font-size: 13px; color: var(--se-gray-500); line-height: 1.6; margin: 0; }

.sv-bloc-pied {
  display: flex; gap: 11px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 26px;
  border-top: 1px solid var(--se-gray-200);
}

/* ── Le processus ─────────────────────────────────────────────────────────── */
.sv-proc { background: var(--se-off-white); }
.sv-etapes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; position: relative;
}
/* Le trait qui relie les étapes */
.sv-etapes::before {
  content: ''; position: absolute;
  top: 34px; left: 12%; right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--se-gray-300) 0 7px, transparent 7px 15px);
  z-index: 0;
}
.sv-etape {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; padding: 26px 20px 22px;
  text-align: center; transition: all .22s;
}
.sv-etape:hover {
  border-color: rgba(230,57,70,.3);
  box-shadow: 0 14px 36px rgba(10,14,31,.08);
  transform: translateY(-4px);
}
.sv-etape-n {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--se-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(230,57,70,.34);
}
.sv-etape-ic {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, #F1F5FF, #E3EBFF);
  color: var(--se-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin: 14px auto 14px;
  transition: all .22s;
}
.sv-etape:hover .sv-etape-ic {
  background: var(--se-blue); color: #fff; transform: scale(1.06);
}
.sv-etape h4 {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--se-ink); margin: 0 0 7px;
}
.sv-etape p { font-size: 12.5px; color: var(--se-gray-500); line-height: 1.6; margin: 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .sv-grille { grid-template-columns: 1fr; gap: 34px; }
  .sv-nav-in { position: static; }
  .sv-nav-liste {
    display: flex; overflow-x: auto; gap: 6px;
    border-left: none; border-bottom: 2px solid var(--se-gray-200);
    padding-bottom: 2px;
  }
  .sv-lien {
    border-left: none; border-bottom: 2px solid transparent;
    margin-left: 0; margin-bottom: -2px; white-space: nowrap;
  }
  .sv-lien.actif { border-left: none; border-bottom-color: var(--se-red); }
  .sv-lien-f { display: none; }
  .sv-nav-cta { display: none; }
  .sv-etapes { grid-template-columns: repeat(2, 1fr); }
  .sv-etapes::before { display: none; }
}
@media (max-width: 768px) {
  .sv-atouts { grid-template-columns: 1fr; }
  .sv-etapes { grid-template-columns: 1fr; }
  .sv-bloc-num { font-size: 84px; top: -22px; }
  .sv-visuel img { height: 220px; }
  .sv-visuel-badge { right: 8px; bottom: -14px; padding: 10px 14px; }
  .sv-corps { gap: 64px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE À PROPOS
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── L'histoire : image composée à gauche, texte à droite ─────────────────── */
.ap-histoire { background: #fff; }
.ap-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 68px; align-items: center;
}

.ap-visuel { position: relative; padding-bottom: 40px; padding-right: 30px; }
.ap-visuel-grand { border-radius: 20px; overflow: hidden; }
.ap-visuel-grand img { width: 100%; height: 440px; object-fit: cover; display: block; }
/* La seconde image, décalée : elle donne de la profondeur */
.ap-visuel-petit {
  position: absolute; right: 0; bottom: 0;
  width: 54%; border-radius: 16px; overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 16px 44px rgba(10,14,31,.16);
}
.ap-visuel-petit img { width: 100%; height: 190px; object-fit: cover; display: block; }
/* Le chiffre posé sur l'image */
.ap-visuel-chiffre {
  position: absolute; left: -18px; top: 34px;
  background: var(--se-red); color: #fff;
  border-radius: 14px; padding: 15px 20px;
  box-shadow: 0 14px 36px rgba(230,57,70,.34);
}
.ap-visuel-chiffre-v {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 900; line-height: 1;
}
.ap-visuel-chiffre-l {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; opacity: .9; margin-top: 3px;
}
/* Le cadre bleu décalé */
.ap-visuel-cadre {
  position: absolute; left: 24px; top: -18px;
  width: 45%; height: 62%;
  border: 3px solid var(--se-blue); border-radius: 20px;
  z-index: -1;
}

.ap-texte { }
.ap-titre {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px); font-weight: 800;
  color: var(--se-ink); line-height: 1.18; letter-spacing: -.02em;
  margin: 0 0 16px;
}
.ap-titre .rouge { color: var(--se-red); }
.ap-chapo {
  font-size: 16px; color: var(--se-gray-700);
  line-height: 1.7; font-weight: 500; margin: 0 0 14px;
  padding-left: 16px; border-left: 3px solid var(--se-red);
}
.ap-p { font-size: 14.5px; color: var(--se-gray-500); line-height: 1.75; margin: 0 0 12px; }

.ap-signes { display: grid; gap: 12px; margin-top: 24px; }
.ap-signe {
  display: flex; gap: 13px; align-items: center;
  padding: 13px 15px;
  background: var(--se-gray-50); border-radius: 12px;
}
.ap-signe-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(230,57,70,.10); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ap-signe-t {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; color: var(--se-ink);
}
.ap-signe-s { font-size: 12.5px; color: var(--se-gray-500); margin-top: 1px; }

/* ── Les chiffres ─────────────────────────────────────────────────────────── */
.ap-chiffres {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--se-blue-dark) 0%, var(--se-blue) 60%, #2E4CB8 100%);
  padding: 54px 0;
}
.ap-chiffres-deco {
  position: absolute; right: -90px; top: -90px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.26), transparent 68%);
}
.ap-chiffres-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ap-chiffre { text-align: center; }
.ap-chiffre-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; margin: 0 auto 12px;
}
.ap-chiffre-v {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 900; color: #fff; line-height: 1;
}
.ap-chiffre-v span { font-size: 22px; color: var(--se-red-light); }
.ap-chiffres .ap-chiffre-l {
  font-size: 12px; color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: .6px; margin-top: 7px;
}
/* Garde-fou : tout texte pose sur un fond colore doit rester lisible. */
.ap-mv-carte h3, .ap-mv-carte p,
.se-cta h3, .se-cta p,
.ap-chiffres p { color: inherit; }

/* ── Les valeurs ──────────────────────────────────────────────────────────── */
.ap-valeurs { background: var(--se-off-white); }
.ap-valeurs-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ap-valeur {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; padding: 26px 22px 24px;
  transition: all .22s;
}
.ap-valeur:hover {
  border-color: rgba(230,57,70,.3);
  box-shadow: 0 14px 38px rgba(10,14,31,.08);
  transform: translateY(-4px);
}
/* Le numéro en filigrane */
.ap-valeur-n {
  position: absolute; top: 12px; right: 16px;
  font-family: var(--font-display);
  font-size: 46px; font-weight: 900; line-height: 1;
  color: var(--se-gray-100);
  pointer-events: none;
}
.ap-valeur-ic {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(230,57,70,.09); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 15px;
  transition: all .22s;
}
.ap-valeur:hover .ap-valeur-ic {
  background: var(--se-red); color: #fff; transform: scale(1.05);
}
.ap-valeur h4 {
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 700; color: var(--se-ink); margin: 0 0 7px;
}
.ap-valeur p { font-size: 13.5px; color: var(--se-gray-500); line-height: 1.65; margin: 0; }

/* ── Mission & vision ─────────────────────────────────────────────────────── */
.ap-mv { background: #fff; }
.ap-mv-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ap-mv-carte {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 34px 32px;
  color: #fff;
}
.ap-mv-rouge { background: linear-gradient(135deg, #C1272D 0%, var(--se-red) 100%); }
.ap-mv-bleu  { background: linear-gradient(135deg, var(--se-blue-dark) 0%, var(--se-blue) 100%); }
/* Le halo qui donne du relief */
.ap-mv-carte::after {
  content: ''; position: absolute;
  right: -60px; bottom: -60px;
  width: 210px; height: 210px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.ap-mv-ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
  position: relative; z-index: 1;
}
.ap-mv-lbl {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.1px;
  opacity: .8; margin-bottom: 8px;
  position: relative; z-index: 1;
}
/* style.css impose h3{...} et p{color:var(--se-gray-600)} : l'heritage du
   blanc de la carte ne suffit pas, il faut poser la couleur explicitement. */
.ap-mv-carte .ap-mv-t {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; line-height: 1.32;
  margin: 0 0 12px; letter-spacing: -.015em;
  color: #fff;
  position: relative; z-index: 1;
}
.ap-mv-carte .ap-mv-p {
  font-size: 14.5px; line-height: 1.7; margin: 0;
  color: rgba(255,255,255,.9);
  position: relative; z-index: 1;
}

/* ── L'équipe ─────────────────────────────────────────────────────────────── */
.ap-equipe { background: var(--se-off-white); }
.ap-equipe-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.ap-membre {
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--se-gray-200);
  transition: all .22s;
}
.ap-membre:hover {
  box-shadow: 0 16px 40px rgba(10,14,31,.10);
  transform: translateY(-5px);
}
.ap-membre-photo { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.ap-membre-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s;
}
.ap-membre:hover .ap-membre-photo img { transform: scale(1.05); }
/* Les réseaux apparaissent au survol */
.ap-membre-reseaux {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: center; gap: 8px;
  padding: 16px;
  background: linear-gradient(0deg, rgba(10,14,31,.82), transparent);
  transform: translateY(100%); opacity: 0;
  transition: all .25s;
}
.ap-membre:hover .ap-membre-reseaux { transform: translateY(0); opacity: 1; }
.ap-membre-reseaux a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--se-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; text-decoration: none;
  transition: all .18s;
}
.ap-membre-reseaux a:hover { background: var(--se-red); color: #fff; }
.ap-membre-txt { padding: 16px 18px 18px; text-align: center; }
.ap-membre-txt h4 {
  font-family: var(--font-heading);
  font-size: 15.5px; font-weight: 700; color: var(--se-ink); margin: 0 0 3px;
}
.ap-membre-role { font-size: 12.5px; color: var(--se-red); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ap-grille { grid-template-columns: 1fr; gap: 44px; }
  .ap-visuel { max-width: 520px; margin: 0 auto; }
  .ap-valeurs-grille { grid-template-columns: repeat(2, 1fr); }
  .ap-equipe-grille { grid-template-columns: repeat(2, 1fr); }
  .ap-chiffres-grille { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .ap-mv-grille { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ap-valeurs-grille { grid-template-columns: 1fr; }
  .ap-equipe-grille { grid-template-columns: 1fr; }
  .ap-chiffres-grille { grid-template-columns: 1fr; }
  .ap-visuel-grand img { height: 300px; }
  .ap-visuel-petit { position: static; width: 100%; margin-top: 14px; border-width: 0; }
  .ap-visuel { padding: 0; }
  .ap-visuel-cadre { display: none; }
  .ap-visuel-chiffre { left: 10px; top: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE CONTACT
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Les trois voies : on choisit son canal avant tout ────────────────────── */
.ct-voies { background: #fff; padding: 54px 0 0; }
.ct-voies-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ct-voie {
  position: relative; overflow: hidden;
  display: block; padding: 26px 22px 24px;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; text-decoration: none;
  transition: all .22s;
}
.ct-voie:hover {
  border-color: rgba(230,57,70,.32);
  box-shadow: 0 16px 40px rgba(10,14,31,.09);
  transform: translateY(-4px);
}
.ct-voie-ic {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(230,57,70,.09); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 15px;
  transition: all .22s;
}
.ct-voie:hover .ct-voie-ic { background: var(--se-red); color: #fff; transform: scale(1.06); }
.ct-voie-wa .ct-voie-ic   { background: rgba(37,211,102,.12); color: #25D366; }
.ct-voie-wa:hover { border-color: rgba(37,211,102,.4); }
.ct-voie-wa:hover .ct-voie-ic { background: #25D366; color: #fff; }
.ct-voie-mail .ct-voie-ic { background: rgba(30,58,138,.09); color: var(--se-blue); }
.ct-voie-mail:hover { border-color: rgba(30,58,138,.34); }
.ct-voie-mail:hover .ct-voie-ic { background: var(--se-blue); color: #fff; }
.ct-voie-l {
  font-size: 10.5px; font-weight: 800; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .8px;
}
.ct-voie-v {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--se-ink);
  margin: 5px 0 4px; word-break: break-word;
}
.ct-voie-s { font-size: 12.5px; color: var(--se-gray-500); }
.ct-voie-f {
  position: absolute; right: 20px; top: 26px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--se-gray-50); color: var(--se-gray-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; transition: all .22s;
}
.ct-voie:hover .ct-voie-f {
  background: var(--se-red); color: #fff; transform: translateX(3px);
}

/* ── Le formulaire ────────────────────────────────────────────────────────── */
.ct-form-zone { background: #fff; }
.ct-grille { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: start; }

.ct-titre {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 34px); font-weight: 800;
  color: var(--se-ink); line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.ct-titre .rouge { color: var(--se-red); }
.ct-chapo { font-size: 14.5px; color: var(--se-gray-500); line-height: 1.7; margin: 0 0 26px; }

.ct-infos { display: grid; gap: 11px; }
.ct-info {
  display: flex; gap: 13px; align-items: center;
  padding: 14px 15px;
  background: var(--se-gray-50); border-radius: 12px;
  border: 1px solid transparent; transition: all .18s;
}
.ct-info:hover { background: #fff; border-color: var(--se-gray-200); }
.ct-info-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(30,58,138,.09); color: var(--se-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ct-info-l {
  font-size: 10.5px; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .5px;
}
.ct-info-v {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; color: var(--se-ink); margin-top: 2px;
}

.ct-reseaux {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--se-gray-200);
}
.ct-reseaux-l {
  font-size: 10.5px; font-weight: 800; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px;
}
.ct-reseaux-liens { display: flex; gap: 9px; }
.ct-reseaux-liens a {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--se-gray-50); color: var(--se-gray-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; text-decoration: none; transition: all .18s;
}
.ct-reseaux-liens a:hover {
  background: var(--se-red); color: #fff; transform: translateY(-3px);
}

/* La carte du formulaire */
.ct-form {
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 20px; padding: 32px;
  box-shadow: 0 14px 44px rgba(10,14,31,.07);
}
.ct-champs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 18px;
}
.ct-champ-large { grid-column: 1 / -1; }
.ct-champ label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12.5px; font-weight: 700; color: var(--se-gray-700);
  margin-bottom: 7px;
}
.ct-champ label span { color: var(--se-red); }

.ct-input { position: relative; }
.ct-input > i:first-child {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--se-gray-400); font-size: 13px; pointer-events: none;
  transition: color .18s;
}
.ct-input input,
.ct-input select,
.ct-input textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--se-ink);
  background: var(--se-gray-50);
  border: 1.5px solid var(--se-gray-200);
  border-radius: 11px;
  transition: all .18s;
  appearance: none;
}
.ct-input textarea { padding-left: 14px; resize: vertical; min-height: 128px; }
.ct-input-zone > i { display: none; }
.ct-input input::placeholder,
.ct-input textarea::placeholder { color: var(--se-gray-400); }
.ct-input input:focus,
.ct-input select:focus,
.ct-input textarea:focus {
  outline: none; background: #fff;
  border-color: var(--se-red);
  box-shadow: 0 0 0 4px rgba(230,57,70,.09);
}
.ct-input input:focus ~ i:first-child { color: var(--se-red); }
.ct-input-caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--se-gray-400); font-size: 11px; pointer-events: none;
}

/* La case à cocher, refaite */
.ct-rgpd {
  display: flex; gap: 11px; align-items: flex-start;
  cursor: pointer; margin-bottom: 20px;
}
.ct-rgpd input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-rgpd-case {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--se-gray-300);
  background: #fff; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
  transition: all .18s;
}
.ct-rgpd-case i { opacity: 0; transform: scale(.5); transition: all .18s; }
.ct-rgpd input:checked ~ .ct-rgpd-case {
  background: var(--se-red); border-color: var(--se-red);
}
.ct-rgpd input:checked ~ .ct-rgpd-case i { opacity: 1; transform: scale(1); }
.ct-rgpd-txt { font-size: 12.5px; color: var(--se-gray-500); line-height: 1.6; }

.ct-envoyer { width: 100%; justify-content: space-between; }
.ct-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: 12px; color: var(--se-gray-400);
}
.ct-note i { color: #25D366; }

/* ── La carte ─────────────────────────────────────────────────────────────── */
.ct-carte-zone { padding: 0 0 78px; background: #fff; }
.ct-carte {
  position: relative;
  max-width: 1240px; margin: 0 auto;
  border-radius: 20px; overflow: hidden;
}
.ct-carte iframe { display: block; filter: grayscale(.35) contrast(1.05); }
/* La fiche posée sur la carte */
.ct-carte-fiche {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  width: 268px; padding: 24px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10,14,31,.2);
}
.ct-carte-fiche-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--se-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 13px;
}
.ct-carte-fiche-t {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: var(--se-ink);
}
.ct-carte-fiche-s { font-size: 13px; color: var(--se-gray-500); margin-top: 3px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.ct-faq { background: var(--se-off-white); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ct-voies-grille { grid-template-columns: 1fr; }
  .ct-grille { grid-template-columns: 1fr; gap: 36px; }
  .ct-carte-fiche {
    position: static; transform: none; width: auto;
    margin: -40px 20px 0; box-shadow: 0 14px 36px rgba(10,14,31,.14);
  }
  .ct-carte { border-radius: 20px 20px 0 0; }
}
@media (max-width: 600px) {
  .ct-champs { grid-template-columns: 1fr; }
  .ct-form { padding: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE RÉALISATIONS
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Les chiffres, juste sous la bannière ─────────────────────────────────── */
.rl-chiffres { background: #fff; padding: 44px 0 0; }
.rl-chiffres-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding: 26px 20px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5FF);
  border: 1px solid var(--se-gray-200);
  border-radius: 18px;
}
.rl-chiffre { text-align: center; position: relative; }
.rl-chiffre + .rl-chiffre::before {
  content: ''; position: absolute; left: -8px; top: 12%; bottom: 12%;
  width: 1px; background: var(--se-gray-200);
}
.rl-chiffre-v {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 900; color: var(--se-blue); line-height: 1;
}
.rl-chiffre-v span { color: var(--se-red); }
.rl-chiffre-l {
  font-size: 11.5px; color: var(--se-gray-500);
  text-transform: uppercase; letter-spacing: .6px; margin-top: 6px;
}

/* ── Les filtres ──────────────────────────────────────────────────────────── */
.rl-zone { background: #fff; }
.rl-filtres {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 34px;
}
.rl-filtre {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 100px;
  background: #fff; border: 1.5px solid var(--se-gray-200);
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 600; color: var(--se-gray-600);
  cursor: pointer; transition: all .2s;
}
.rl-filtre:hover { border-color: var(--se-gray-300); color: var(--se-ink); }
.rl-filtre-n {
  font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px;
  background: var(--se-gray-100); color: var(--se-gray-500);
  transition: all .2s;
}
.rl-filtre.actif {
  background: var(--se-red); border-color: var(--se-red); color: #fff;
  box-shadow: 0 8px 22px rgba(230,57,70,.3);
}
.rl-filtre.actif .rl-filtre-n { background: rgba(255,255,255,.24); color: #fff; }

/* ── La grille : une mosaïque, pas des cases identiques ───────────────────── */
.rl-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 16px;
}
.rl-large { grid-column: span 2; }
.rl-haut  { grid-row: span 2; }

.rl-projet {
  position: relative; overflow: hidden;
  border-radius: 18px; cursor: pointer;
  background: var(--se-gray-100);
  transition: transform .3s, box-shadow .3s, opacity .25s;
}
.rl-projet:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(10,14,31,.2);
}
.rl-projet.masque { display: none; }

.rl-projet-visuel { position: absolute; inset: 0; }
.rl-projet-visuel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s;
}
.rl-projet:hover .rl-projet-visuel img { transform: scale(1.06); }

/* Le voile : le texte doit rester lisible quelle que soit la photo */
.rl-projet-voile {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    rgba(10,14,31,.9) 0%, rgba(10,14,31,.55) 38%, rgba(10,14,31,.05) 72%);
  transition: opacity .3s;
}
.rl-projet:hover .rl-projet-voile {
  background: linear-gradient(0deg,
    rgba(10,14,31,.94) 0%, rgba(10,14,31,.7) 48%, rgba(230,57,70,.28) 100%);
}

.rl-projet-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px;
  z-index: 2;
}
.rl-projet-cat {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .9px;
  color: #fff; background: var(--se-red);
  padding: 4px 10px; border-radius: 20px;
  margin-bottom: 9px;
}
.rl-projet .rl-projet-t {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; color: #fff;
  line-height: 1.25; margin: 0 0 6px;
}
.rl-projet .rl-projet-d {
  font-size: 13px; color: rgba(255,255,255,.82);
  line-height: 1.55; margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all .3s;
}
/* La description n'apparaît qu'au survol : la grille reste lisible */
.rl-projet:hover .rl-projet-d { max-height: 90px; opacity: 1; margin-top: 2px; }

/* La flèche */
.rl-projet-f {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--se-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none;
  opacity: 0; transform: scale(.7) rotate(-30deg);
  transition: all .28s;
}
.rl-projet:hover .rl-projet-f { opacity: 1; transform: scale(1) rotate(0); }
.rl-projet-f:hover { background: var(--se-red); color: #fff; }

/* Le bouton de lecture, pour les vidéos */
.rl-projet-lecture {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  transition: transform .22s;
}
.rl-projet:hover .rl-projet-lecture { transform: scale(1.12); }

/* Le chiffre de performance */
.rl-projet-perf {
  position: absolute; left: 18px; top: 18px; z-index: 3;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; color: #fff;
  background: var(--se-red);
  padding: 6px 13px; border-radius: 20px;
  box-shadow: 0 8px 22px rgba(230,57,70,.4);
}

/* ── Quand un filtre ne donne rien ────────────────────────────────────────── */
.rl-vide {
  text-align: center; padding: 60px 20px;
  color: var(--se-gray-400);
}
.rl-vide i { font-size: 40px; color: var(--se-gray-300); }
.rl-vide p {
  margin: 16px 0 4px;
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 700; color: var(--se-gray-600);
}
.rl-vide span { font-size: 13.5px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rl-grille { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; }
  .rl-chiffres-grille { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .rl-chiffre:nth-child(3)::before { display: none; }
}
@media (max-width: 600px) {
  .rl-grille { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .rl-large, .rl-haut { grid-column: auto; grid-row: auto; }
  .rl-chiffres-grille { grid-template-columns: 1fr; }
  .rl-chiffre + .rl-chiffre::before { display: none; }
  .rl-chiffre + .rl-chiffre { padding-top: 20px; border-top: 1px solid var(--se-gray-200); }
  /* Sur mobile, pas de survol : la description est toujours là */
  .rl-projet .rl-projet-d { max-height: 90px; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE DEVIS — un formulaire en trois étapes
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Les garanties : elles lèvent les freins avant le formulaire ──────────── */
.dv-garanties { background: #fff; padding: 48px 0 0; }
.dv-garanties-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dv-garantie {
  display: flex; gap: 12px; align-items: center;
  padding: 16px 16px;
  background: var(--se-gray-50);
  border: 1px solid var(--se-gray-200);
  border-radius: 13px;
  transition: all .2s;
}
.dv-garantie:hover {
  background: #fff; border-color: rgba(230,57,70,.28);
  box-shadow: 0 10px 26px rgba(10,14,31,.06);
}
.dv-garantie-ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(230,57,70,.09); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  transition: all .2s;
}
.dv-garantie:hover .dv-garantie-ic { background: var(--se-red); color: #fff; }
.dv-garantie-t {
  font-family: var(--font-heading);
  font-size: 13.5px; font-weight: 700; color: var(--se-ink);
}
.dv-garantie-s { font-size: 11.5px; color: var(--se-gray-500); margin-top: 2px; line-height: 1.4; }

/* ── La carte du formulaire ───────────────────────────────────────────────── */
.dv-zone { background: #fff; }
.dv-carte {
  max-width: 900px; margin: 0 auto;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 22px; padding: 34px;
  box-shadow: 0 18px 54px rgba(10,14,31,.08);
}

/* ── La progression ───────────────────────────────────────────────────────── */
.dv-etapes {
  display: flex; align-items: center;
  margin-bottom: 32px; padding-bottom: 28px;
  border-bottom: 1px solid var(--se-gray-200);
}
.dv-etape { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.dv-etape-rond {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--se-gray-100); color: var(--se-gray-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  flex-shrink: 0; transition: all .25s;
}
.dv-etape-rond i { position: absolute; opacity: 0; font-size: 13px; transition: opacity .2s; }
.dv-etape.actif .dv-etape-rond {
  background: var(--se-red); color: #fff;
  box-shadow: 0 6px 18px rgba(230,57,70,.34);
}
/* Étape franchie : la coche remplace le chiffre */
.dv-etape.fait .dv-etape-rond { background: var(--se-blue); color: #fff; }
.dv-etape.fait .dv-etape-rond span { opacity: 0; }
.dv-etape.fait .dv-etape-rond i { opacity: 1; }
.dv-etape-l {
  font-size: 10px; font-weight: 800; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .7px;
}
.dv-etape-t {
  font-family: var(--font-heading);
  font-size: 13.5px; font-weight: 700; color: var(--se-gray-400);
  margin-top: 1px; transition: color .25s;
}
.dv-etape.actif .dv-etape-t,
.dv-etape.fait .dv-etape-t { color: var(--se-ink); }
.dv-etape-trait { flex: 1; height: 2px; background: var(--se-gray-200); margin: 0 14px; border-radius: 2px; }
.dv-etape-trait span {
  display: block; height: 100%; width: 0;
  background: var(--se-blue); border-radius: 2px;
  transition: width .35s;
}
.dv-etape-trait.fait span { width: 100%; }

/* ── Les panneaux ─────────────────────────────────────────────────────────── */
.dv-panneau { display: none; }
.dv-panneau.actif { display: block; animation: dv-entre .3s ease; }
@keyframes dv-entre {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dv-panneau-tete { margin-bottom: 22px; }
.dv-panneau .dv-panneau-t {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; color: var(--se-ink);
  margin: 0 0 4px; letter-spacing: -.015em;
}
.dv-panneau .dv-panneau-s { font-size: 13.5px; color: var(--se-gray-500); margin: 0; }

.dv-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dv-champ-large { grid-column: 1 / -1; }
.dv-champ label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12.5px; font-weight: 700; color: var(--se-gray-700);
  margin-bottom: 7px;
}
.dv-champ label span { color: var(--se-red); }
.dv-aide { font-size: 11.5px; color: var(--se-gray-400); margin-top: 6px; line-height: 1.45; }

/* ── Le choix du type de projet : des cartes, pas un select ───────────────── */
.dv-choix {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.dv-choix-c { cursor: pointer; }
.dv-choix-c input { position: absolute; opacity: 0; width: 0; height: 0; }
.dv-choix-b {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: var(--se-gray-50);
  border: 1.5px solid var(--se-gray-200);
  border-radius: 12px;
  transition: all .18s;
}
.dv-choix-b i {
  font-size: 15px; color: var(--se-gray-400);
  width: 18px; text-align: center; flex-shrink: 0;
  transition: color .18s;
}
.dv-choix-t {
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 600; color: var(--se-gray-700);
  transition: color .18s;
}
.dv-choix-c:hover .dv-choix-b { border-color: var(--se-gray-300); background: #fff; }
.dv-choix-c input:checked ~ .dv-choix-b {
  background: rgba(230,57,70,.05);
  border-color: var(--se-red);
  box-shadow: 0 6px 18px rgba(230,57,70,.14);
}
.dv-choix-c input:checked ~ .dv-choix-b i,
.dv-choix-c input:checked ~ .dv-choix-b .dv-choix-t { color: var(--se-red); }
.dv-choix-c input:focus-visible ~ .dv-choix-b { outline: 2px solid var(--se-blue); outline-offset: 2px; }

/* ── Les radios ───────────────────────────────────────────────────────────── */
.dv-radios { display: grid; gap: 9px; }
.dv-radio {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--se-gray-50);
  border: 1.5px solid transparent;
  border-radius: 11px; cursor: pointer;
  font-size: 13.5px; color: var(--se-gray-700);
  transition: all .18s;
}
.dv-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.dv-radio-p {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--se-gray-300);
  background: #fff; flex-shrink: 0;
  position: relative; transition: all .18s;
}
.dv-radio-p::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--se-red);
  opacity: 0; transform: scale(.4); transition: all .18s;
}
.dv-radio:hover { background: #fff; border-color: var(--se-gray-200); }
.dv-radio input:checked ~ .dv-radio-p { border-color: var(--se-red); }
.dv-radio input:checked ~ .dv-radio-p::after { opacity: 1; transform: scale(1); }
.dv-radio:has(input:checked) {
  background: rgba(230,57,70,.05); border-color: rgba(230,57,70,.3);
  color: var(--se-ink); font-weight: 600;
}

/* ── Le pied de panneau ───────────────────────────────────────────────────── */
.dv-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--se-gray-200);
}
/* Le bouton Retour : la flèche va à gauche */
.dv-retour { flex-direction: row; padding: 12px 24px 12px 12px; }
.dv-retour .fleche { order: -1; }
.dv-retour:hover .fleche { transform: translateX(-3px); }

/* ── L'alternative ────────────────────────────────────────────────────────── */
.dv-alt {
  max-width: 900px; margin: 22px auto 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 26px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5FF);
  border: 1px solid var(--se-gray-200);
  border-radius: 16px;
}
.dv-alt-ic {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--se-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.dv-alt-txt { flex: 1; min-width: 220px; }
.dv-alt-t {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--se-ink);
}
.dv-alt-s { font-size: 13px; color: var(--se-gray-500); margin-top: 2px; }
.dv-alt-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.dv-alt-wa { color: #128C3E; border-color: #25D366; }
.dv-alt-wa .fleche { background: rgba(37,211,102,.14); }
.dv-alt-wa:hover { background: rgba(37,211,102,.06); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dv-garanties-grille { grid-template-columns: repeat(2, 1fr); }
  .dv-choix { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dv-carte { padding: 22px; }
  .dv-champs { grid-template-columns: 1fr; }
  .dv-choix { grid-template-columns: 1fr; }
  .dv-garanties-grille { grid-template-columns: 1fr; }
  /* Sur mobile, seule l'étape en cours garde son libellé */
  .dv-etape-txt { display: none; }
  .dv-etape.actif .dv-etape-txt { display: block; }
  .dv-etape-trait { margin: 0 8px; }
  .dv-pied { flex-direction: column-reverse; }
  .dv-pied .se-btn { width: 100%; justify-content: space-between; }
  .dv-alt { flex-direction: column; text-align: center; }
  .dv-alt-btns { width: 100%; }
  .dv-alt-btns .se-btn { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * CORRECTIF — .cta-bg
 * ══════════════════════════════════════════════════════════════════════════
 * Le HTML porte <div class="cta-bg"><img></div> sur 6 pages, mais AUCUNE règle
 * ne la stylait : l'image s'affichait en flux normal, à sa taille, au-dessus du
 * bloc — et le fond bleu commençait après elle, d'où la coupure franche.
 *
 * On la pose en fond, sous un voile qui garde le texte lisible.
 */
.cta-bg {
  position: absolute; inset: 0;
  z-index: 0; overflow: hidden;
}
.cta-bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Le voile : sans lui, le texte blanc se perd sur une photo claire */
.cta-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(15,30,92,.94) 0%, rgba(30,58,138,.88) 55%, rgba(46,76,184,.84) 100%);
}
/* Le contenu repasse au-dessus */
.cta > .container { position: relative; z-index: 2; }
.cta::before { z-index: 1; }

/* ── « Pourquoi demander un devis » ───────────────────────────────────────── */
/* On donne une raison avant de demander l'effort du formulaire. */
.dv-pourquoi { background: #fff; padding-bottom: 40px; }
.dv-pq-grille { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 58px; align-items: center; }

.dv-pq-txt .dv-pq-t {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px); font-weight: 800;
  color: var(--se-ink); line-height: 1.2; letter-spacing: -.02em;
  margin: 0 0 16px;
}
.dv-pq-t .rouge { color: var(--se-red); }
.dv-pq-txt .dv-pq-chapo {
  font-size: 16px; color: var(--se-gray-700); line-height: 1.7;
  font-weight: 500; margin: 0 0 24px;
  padding-left: 16px; border-left: 3px solid var(--se-red);
}

.dv-pq-liste { display: grid; gap: 15px; }
.dv-pq-item { display: flex; gap: 13px; align-items: flex-start; }
.dv-pq-item-ic {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(230,57,70,.10); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0; margin-top: 2px;
}
.dv-pq-item-t {
  font-family: var(--font-heading);
  font-size: 14.5px; font-weight: 700; color: var(--se-ink);
}
.dv-pq-item-s {
  font-size: 13.5px; color: var(--se-gray-500);
  line-height: 1.6; margin-top: 3px;
}

/* Le témoignage : il vaut mieux qu'un argument de plus */
.dv-pq-note {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 26px; padding: 20px;
  background: linear-gradient(135deg, #F8FAFC, #F1F5FF);
  border: 1px solid var(--se-gray-200);
  border-radius: 14px;
}
.dv-pq-note > i { color: var(--se-red); opacity: .3; font-size: 18px; flex-shrink: 0; }
.dv-pq-note p {
  font-size: 14px; color: var(--se-gray-700);
  line-height: 1.7; margin: 0 0 12px; font-style: italic;
}
.dv-pq-note p strong { color: var(--se-ink); font-style: normal; }
.dv-pq-note-qui { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dv-pq-note-n {
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700; color: var(--se-ink);
}
.dv-pq-note-r { font-size: 12px; color: var(--se-gray-400); }
.dv-pq-note-r::before { content: '· '; }

/* Le visuel */
.dv-pq-visuel { position: relative; padding: 0 24px 34px 0; }
.dv-pq-img { border-radius: 20px; overflow: hidden; }
.dv-pq-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
.dv-pq-cadre {
  position: absolute; right: 0; bottom: 0;
  width: 58%; height: 46%;
  border: 3px solid var(--se-blue); border-radius: 20px;
  z-index: -1;
}
/* La carte du délai : le chiffre qui compte */
.dv-pq-carte {
  position: absolute; left: -20px; bottom: 20px;
  background: #fff; border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 16px 44px rgba(10,14,31,.16);
  text-align: center;
}
.dv-pq-carte-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--se-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; margin: 0 auto 10px;
}
.dv-pq-carte-v {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 900; color: var(--se-ink); line-height: 1;
}
.dv-pq-carte-l {
  font-size: 10.5px; color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 5px;
}

@media (max-width: 1024px) {
  .dv-pq-grille { grid-template-columns: 1fr; gap: 40px; }
  .dv-pq-visuel { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .dv-pq-visuel { padding: 0; }
  .dv-pq-cadre { display: none; }
  .dv-pq-img img { height: 280px; }
  .dv-pq-carte { position: static; margin-top: -34px; margin-left: 14px; width: fit-content; }
}

/* ── La preuve : un client parle ──────────────────────────────────────────── */
.sv-preuve { background: #fff; padding: 20px 0 60px; }
.sv-preuve-in {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr 0.6fr;
  gap: 40px; align-items: center;
  background: linear-gradient(135deg, var(--se-blue-dark) 0%, var(--se-blue) 60%, #2E4CB8 100%);
  border-radius: 22px; padding: 38px 42px;
}
.sv-preuve-deco {
  position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.3), transparent 68%);
}
.sv-preuve-txt { position: relative; z-index: 2; }
.sv-preuve-txt > i { color: var(--se-red-light); font-size: 24px; opacity: .8; }
.sv-preuve-in .sv-preuve-txt p {
  font-size: 17px; color: #fff; line-height: 1.7;
  margin: 12px 0 20px; font-style: italic; font-weight: 400;
}
.sv-preuve-in .sv-preuve-txt p strong { font-style: normal; font-weight: 700; }
.sv-preuve-qui { display: flex; align-items: center; gap: 13px; }
.sv-preuve-ph {
  width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.34);
}
.sv-preuve-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-preuve-n {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; color: #fff;
}
.sv-preuve-r { font-size: 12.5px; color: rgba(255,255,255,.66); margin-top: 2px; }

.sv-preuve-chiffres {
  position: relative; z-index: 2;
  display: grid; gap: 18px;
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.16);
}
.sv-preuve-c-v {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 900; color: #fff; line-height: 1;
}
.sv-preuve-c-l {
  font-size: 11.5px; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .6px; margin-top: 5px;
}
/* Garde-fou : le texte sur fond bleu doit rester lisible */
.sv-preuve-in p, .sv-preuve-in div { color: inherit; }

@media (max-width: 1024px) {
  .sv-preuve-in { grid-template-columns: 1fr; gap: 30px; padding: 30px 26px; }
  .sv-preuve-chiffres {
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0; padding-top: 26px;
    border-left: none; border-top: 1px solid rgba(255,255,255,.16);
    text-align: center;
  }
}
@media (max-width: 600px) {
  .sv-preuve-chiffres { grid-template-columns: 1fr; gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * CORRECTIF — les avatars écrasés dans le carrousel de témoignages
 * ══════════════════════════════════════════════════════════════════════════
 * Owl Carousel impose « .owl-carousel .owl-item img { width:100% } », de
 * spécificité 0,2,1. Elle bat « .testimonial-avatar { width:50px } », de
 * spécificité 0,1,0 : l'avatar s'étirait sur toute la carte et devenait une
 * ellipse. On repasse devant avec la même spécificité, en plus fort.
 */
.owl-carousel .owl-item .testimonial-avatar {
  width: 54px; height: 54px;
  flex: 0 0 54px;
  object-fit: cover; object-position: center 20%;
  border-radius: 50%;
}

/* Le nom était coupé : la colonne du texte doit pouvoir se réduire. */
.testimonial-author > div { min-width: 0; flex: 1; }
.testimonial-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.testimonial-role {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le nom de société ne doit pas manger la place du nom */
.testimonial-company { flex-shrink: 0; }

@media (max-width: 480px) {
  /* Sur mobile, la société passe à la ligne plutôt que d'écraser le nom */
  .testimonial-author { flex-wrap: wrap; }
  .testimonial-company { margin-left: 67px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * LES FORMULAIRES — le message de retour
 * ══════════════════════════════════════════════════════════════════════════ */

.form-message {
  display: none;
  align-items: flex-start; gap: 11px;
  margin-top: 16px; padding: 14px 16px;
  border-radius: 11px;
  font-size: 13.5px; line-height: 1.55;
}
.form-message i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.form-message.ok {
  background: #F0FDF4; border: 1px solid #BBF7D0; color: #047857;
}
.form-message.erreur {
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
}

/* Le bouton pendant l'envoi */
.se-btn.en-cours { opacity: .7; pointer-events: none; }

/* Le piège à robots : invisible, mais pas display:none — certains robots
   ignorent les champs cachés de cette façon. */
.champ-piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
 * LA RECHERCHE
 * ══════════════════════════════════════════════════════════════════════════ */

.sr-voile {
  position: fixed; inset: 0;
  background: rgba(10,14,31,.6);
  backdrop-filter: blur(3px);
  z-index: 1400;
  opacity: 0; visibility: hidden;
  transition: all .25s;
}
.sr-voile.ouvert { opacity: 1; visibility: visible; }

.sr-panneau {
  position: fixed; inset: 0 0 auto 0;
  z-index: 1500;
  padding: 12vh 20px 20px;
  opacity: 0; visibility: hidden;
  transform: translateY(-16px);
  transition: all .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.sr-panneau.ouvert { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.sr-boite {
  max-width: 620px; margin: 0 auto;
  background: #fff; border-radius: 18px;
  box-shadow: 0 26px 70px rgba(10,14,31,.34);
  overflow: hidden;
}

.sr-champ {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 20px;
  border-bottom: 1px solid var(--se-line, #E8EBF0);
}
.sr-champ > i { color: var(--se-gray-400); font-size: 15px; flex-shrink: 0; }
.sr-champ input {
  flex: 1; border: none; outline: none;
  padding: 18px 0;
  font-family: var(--font-body); font-size: 16px;
  color: var(--se-ink); background: none;
}
.sr-champ input::placeholder { color: var(--se-gray-400); }
.sr-fermer {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--se-gray-100); color: var(--se-gray-600);
  border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .18s;
}
.sr-fermer:hover { background: var(--se-red); color: #fff; }

.sr-resultats { max-height: 56vh; overflow-y: auto; padding: 8px; }

.sr-invite {
  padding: 30px 20px; text-align: center;
  font-size: 13.5px; color: var(--se-gray-400);
}

.sr-nb {
  padding: 8px 14px 10px;
  font-size: 11px; font-weight: 800;
  color: var(--se-gray-400);
  text-transform: uppercase; letter-spacing: .7px;
}

.sr-item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 11px;
  text-decoration: none; transition: all .16s;
}
.sr-item:hover { background: rgba(230,57,70,.05); }
.sr-item-ic {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--se-gray-100); color: var(--se-gray-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; transition: all .16s;
}
.sr-item:hover .sr-item-ic {
  background: var(--se-red); color: #fff; transform: translateX(3px);
}
.sr-item-txt { flex: 1; min-width: 0; }
.sr-item-t {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px; font-weight: 700; color: var(--se-ink);
}
.sr-item-d {
  display: block;
  font-size: 12.5px; color: var(--se-gray-500); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sr-vide { padding: 36px 20px; text-align: center; }
.sr-vide i { font-size: 30px; color: var(--se-gray-300); }
.sr-vide p {
  margin: 14px 0 4px;
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--se-gray-600);
}
.sr-vide span { font-size: 13px; color: var(--se-gray-400); }
.sr-vide a { color: var(--se-red); font-weight: 600; }

@media (max-width: 600px) {
  .sr-panneau { padding: 8vh 14px 14px; }
  .sr-champ input { font-size: 15px; padding: 15px 0; }
}

/* ── La page 404 ──────────────────────────────────────────────────────────── */
.err-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 128px); font-weight: 900;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(230,57,70,.24);
  margin-bottom: 4px;
}
.err-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 900px; margin: 0 auto;
}
.err-carte {
  padding: 26px 20px; text-align: center;
  background: #fff; border: 1px solid var(--se-gray-200);
  border-radius: 16px; text-decoration: none;
  transition: all .2s;
}
.err-carte:hover {
  border-color: rgba(230,57,70,.3);
  box-shadow: 0 14px 36px rgba(10,14,31,.09);
  transform: translateY(-4px);
}
.err-carte-ic {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(230,57,70,.09); color: var(--se-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin: 0 auto 13px;
  transition: all .2s;
}
.err-carte:hover .err-carte-ic { background: var(--se-red); color: #fff; }
.err-carte-t {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--se-ink);
}
.err-carte-s { font-size: 12.5px; color: var(--se-gray-500); margin-top: 3px; }
.err-cherche { text-align: center; margin-top: 34px; }
.err-cherche p { font-size: 14.5px; color: var(--se-gray-500); margin-bottom: 14px; }
@media (max-width: 1024px) { .err-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .err-grille { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
 * LE RESPONSIVE DE MES SECTIONS
 * ══════════════════════════════════════════════════════════════════════════
 * Le site fait respirer ses sections : 100px sur grand écran, 90 puis 70.
 * Mes sections gardaient leur rembourrage en dur — sur un téléphone, 78px
 * de vide en haut et en bas, c'est un tiers de l'écran pour rien.
 * On suit la même progression.
 */

@media (max-width: 1200px) {
    .sv-zone       { padding: 68px 0 34px; }
    .ap-chiffres   { padding: 48px 0; }
    .ct-voies      { padding: 48px 0 0; }
    .ct-carte-zone { padding: 0 0 68px; }
    .rl-chiffres   { padding: 38px 0 0; }
    .dv-garanties  { padding: 42px 0 0; }
    .sv-preuve     { padding: 18px 0 52px; }
}

@media (max-width: 768px) {
    .sv-zone       { padding: 48px 0 24px; }
    .ap-chiffres   { padding: 38px 0; }
    .ct-voies      { padding: 36px 0 0; }
    .ct-carte-zone { padding: 0 0 48px; }
    .rl-chiffres   { padding: 28px 0 0; }
    .dv-garanties  { padding: 32px 0 0; }
    .sv-preuve     { padding: 14px 0 38px; }

    /* Les titres de section : ils prennent trop de place sur un écran étroit */
    .se-sect-head { margin-bottom: 28px; }
    .se-titre     { font-size: clamp(22px, 6vw, 28px); }
    .se-sous      { font-size: 14px; }
    .se-surtitre  { font-size: 12.5px; }
    .se-surtitre::before,
    .se-surtitre::after { width: 26px; }

    /* La bannière : le header fixe fait 126px, mais sur mobile il se replie */
    .se-banniere { padding: calc(var(--header-total, 126px) + 14px) 0 38px; }
    .se-banniere-titre { font-size: clamp(26px, 8vw, 34px); }
    .se-banniere-sous  { font-size: 14px; }

    /* Le bloc CTA */
    .se-cta   { padding: 28px 24px; border-radius: 18px; }
    .se-cta-t { font-size: 20px; }
    .se-cta-s { font-size: 13.5px; }
    .se-cta-btns { width: 100%; }
    .se-cta-btns .se-btn { flex: 1; justify-content: space-between; }

    /* Les boutons : sur un écran étroit, ils prennent toute la largeur */
    .se-btn { font-size: 11.5px; padding: 11px 11px 11px 20px; }
}

@media (max-width: 480px) {
    .sv-zone       { padding: 36px 0 18px; }
    .ap-chiffres   { padding: 30px 0; }
    .ct-voies      { padding: 28px 0 0; }
    .ct-carte-zone { padding: 0 0 36px; }
    .rl-chiffres   { padding: 22px 0 0; }
    .dv-garanties  { padding: 24px 0 0; }
    .sv-preuve     { padding: 12px 0 30px; }

    .se-sect-head { margin-bottom: 22px; }
    .se-cta { padding: 24px 18px; }

    /* Le surtitre perd ses filets : il n'y a plus la place */
    .se-surtitre::before,
    .se-surtitre::after { display: none; }
}