/* ══════════════════════════════════════════════════════════════════════════
   SOLUTION ENTREPRISE — feuille de la page /solution-entreprise
   Transcription de la maquette Claude Design « Solution Entreprise ».

   LA MAQUETTE PORTE TOUT EN STYLE EN LIGNE. Elle est faite pour ça : c'est un
   prototype que son éditeur visuel réécrit à chaque geste. Ici, la même chose
   en classes — mêmes valeurs, au pixel et à la couleur près. Deux raisons de
   ne pas recopier les attributs style= tels quels :

     · le gabarit deviendrait illisible (chaque carte porte huit déclarations
       répétées quatre fois) ;
     · et surtout, le JS de la page bascule des sélections. Un script qui doit
       écraser un style en ligne finit par écrire element.style.display = '',
       ce qui détruit la mise en page au lieu de la rétablir — le piège est
       connu, il a déjà coûté une grille sur l'espace client.

   Tout est préfixé `se-` et vit sous `.se` : la page est servie dans le gabarit
   public, à côté du CSS Bootstrap 3 et de fp-universal, et rien ici ne doit
   fuir vers le reste du site.

   LES DEUX BARRES COLLANTES. Le gabarit public pose son en-tête en
   position:sticky, top:0. La barre de sections se colle dessous, à la hauteur
   RÉELLE de cet en-tête — voir --se-entete plus bas : la hauteur avait été
   écrite en dur, l'en-tête a grandi, et la barre passait sous lui.

   ── TROIS COULEURS S'ÉCARTENT DE LA MAQUETTE, ET SEULEMENT TROIS ───────────

   Ses deux gris secondaires ne passaient pas le seuil de contraste AA (4,5:1
   pour du texte de cette taille), mesuré sur la page rendue :

       #8593ab  →  #677285    2,90–3,11  →  4,53    40 textes
       #6b7a90  →  #647287    4,07–4,36  →  4,55    71 textes

   Plus la pastille du héros, à 4,49 sur son fond #eaf0ff : #1e5eff → #1d5cfa,
   pour elle seule (#1e5eff reste la couleur d'accent de toute la page).

   Les proportions RVB sont conservées dans les trois cas : la teinte ne bouge
   pas, seule la luminance descend juste assez. Le second gris et la pastille
   sont imperceptibles ; le premier se voit, et c'est assumé — il portait les
   sur-titres et les mentions légales à un contraste de 3, ce qu'une page de
   vente ne peut pas se permettre.

   Reste #56657c (4,74) et #5b6a80 (5,32), qui passaient déjà et n'ont pas
   bougé. Le contrôle se rejoue en mesurant color contre le fond effectif de
   chaque élément portant du texte — pas à l'œil.
   ══════════════════════════════════════════════════════════════════════════ */

.se {
    font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #f5f7fb;
    color: #101a2b;
    letter-spacing: -0.012em;
    line-height: 1.5;
}

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

/* LA COULEUR DES LIENS DE PROSE, ET POURQUOI ELLE PASSE PAR :where().

   Écrite `.se a`, cette règle pèse (0,1,1) — une classe plus un type. Elle
   battait donc `.se-btn` (0,1,0) et repeignait en #1e5eff le texte de TOUS les
   boutons qui sont des <a>. Sur un bouton plein, dont le fond est ce même
   #1e5eff, cela donnait du bleu sur bleu : quatre boutons au contraste de 1,00,
   soit des rectangles vides. Relevé sur la production, pas ici.

   `:where()` ne compte pour rien dans le calcul : la règle retombe à (0,0,1),
   le poids d'un simple `a`. Les liens de prose gardent leur bleu, et la moindre
   classe posée sur un lien reprend la main sans avoir à surenchérir.

   Le piège vaut pour toute règle de ce fichier qui viserait un TYPE sous `.se` :
   la garder dans :where() est la façon sûre de poser un défaut. */
:where(.se) a { color: #1e5eff; text-decoration: none; }
:where(.se) a:hover,
:where(.se) a:focus { color: #1547cc; text-decoration: none; }
.se ::selection { background: rgba(30, 94, 255, .18); }
.se ::placeholder { color: #9aa7ba; }
.se :focus-visible { outline: 2px solid #1e5eff; outline-offset: 2px; }
.se input,
.se select,
.se textarea,
.se button { font-family: inherit; }

/* ── ARCHIVO PARTOUT, ET POURQUOI IL FAUT LE REDIRE ────────────────────────

   `.se { font-family: Archivo }` ne suffit pas : la police ne se transmet que
   par héritage, et l'héritage perd contre n'importe quelle règle qui vise
   l'élément. Or z-style.css, la feuille du site, pose

       body, h1, h2, h3, h4, h5, h6, a, p { font-family: 'Montserrat' }

   Ces cinq sélecteurs reprenaient donc la main sur le titre, tous les
   intertitres, tous les liens, tous les paragraphes — et sur les <span> qu'ils
   contiennent, par héritage. Relevé en production : 260 éléments de la page en
   Montserrat contre 747 en Archivo, deux polices mêlées dans la même carte.

   Montserrat est plus large qu'Archivo à taille égale. Les conséquences
   n'étaient pas seulement esthétiques : le <h1> passait de quatre à CINQ
   lignes (223 px → 278 px de haut), chaque onglet de la barre de sections
   gagnait 15 px, et la page ne tombait plus sur les mesures de la maquette.

   `:where()` remet la règle à la spécificité de `.se` seul, soit (0,1,0) :
   assez pour battre les sélecteurs de type de z-style.css, trop peu pour
   gêner une classe. Et comme elle vise les TYPES et non `*`, elle ne touche
   pas aux icônes Font Awesome, qui portent leur police par classe. */
.se :where(h1, h2, h3, h4, h5, h6, a, p, b, strong, em, li, label, blockquote) { font-family: inherit; }

/* Masquage : l'attribut plutôt qu'une classe, pour que le JS n'ait jamais à
   toucher à element.style.display — voir l'en-tête. */
.se [hidden] { display: none !important; }

/* Barres défilantes escamotées (bandeau de sections, onglets de services). */
.se-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.se-scroll::-webkit-scrollbar { display: none; }

/* ── OÙ SE COLLE LA BARRE DE SECTIONS, ET POURQUOI CE N'EST PAS UN NOMBRE ──

   Elle se colle SOUS l'en-tête public, qui est lui-même en position:sticky à
   top:0. Le chiffre était écrit en dur — 70px, la hauteur qu'avait l'en-tête au
   moment du portage.

   L'en-tête mesure aujourd'hui 89 px. La barre se collait donc 19 px TROP HAUT
   et ses dix-neuf premiers pixels passaient sous l'en-tête : au défilement, elle
   apparaissait rognée par le haut, son filet du bas décalé du contenu. Relevé en
   production : en-tête 0→89, barre 70→125, soit 36 px visibles sur 55.

   Un nombre en dur redeviendra faux au premier changement d'en-tête. La hauteur
   réelle est donc mesurée au chargement et au redimensionnement par
   solution-entreprise.js, qui la pose dans --se-entete. La valeur écrite ici est
   le repli : elle vaut la hauteur actuelle, si bien que la page est juste même
   sans JavaScript, et que le script ne fait que suivre les changements. */
.se { --se-entete: 89px; }

/* Sous la barre collante il faut encore la hauteur de la barre elle-même (55 px)
   plus un peu d'air, sinon l'ancre dépose le titre de section dessous. */
.se section[id] { scroll-margin-top: calc(var(--se-entete) + 62px); }

/* ── LA COLONNE DE CONTENU, ET POURQUOI ELLE N'EST PAS UN CONTENEUR ────────

   La page n'avait aucune largeur maximale : ses quatre bandes pleine largeur
   (barre de sections, héros, bandeau, sections) ne portaient qu'une gouttière
   de 44 px au plus. Sur un écran de 1600 px le texte courait donc de 44 à
   1556 — collé aux deux bords, alors que /service/vps-ssd, la page voisine,
   cadre son contenu à 1360 px centrés (`.vps-wrap`, 1440 px de boîte moins
   deux gouttières de 40). Les deux pages du même site ne s'alignaient pas.

   Le contenu est donc cadré ici À LA MÊME MESURE. Deux choses à savoir :

     · le cadrage passe par le PADDING des bandes, pas par un conteneur ajouté
       dans le gabarit. Les fonds doivent rester pleine largeur — la barre
       collante est translucide sur toute la fenêtre, `.se-sect--blanc` peint
       une bande blanche d'un bord à l'autre. Un conteneur centré aurait
       emporté le fond avec lui ;
     · `max()` garde la gouttière existante tant que la fenêtre est plus
       étroite que la colonne : au-dessous de 1448 px (1360 + deux fois 44) la
       différence est négative et c'est le clamp qui l'emporte. Rien ne bouge
       donc sous cette largeur — vérifié à 375, 768, 1024 et 1280 px, où le
       padding reste au pixel ce qu'il était.

   Les deux `max-width` en style en ligne que portaient #options (1200 px) et
   la zone du formulaire (1280 px) sont retirés du gabarit : c'étaient deux
   cadrages de fortune, chacun à sa propre mesure, posés faute de colonne
   commune. Ils désalignaient ces deux sections des quatre autres. */
.se {
    --se-colonne: 1360px;
    --se-gout: clamp(16px, 3vw, 44px);
}

.se-subnav,
.se-hero,
.se-bandeau,
.se-sect {
    padding-inline: max(var(--se-gout), (100% - var(--se-colonne)) / 2);
}

/* ─────────────────────────── Barre de sections ─────────────────────────── */

.se-subnav {
    position: sticky;
    top: var(--se-entete);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-block: 11px;   /* l'horizontal vient de la colonne commune */
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #e2e8f2;
    font-size: 13px;
}

.se-subnav-titre {
    color: #647287;
    margin-right: 8px;
    white-space: nowrap;
    font-weight: 600;
}

.se-subnav a {
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #dfe5f0;
    background: transparent;
    color: #46556b;
    transition: border-color .15s, background .15s, color .15s;
}

.se-subnav a:hover { border-color: #1e5eff; color: #1e5eff; }

.se-subnav a.is-on {
    border-color: #1e5eff;
    background: #eef3ff;
    color: #1e5eff;
}

/* SUR TÉLÉPHONE, LA BARRE PERD SON TITRE ET GARDE SES ONGLETS.

   « Solution Entreprise » occupait 143 des 375 pixels de la barre, soit 38 % de
   la largeur, pour redire ce que la pastille et le <h1> annoncent trois
   centimètres plus bas. Les six onglets se partageaient le reste et il fallait
   défiler pour atteindre le premier.

   Le titre part donc à l'écran étroit — pas en `display:none` sur un élément
   utile à la compréhension, mais parce qu'il est ici purement redondant : la
   barre garde son aria-label « Sections de la page », qui est ce que lit un
   lecteur d'écran. Les onglets, eux, sont tous là et défilent d'un doigt. */
@media (max-width: 767px) {
    .se-subnav { padding-left: 14px; padding-right: 14px; gap: 7px; }
    .se-subnav-titre { display: none; }

    /* Un peu plus de chair sous le doigt : 5px de haut donnaient une cible de
       27 pixels, sous le minimum tenable au pouce. */
    .se-subnav a { padding: 7px 13px; }
}

/* ──────────────────────────────── Sections ─────────────────────────────── */

.se-sect {
    padding-block: clamp(44px, 5.5vw, 82px);   /* l'horizontal vient de la colonne commune */
    border-bottom: 1px solid #e2e8f2;
}

.se-sect--blanc { background: #fff; }

.se-etape {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #1e5eff;
    margin-bottom: 14px;
}

.se-h2 {
    margin: 0 0 12px;
    font-size: clamp(25px, 2.9vw, 38px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.se-intro {
    margin: 0 0 34px;
    font-size: 15.5px;
    color: #56657c;
    max-width: 64ch;
    line-height: 1.6;
}

/* LA MESURE DE CHAQUE INTRO EST RÉGLÉE À PART. La maquette ne leur donne pas
   la même largeur : 62ch sous « Quel type de solution », 66ch sous les
   services, 68ch sous la demande d'étude, et 700px pour les options — une
   largeur fixe, parce que ce paragraphe-là est suivi d'une grille et non d'un
   titre. Le 64ch ci-dessus reste le défaut, celui de #achat. Ce qui se règle
   ici est la coupure de ligne sous chaque titre : ça ne se factorise pas. */
.se #solution .se-intro { max-width: 62ch; }
.se #services .se-intro { max-width: 66ch; margin-bottom: 26px; }
.se #options  .se-intro { max-width: 700px; margin-bottom: 26px; }
.se #etude    .se-intro { max-width: 68ch; }

.se-mention {
    margin: 22px 0 0;
    font-size: 12.5px;
    color: #677285;
    max-width: 74ch;
    line-height: 1.6;
}

.se-suretitre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #677285;
    margin-bottom: 12px;
}

/* ────────────────────────────────── Héros ─────────────────────────────── */

.se-hero-wrap { background: #fff; border-bottom: 1px solid #e2e8f2; }

.se-hero {
    display: grid;
    grid-template-columns: 47fr 53fr;
    align-items: center;
    gap: clamp(22px, 2.6vw, 40px) clamp(24px, 3vw, 48px);
    padding-block: clamp(26px, 3.2vw, 48px) clamp(28px, 3.4vw, 50px);   /* idem */
}

.se-hero > .se-hero-txt { grid-column: 1; grid-row: 1; }
.se-hero > .se-hero-img { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.se-hero > .se-hero-rassure { grid-column: 1; grid-row: 2; }

/* Sans illustration (le fichier peut ne pas être déposé), la colonne de droite
   n'a plus rien à porter : le héros repasse sur une seule colonne plutôt que
   de laisser une moitié de page vide. */
.se-hero--sansimage { grid-template-columns: minmax(0, 1fr); }
.se-hero--sansimage > .se-hero-txt,
.se-hero--sansimage > .se-hero-rassure { grid-column: 1; }

@media (max-width: 900px) {
    .se-hero { grid-template-columns: 1fr; }
    .se-hero > .se-hero-txt,
    .se-hero > .se-hero-img,
    .se-hero > .se-hero-rassure { grid-column: 1; grid-row: auto; }
    .se-hero > .se-hero-txt { order: 1; }
    .se-hero > .se-hero-img { order: 2; }
    .se-hero > .se-hero-rassure { order: 3; }
}

.se-pastille {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: #eaf0ff;
    color: #1d5cfa;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 24px;
}

.se-h1 {
    margin: 0 0 20px;
    font-size: clamp(32px, 4.1vw, 53px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-wrap: pretty;
}

.se-h1 em { font-style: normal; color: #1e5eff; }

.se-hero-txt p {
    margin: 0 0 30px;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;
    color: #56657c;
    max-width: 56ch;
}

.se-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

/* LES DEUX BOUTONS DU HÉROS PASSENT PLEINE LARGEUR, ET C'EST UNE QUESTION DE
   PROPRETÉ AUTANT QUE DE POUCE. Ils mesurent 175 et 180 pixels : à 375, la
   somme plus le gap fait 367 pour 343 de place, donc ils s'enroulaient déjà —
   mais l'un sous l'autre avec cinq pixels d'écart de largeur, ce qui se voit et
   se lit comme un défaut d'alignement. Empilés à la même largeur, ils forment
   la pile d'appels à l'action attendue sur téléphone. */
@media (max-width: 560px) {
    .se-hero-cta > .se-btn { flex: 1 1 100%; }
}

.se-hero-rassure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
    padding-top: 24px;
    border-top: 1px solid #e8edf6;
}

/* Les quatre garanties tiennent en deux colonnes tant qu'une colonne porte une
   ligne de titre. À 375 elles n'en portent plus : les quatre intitulés passent
   à deux lignes (« Accompagnement / après livraison ») et leur description à
   deux autres, soit huit lignes de texte hachées dans 158 pixels. En colonne
   unique, chaque garantie tient son titre sur une ligne. */
@media (max-width: 560px) {
    .se-hero-rassure { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}

.se-rassure { display: flex; gap: 10px; align-items: flex-start; }
.se-rassure svg { flex-shrink: 0; margin-top: 2px; }
.se-rassure b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.se-rassure span { display: block; font-size: 12.5px; line-height: 1.5; color: #647287; }

.se-hero-img img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    margin-left: auto;
}

.se-bandeau {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding-block: 14px;   /* idem */
    border-top: 1px solid #e8edf6;
    color: #647287;
    font-size: 12.5px;
}

/* ───────────────────────────────── Boutons ────────────────────────────── */

.se-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 9px;
    background: #1e5eff;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid #1e5eff;
    cursor: pointer;
    text-align: center;
    transition: background .15s, border-color .15s, color .15s;
}

.se-btn:hover,
.se-btn:focus { background: #1547cc; border-color: #1547cc; color: #fff; }

.se-btn--fant {
    background: #fff;
    border: 1px solid #d5dded;
    color: #1b2a3c;
}

.se-btn--fant:hover,
.se-btn--fant:focus { border-color: #1e5eff; color: #1e5eff; background: #fff; }

.se-btn--sm { padding: 13px 22px; font-size: 14px; }

/* ──────────────────── Étape 1 — le choix de la solution ───────────────── */

/* ── POURQUOI TOUS LES minmax() DE CE FICHIER SONT EN min(…, 100%) ─────────

   `repeat(auto-fit, minmax(232px, 1fr))` se lit « autant de colonnes de 232px
   au moins que la place le permet ». Quand la place tombe SOUS 232px, la
   promesse tient quand même : la grille garde une colonne de 232px et déborde
   de son conteneur. Le minimum est un plancher, pas un souhait.

   Le cas n'est pas théorique ici. Mesuré à 375 : .se-fiche a 24px de padding de
   chaque côté, donc 295px de boîte utile pour un minimum de 300 — la piste
   sortait déjà de la carte de cinq pixels, et de bien plus à 320.

   `min(232px, 100%)` garde exactement le même comportement partout où il y a la
   place — sur ordinateur la valeur vaut toujours 232px — et laisse la colonne
   se réduire à la largeur disponible quand il n'y en a plus. C'est la forme
   sûre de auto-fit, à appliquer à chacune des six grilles de la page. */
.se-solutions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
    gap: 14px;
}

.se-sol {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 20px;
    min-height: 132px;
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    background: #fff;
    color: #101a2b;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.se-sol:hover { border-color: #1e5eff; color: #101a2b; }

.se-sol.is-on {
    border: 2px solid #1e5eff;
    background: #f5f8ff;
    padding: 19px;                     /* compense la bordure de 2px */
}

.se-sol-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f4f9;
}

.se-sol.is-on .se-sol-ico { background: #e2ebff; }
.se-sol svg { stroke: #46556b; }
.se-sol.is-on svg { stroke: #1e5eff; }

.se-sol-nom { font-size: 15.5px; font-weight: 700; }
.se-sol-court { font-size: 12.5px; line-height: 1.55; color: #5b6a80; }

.se-choisi {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #1e5eff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.se-fiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(22px, 3vw, 44px);
    margin-top: 32px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    background: #fff;
}

.se-fiche h3 {
    margin: 0 0 12px;
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.se-fiche p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: #56657c; max-width: 52ch; }

.se-jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.se-jeton {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f2;
    background: #f8fafd;
    font-size: 12.5px;
    color: #46556b;
}

.se-prix-ligne { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.se-prix-ligne span:first-child { font-size: 13px; color: #647287; }
.se-prix-gros { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; color: #1e5eff; }
.se-prix-note { font-size: 12px; color: #677285; margin-top: 6px; }

.se-benefs { display: flex; flex-direction: column; gap: 14px; }
.se-benef { display: flex; gap: 11px; align-items: flex-start; }
.se-benef svg { flex-shrink: 0; margin-top: 2px; }
.se-benef b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.se-benef span { display: block; font-size: 12.5px; line-height: 1.55; color: #5b6a80; }

/* ───────────── Étapes 2 et 3 — les cartes niveau et accompagnement ────── */

.se-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
    gap: 16px;
}

.se-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 24px;
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    background: #fff;
    color: #101a2b;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.se-carte:hover { border-color: #1e5eff; color: #101a2b; }

.se-carte--devis { border: 1px dashed #cdd7e8; background: #f9fbfe; }

.se-carte.is-on {
    border: 2px solid #1e5eff;
    background: #f5f8ff;
    box-shadow: 0 14px 36px rgba(30, 94, 255, .12);
    padding: 23px;                     /* compense la bordure de 2px */
}

.se-carte-tete { display: flex; align-items: center; gap: 10px; }
.se-carte.is-on .se-carte-tete { padding-right: 78px; }

/* LES DEUX GRILLES DE CARTES NE SONT PAS RÉGLÉES PAREIL. Elles partagent les
   classes se-cartes et se-carte, mais la maquette leur donne des valeurs
   distinctes : les niveaux de projet (#achat) tiennent à partir de 258px et
   réservent 78px pour la pastille « CHOISIE » ; les services récurrents
   (#services) partent de 262px et réservent 72px pour « CHOISI » — le mot est
   plus court, la carte plus dense. Les valeurs de #achat restent en défaut
   ci-dessus. Relevé en portant la maquette : sans ce découpage, l'une des deux
   grilles hérite forcément des réglages de l'autre. */
.se #services .se-cartes { grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr)); }
.se #services .se-carte.is-on .se-carte-tete { padding-right: 72px; }
.se-carte-nom { font-size: 17px; font-weight: 700; }

.se-carte-marque {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #1e5eff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.se-carte-pour {
    font-size: 12.5px;
    color: #647287;
    margin: 8px 0 18px;
    line-height: 1.55;
    min-height: 38px;
}

.se-carte-prix { display: flex; align-items: baseline; gap: 5px; }
.se-carte-prix .se-pfx { font-size: 12.5px; color: #647287; }
.se-carte-prix .se-val { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; }
.se-carte-prix .se-unite { font-size: 12.5px; color: #647287; }

.se-note-annuelle { font-size: 12px; color: #647287; margin-top: 7px; line-height: 1.5; }

.se-filet { display: block; height: 1px; background: #e8edf6; margin: 18px 0; }

.se-legende {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #677285;
}

.se-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: #46556b;
    margin: 11px 0 18px;
}

.se-liste--pousse { flex: 1; }

.se-carte-perso {
    font-size: 12px;
    color: #647287;
    padding: 9px 11px;
    border-radius: 8px;
    background: #f5f7fb;
    margin-bottom: 16px;
}

.se-carte-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    color: #647287;
    margin: 18px 0 16px;
    padding-top: 14px;
    border-top: 1px solid #e8edf6;
}

.se-carte-cta {
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid #d5dded;
    background: transparent;
    color: #1b2a3c;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

.se-carte.is-on .se-carte-cta { background: #1e5eff; border-color: #1e5eff; color: #fff; }

/* Bascule mensuel / annuel */
.se-bascule {
    display: inline-flex;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid #e2e8f2;
    background: #fff;
    margin-bottom: 30px;
}

.se-bascule a {
    padding: 9px 20px;
    border: none;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #46556b;
    background: transparent;
}

.se-bascule a.is-on { background: #1e5eff; color: #fff; }
.se-bascule a.is-on:hover { color: #fff; }

/* ───────────────── La remise à la livraison (étape 2, bas) ────────────── */

.se-remise {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(26px, 3.5vw, 52px);
    align-items: center;
}

@media (max-width: 900px) { .se-remise { grid-template-columns: minmax(0, 1fr); } }

.se-remise img {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    justify-self: center;
}

.se-sep { height: 1px; background: #e2e8f2; margin: clamp(38px, 5vw, 62px) 0; }

.se-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(264px, 100%), 1fr));
    gap: 16px;
    margin-top: clamp(30px, 4vw, 48px);
}

.se-bloc {
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    background: #f9fbfe;
    padding: 24px;
}

.se-bloc--vedette { border-color: #b9cdfa; background: #f5f8ff; }

.se-bloc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef3ff;
    margin-bottom: 14px;
}

.se-bloc--vedette .se-bloc-ico { background: #e2ebff; }
.se-bloc-titre { font-size: 16px; font-weight: 700; margin-bottom: 9px; }
.se-bloc-txt { font-size: 13px; line-height: 1.6; color: #5b6a80; margin-bottom: 16px; }
.se-bloc-liste { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: #46556b; }

.se-badge-remis {
    padding: 4px 9px;
    border-radius: 999px;
    background: #e2ebff;
    color: #1546c9;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.se-avis { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; max-width: 84ch; }
.se-avis svg { flex-shrink: 0; margin-top: 2px; }
.se-avis p { margin: 0; font-size: 12.5px; color: #677285; line-height: 1.6; }

/* ─────────────────── Étape 4 — le tableau des services ────────────────── */

.se-onglets { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; }

.se-onglets button {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #dfe5f0;
    background: #fff;
    color: #46556b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}

.se-onglets button:hover { border-color: #1e5eff; }
.se-onglets button[aria-selected="true"] { border-color: #1e5eff; background: #eef3ff; color: #1e5eff; }

.se-tableau {
    border: 1px solid #dce5f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 26, 43, .04);
    overflow: hidden;
}

.se-srow-wrap { border-top: 1px solid #eef2f8; }
.se-srow-wrap:first-child { border-top: none; }

.se-srow {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 170px 150px;
    gap: 8px 18px;
    align-items: center;
    min-height: 96px;
    padding: 18px clamp(16px, 2vw, 24px);
    border-left: 2px solid transparent;
    background: #fff;
    transition: background .18s ease, border-color .18s ease;
}

.se-srow-wrap.is-on .se-srow { background: #f5f8ff; border-left-color: #1e5eff; }

@media (max-width: 980px) {
    .se-srow { grid-template-columns: 42px minmax(0, 1fr); }
    .se-srow .se-sprix { grid-column: 2; }
    .se-srow .se-sbtn { grid-column: 2; max-width: 200px; }
}

/* SUR TÉLÉPHONE, LE PRIX ET LE BOUTON QUITTENT LA COLONNE DU TEXTE.

   Le repli ci-dessus range tout sous l'icône : la piste de 42px et son gap de
   18 restent en place, et les trois rangs de la colonne 2 commencent donc 60
   pixels après le bord. À 375 il ne restait que 247 pixels utiles sur 341 pour
   la description, le prix et le bouton — un quart de la largeur perdu en marge
   sous une icône qui, elle, n'occupe que le premier rang.

   L'icône garde sa place à côté du NOM, ce qui est son rôle : les identifier
   d'un coup d'œil. Le prix et le bouton, eux, passent sur toute la largeur.
   `align-items: start` est indispensable — la valeur `center` de la rangée
   centrerait l'icône sur la hauteur de son rang au lieu de l'aligner sur la
   première ligne du nom. */
@media (max-width: 767px) {
    .se-srow {
        align-items: start;
        gap: 12px;
        min-height: 0;
    }
    .se-srow .se-sico { align-self: start; }
    .se-srow .se-sprix,
    .se-srow .se-sbtn { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) { .se-srow .se-sbtn { max-width: none; } }

.se-sico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f1f4f9;
    flex-shrink: 0;
}

.se-srow-wrap.is-on .se-sico { background: #e2ebff; }

/* Les trois lignes illustrées. L'image est posée à 22px comme la maquette ;
   `flex-shrink: 0` la protège du calage de la grille — sans lui, une image
   dans une piste étroite se laisse écraser, ce que le trait SVG ne fait pas. */
.se-sico img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }

.se-scorps { min-width: 0; }
.se-snom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.se-snom > span:first-child { font-size: 14.5px; font-weight: 700; }

.se-sbadge {
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef3ff;
    color: #1546c9;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* La pastille « Recommandé » ne distingue quelque chose que sous « Tous les
   services » : sous « Recommandés » toutes les lignes la porteraient, sous
   « Visibilité & lancement » aucune. L'attribut data-se-tab est désormais posé
   par le SERVEUR autant que par le script, la règle vaut donc dès le premier
   affichage et sans JavaScript. */
.se-tableau:not([data-se-tab="all"]) .se-sbadge--reco { display: none; }

.se-sdesc { font-size: 12.5px; line-height: 1.5; color: #5b6a80; margin-top: 4px; max-width: 66ch; }
.se-sbas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; }
.se-scles { font-size: 12px; color: #677285; }

.se-sdetail-btn {
    padding: 0;
    border: none;
    background: none;
    color: #1e5eff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.se-sprix > div:first-child { font-size: 14px; font-weight: 700; white-space: nowrap; }
.se-sprix > div:last-child { font-size: 11.5px; color: #677285; margin-top: 3px; }
.se-sprix--inclus > div:first-child { color: #15803d; }

.se-sbtn-el {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid #d5dded;
    background: #fff;
    color: #1b2a3c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.se-sbtn-el:hover { border-color: #1e5eff; color: #1b2a3c; }
.se-srow-wrap.is-on .se-sbtn-el { background: #1e5eff; border-color: #1e5eff; color: #fff; }

.se-scouvert { font-size: 12.5px; color: #647287; white-space: nowrap; }

.se-sdetails {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 clamp(16px, 2vw, 24px) 18px 74px;
    background: #fff;
}

/* Le retrait de 74px cale le détail sous la colonne du texte : 42 d'icône, 18 de
   gap, plus le padding de la rangée. Sur téléphone cette colonne n'existe plus —
   le prix et le bouton sont passés pleine largeur — et le détail reprend donc le
   padding de la rangée.

   ⚠️ Cette règle DOIT rester après le raccourci `padding` ci-dessus : à
   spécificité égale, c'est l'ordre qui tranche, et une longhand écrite plus haut
   se ferait écraser par le raccourci. Éprouvé : posée dans le bloc @media de
   .se-srow, plus haut dans le fichier, elle ne faisait rien. */
@media (max-width: 767px) {
    .se-sdetails { padding-left: clamp(16px, 2vw, 24px); }
}

.se-srow-wrap.is-on .se-sdetails { background: #f5f8ff; }

.se-sdetails span {
    padding: 4px 9px;
    border-radius: 6px;
    background: #f4f7fc;
    font-size: 11.5px;
    color: #56657c;
}

.se-barre {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px clamp(16px, 2vw, 24px);
    border-top: 1px solid #dce5f2;
    background: rgba(245, 248, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.se-barre-compte { font-size: 13.5px; font-weight: 600; color: #1b2a3c; }
.se-pousse { flex: 1; min-width: 8px; }

/* LA BARRE COLLANTE DOIT RESTER BASSE : elle mange le bas de l'écran pendant
   toute la lecture du tableau. Enroulée librement à 375, elle prenait 124px sur
   trois rangs bancals — le compte et « Tout retirer » sur le premier mais
   décalés de onze pixels l'un de l'autre, faute d'être de même hauteur, et
   « Continuer vers le récapitulatif » seul sur le second, à sa largeur propre.

   Le seul réglage nécessaire est de donner au bouton principal un rang entier :
   le compte et « Tout retirer » tiennent alors ensemble sur le premier (127 +
   53 de pousseur + 97, pour 311 de place), le pousseur les écarte comme sur
   ordinateur, et la barre retombe à deux rangs propres. */
@media (max-width: 560px) {
    .se-barre { gap: 10px 12px; }
    .se-barre > .se-btn:not(.se-btn--fant) { flex: 1 1 100%; }
}

.se-avert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1px solid #d9e2f2;
    border-radius: 10px;
    background: #f5f8ff;
    font-size: 12.5px;
    color: #46556b;
    margin-bottom: 20px;
}

/* ─────────────────────────── Le récapitulatif ─────────────────────────── */

.se-recap {
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    background: #f9fbff;
    padding: clamp(20px, 2.4vw, 28px);
}

.se-recap-grille {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px clamp(24px, 3vw, 48px);
}

.se-recap-titre {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #1e5eff;
    width: 100%;
}

/* LES TROIS MESURES S'EMPILENT PLUTÔT QUE DE S'ENROULER.

   La rangée est en flex-wrap : à 375 elle plaçait « Projet » et
   « Investissement initial estimé » côte à côte, la seconde étiquette passant
   sur deux lignes tandis que la première tenait sur une — deux blocs de hauteur
   différente dont les valeurs ne s'alignaient plus. L'enroulement libre
   convient à une rangée d'étiquettes courtes, pas à trois mesures qu'on lit en
   colonne.

   Le pousseur est un pur écarteur : à `flex: 1 1 100%` il prendrait un rang
   entier de vide entre la dernière mesure et le bouton. */
@media (max-width: 620px) {
    .se-recap-grille { gap: 18px; }
    .se-recap-grille > * { flex: 1 1 100%; }
    .se-recap-grille > .se-pousse { display: none; }
}

.se-recap-lib { font-size: 12px; color: #647287; margin-bottom: 5px; }
.se-recap-val { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.se-recap-gros { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.se-recap-appoint { font-size: 12.5px; color: #647287; }

.se-recap p {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e4ebf7;
    font-size: 12.5px;
    color: #677285;
    line-height: 1.6;
    max-width: 82ch;
}

/* ──────────────────────────── Notre méthode ───────────────────────────── */

.se-methode {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(26px, 4vw, 50px);
}

.se-etapes { display: flex; flex-direction: column; }
.se-pas { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.se-pas-rail { display: flex; flex-direction: column; align-items: center; }

.se-pas-num,
.se-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #cdd9ee;
    background: #f5f8ff;
    color: #1e5eff;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.se-pas-trait { flex: 1; width: 1px; background: #e2e8f2; margin: 4px 0; }
.se-pas-corps { padding-bottom: 18px; }
.se-pas-corps b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.se-pas-corps span { display: block; font-size: 12.5px; line-height: 1.55; color: #5b6a80; }

.se-encart {
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    background: #f9fbff;
    padding: clamp(24px, 2.6vw, 34px);
}

.se-encart h3 {
    margin: 0;
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.se-encart-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.se-encart-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #e4ecff;
    flex-shrink: 0;
}

.se-encart > p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.65; color: #56657c; max-width: 46ch; }
.se-points { display: flex; flex-direction: column; gap: 20px; }
.se-point { display: flex; gap: 13px; align-items: flex-start; }
.se-point svg { flex-shrink: 0; margin-top: 2px; }
.se-point b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.se-point span { display: block; font-size: 13px; line-height: 1.6; color: #5b6a80; }

.se-citation {
    margin: 26px 0 0;
    padding: 16px 18px;
    border-left: 2px solid #1e5eff;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #1b2a3c;
}

/* ───────────────────── Étape 5 — la demande d'étude ───────────────────── */

.se-form-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

@media (max-width: 980px) { .se-form-grille { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* LA CARTE DU FORMULAIRE N'EST PLUS LA GRILLE. La maquette découpe les champs
   en deux groupes titrés — « Vos coordonnées », « Votre projet » — donc la carte
   empile des blocs et ce sont les deux .se-grille qui tiennent les colonnes.
   Sans ce partage, les intitulés de groupe deviendraient des cellules de grille
   et se rangeraient à côté d'un champ au lieu de le surmonter. */
.se-champs {
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: #fff;
    padding: clamp(22px, 2.5vw, 32px);
}

.se-groupe {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f8;
}
.se-groupe--suite { margin-top: 30px; }

.se-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* ⚠️ CETTE RÈGLE VISAIT .se-champs, ET NE FAISAIT DONC RIEN.

   Le commentaire ci-dessus raconte le déplacement : la carte a cessé d'être la
   grille, et ce sont les deux .se-grille qui tiennent les colonnes. Le repli
   mobile, lui, est resté sur .se-champs — un élément passé en `display: block`,
   sur lequel grid-template-columns n'a aucun effet. Règle écrite, commentée, et
   morte : elle n'a jamais replié quoi que ce soit.

   Ce qu'on voyait à la place, à 375 : le premier groupe (« Vos coordonnées »,
   quatre champs) restait sur DEUX colonnes de 139,5px et ses gabarits étaient
   coupés au milieu d'un mot — « Nom de votre e| », « vous@entrepris| ». Le
   second groupe (« Votre projet »), lui, s'empilait correctement… parce que
   fp-responsive.js avait mesuré SON débordement à lui et l'avait replié d'office.
   Les deux moitiés du même formulaire ne se ressemblaient donc plus.

   Corrigée, la page décide elle-même, pour les deux groupes, sans dépendre de ce
   que le script générique aura mesuré. */
@media (max-width: 620px) { .se-grille { grid-template-columns: minmax(0, 1fr); } }

.se-champ {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #35435a;
}

.se-champ--large { grid-column: 1 / -1; }

.se-champ input,
.se-champ select,
.se-champ textarea {
    padding: 12px 14px;
    border: 1px solid #d5dded;
    border-radius: 8px;
    font-size: 14px;
    color: #101a2b;
    background: #fff;
    font-weight: 400;
    width: 100%;
}

.se-champ textarea { resize: vertical; min-height: 118px; }
.se-champ input[aria-invalid="true"],
.se-champ textarea[aria-invalid="true"] { border-color: #dc2626; }

.se-erreur { font-size: 11.5px; color: #dc2626; font-weight: 500; }

/* ═══════════════════ LA CARTE DE RÉCAPITULATIF DU FORMULAIRE ═══════════════════

   Elle remplace les quatre jetons à icône : cinq groupes séparés par un filet
   — solution et formule, accompagnement, services, visibilité, totaux — chacun
   avec son raccourci vers la section qui le change.

   TOUTES LES PISTES SONT EN minmax(0, …). Une piste `1fr` refuse de descendre
   sous la largeur de son contenu : un nom de service long élargit la grille au
   lieu de se couper, et la carte déborde. C'est le même piège que la rangée de
   services, réglé de la même façon. */
.se-recapc {
    margin-top: 26px;
    border: 1px solid #d8e2f2;
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}

.se-recapc-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px clamp(16px, 1.8vw, 24px);
    border-bottom: 1px solid #e6edf8;
}

.se-recapc-h { font-size: 15.5px; font-weight: 800; color: #101a2b; }
.se-recapc-sous { margin-top: 5px; font-size: 12.5px; color: #6b7a90; }

/* Le bouton clair : « Modifier mes choix », « Ajouter des services »… */
.se-recapc-bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid #c7d6f5;
    border-radius: 8px;
    background: #fff;
    color: #1e5eff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.se-recapc-bouton:hover { border-color: #1e5eff; color: #1547cc; }

/* Le lien nu de l'en-tête d'un groupe. */
.se-recapc-lien { font-size: 12.5px; font-weight: 600; color: #1e5eff; white-space: nowrap; }

.se-recapc-grp { padding: 22px clamp(16px, 1.8vw, 24px); border-bottom: 1px solid #e6edf8; }

.se-recapc-gh {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.se-recapc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef3ff;
    flex-shrink: 0;
}
.se-recapc-ico--sm { width: 28px; height: 28px; border-radius: 8px; }
.se-recapc-ico svg, .se-recapc-ico img { flex-shrink: 0; }

.se-recapc-titre { font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; color: #46556b; min-width: 0; }

.se-recapc-triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.se-recapc-lab { font-size: 12px; color: #7b8798; font-weight: 500; }
.se-recapc-val { font-size: 15px; font-weight: 700; color: #101a2b; margin-top: 6px; line-height: 1.4; }

.se-recapc-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; }
.se-recapc-planligne { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.se-recapc-plannom { font-size: 15px; font-weight: 700; color: #101a2b; }
.se-recapc-planprix { font-size: 16px; font-weight: 700; white-space: nowrap; text-align: right; }
.se-recapc-note { margin-top: 6px; font-size: 12.5px; color: #6b7a90; }

.se-recapc-pastille {
    padding: 3px 9px;
    border-radius: 999px;
    background: #e9eef9;
    color: #46556b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.se-recapc-pastille--bleue { background: #dfe8ff; color: #1546c9; margin-top: 8px; }

.se-recapc-vide {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px dashed #cfdcf3;
    border-radius: 10px;
    background: #f9fbff;
    font-size: 13px;
    color: #56657c;
}
.se-recapc-vide > span:nth-child(2) { flex: 1; }

.se-recapc-liste { display: flex; flex-direction: column; gap: 8px; }

.se-recapc-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto minmax(0, auto) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid #e6edf8;
    border-radius: 10px;
    background: #fbfcfe;
}
.se-recapc-inom { font-size: 13.5px; font-weight: 600; min-width: 0; }
.se-recapc-iprix { font-size: 13.5px; font-weight: 700; white-space: nowrap; text-align: right; }
.se-recapc-retirer { font-size: 12.5px; font-weight: 600; color: #6b7a90; white-space: nowrap; }
.se-recapc-retirer:hover { color: #dc2626; }

.se-recapc-pied { padding: 22px clamp(16px, 1.8vw, 24px); }
.se-recapc-est { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.se-recapc-estbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 19px;
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    background: #f5f8ff;
}
.se-recapc-estval { margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #101a2b; }

.se-recapc-devis { margin-top: 14px; font-size: 13px; color: #8a6d1f; }
.se-recapc-mention { margin: 12px 0 0; font-size: 13px; color: #7b8798; line-height: 1.6; }

.se-recapc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #dfe8f7;
    border-radius: 12px;
    background: #f2f6fe;
}
.se-recapc-ctatitre { font-size: 14px; font-weight: 700; color: #101a2b; }
.se-recapc-ctatexte { margin-top: 5px; font-size: 12.5px; color: #56657c; }
.se-recapc-ctaboutons { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }

@media (max-width: 860px) { .se-recapc-triple { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
    .se-recapc-tete { flex-direction: column; }
    .se-recapc-tete > .se-recapc-bouton { width: 100%; justify-content: center; }
    .se-recapc-gh { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
    .se-recapc-gh > .se-recapc-lien { grid-column: 2; justify-self: start; }
    .se-recapc-triple { grid-template-columns: minmax(0, 1fr); }
    .se-recapc-plan { grid-template-columns: minmax(0, 1fr); }
    .se-recapc-planprix { text-align: left; }
    /* Sur mobile la ligne d'un service passe sur deux rangs : l'icône et le
       nom en haut, la pastille, le prix et « Retirer » en dessous. */
    .se-recapc-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .se-recapc-item > .se-recapc-iprix { grid-column: 2; text-align: left; }
    .se-recapc-vide { flex-wrap: wrap; }
    .se-recapc-est { grid-template-columns: minmax(0, 1fr); }
    .se-recapc-cta { flex-direction: column; align-items: stretch; }

    /* ── LES LIBELLÉS EN white-space: nowrap, ET CE QU'ILS COÛTENT ICI ──────

       Le `nowrap` de .se-recapc-bouton et de .se-recapc-lien est juste sur
       ordinateur : il empêche « Voir les autres abonnements » de se couper en
       deux au milieu d'une rangée. Sur un écran étroit il devient un plancher
       de largeur que rien ne peut plus abaisser, et le libellé sort de sa
       boîte. Comme les garde-fous de fp-responsive.css posent
       `overflow-x: hidden` sur le document, il n'en résulte pas une barre de
       défilement mais un texte ROGNÉ — un défaut qui ne se voit pas au
       redimensionnement d'une fenêtre de bureau.

       Mesuré à 320 : « Ajouter des services de visibilité » réclamait 210px
       dans une boîte de 208, la paire de boutons du bas dépassait de 24, et
       « Voir les autres abonnements » de 18.

       Ces trois-là s'enroulent donc sur deux lignes plutôt que d'être coupés,
       et les boutons prennent toute la largeur — ce qui est de toute façon la
       forme attendue d'une commande sur téléphone. */
    .se-recapc-bouton,
    .se-recapc-lien { white-space: normal; }

    .se-recapc-vide > .se-recapc-bouton,
    .se-recapc-ctaboutons > .se-recapc-bouton {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

.se-consent {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    font-weight: 400;
    color: #46556b;
    line-height: 1.55;
    cursor: pointer;
}

.se-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #1e5eff; flex-shrink: 0; }

.se-alerte {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #f3c9c9;
    border-radius: 9px;
    background: #fdf2f2;
    font-size: 12.5px;
    color: #b91c1c;
}

.se-envoi {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eef2f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.se-envoi > span { font-size: 12.5px; color: #647287; }

.se-submit { padding: 14px 26px; border-radius: 9px; border: none; background: #1e5eff; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.se-submit:hover { background: #1547cc; }
.se-submit[disabled] { background: #7f9ee6; cursor: default; }

/* L'ENVOI SUR TÉLÉPHONE : LE DÉLAI D'ABORD, LE BOUTON PLEINE LARGEUR ENSUITE.

   `justify-content: space-between` n'a plus de sens une fois la rangée
   enroulée — les deux éléments se retrouvent l'un sous l'autre, chacun poussé à
   un bord opposé, et le bouton finissait aligné à droite sous une mention
   alignée à gauche. C'est le bouton le plus important de la page : il prend
   toute la largeur, comme ceux du héros. */
@media (max-width: 560px) {
    .se-envoi { justify-content: flex-start; gap: 14px; }
    .se-submit { width: 100%; }
}

.se-aside {
    border: 1px solid #dce5f2;
    border-radius: 14px;
    background: #fff;
    padding: clamp(22px, 2.2vw, 28px);
}

/* ── L'ENCADRÉ SUIT LE DÉFILEMENT, ET SOUS TROIS CONDITIONS ────────────────

   La colonne des champs fait 1922 px de haut contre 479 pour l'encadré : « Et
   ensuite ? » disparaissait au premier tiers du formulaire, et les trois pas
   qui rassurent sur la suite n'étaient plus là au moment de cliquer sur
   « Envoyer ma demande d'étude ». Il se colle donc et reste sous les yeux
   pendant les 1443 px de saisie.

   L'offset n'est pas un nombre : DEUX barres sont déjà collantes au-dessus.
   L'en-tête public (--se-entete, mesuré au chargement par le script) puis la
   barre de sections, 55 px, qui se colle sous lui. 71 = ces 55 plus 16 px
   d'air. Un `top` en dur passerait sous l'une des deux au premier changement
   de gabarit — c'est exactement ce qui était arrivé à la barre de sections.

   Trois garde-fous, parce qu'un encadré collant qu'on ne peut pas lire en
   entier est pire que pas de collant du tout :

     · au-dessous de 981 px la grille du formulaire passe sur une colonne et
       l'encadré tombe SOUS les champs — le coller là le ferait flotter par
       dessus un contenu qu'il ne commente plus ;
     · au-dessous de 700 px de haut il n'y a plus la place de l'afficher en
       entier sous les deux barres (160 + 479 + un peu d'air) ;
     · et si son contenu grandit un jour au-delà de la place disponible,
       `max-height` lui donne son propre défilement plutôt que de couper le
       bas — la mention « Aucun paiement à cette étape » est la dernière ligne
       de la carte, celle qu'on ne peut pas se permettre de perdre.

   `.se-form-grille` porte déjà `align-items: start` : sans lui l'encadré
   serait étiré à la hauteur de la rangée et ne bougerait jamais, position
   sticky ou pas. Aucun ancêtre ne porte d'`overflow`, vérifié — un seul aurait
   suffi à neutraliser le collant sans message d'erreur. */
@media (min-width: 981px) and (min-height: 700px) {
    .se-aside {
        position: sticky;
        top: calc(var(--se-entete) + 71px);
        max-height: calc(100vh - var(--se-entete) - 95px);
        overflow-y: auto;
    }
}

.se-aside h3 { margin: 0 0 22px; font-size: 17px; font-weight: 800; letter-spacing: -0.025em; }
.se-aside-pas { display: flex; flex-direction: column; }
/* La frise de l'encadré, comme celle de #methode : le numéro et un fil vertical
   qui relie les trois pas. L'espacement vient du padding-bas du corps, plus du
   gap : autrement le fil s'interromprait entre deux pas. */
.se-aside-pas > div { display: grid; grid-template-columns: 28px 1fr; gap: 14px; }
.se-aside-pas > div > div:last-child { padding-bottom: 20px; }
.se-aside-pas > div:last-child > div:last-child { padding-bottom: 0; }
.se-aside-rail { display: flex; flex-direction: column; align-items: center; }
.se-aside-trait { flex: 1; width: 1px; background: #dce5f2; margin: 5px 0; }
.se-num--plein { border-color: #1e5eff; background: #1e5eff; color: #fff; }
.se-aside-pas b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
/* `:not(.se-num)` : cette règle vise le texte de l'étape, pas la pastille du
   rail. Sans l'exclusion elle pèse (0,1,1) contre les (0,1,0) de .se-num et
   .se-num--plein, et elle leur reprenait la couleur, la taille ET le
   display:inline-flex qui centre leur contenu. */
.se-aside-pas span:not(.se-num) { display: block; font-size: 12.5px; line-height: 1.6; color: #5b6a80; }

/* La note porte désormais une icône : la boîte devient une rangée. */
.se-aside-note {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid #d9e2f2;
    border-radius: 10px;
    background: #f5f8ff;
}

/* Le bouclier est un enfant de flex : sans `flex-shrink: 0` il se laisse
   comprimer par le texte à côté. Relevé en production : 11×19 au lieu de 19×19,
   un bouclier ovale. Le SVG a beau porter width et height, ce sont des tailles
   de base, pas un plancher. */
.se-aside-note > svg { flex-shrink: 0; }

.se-aside-note b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.se-aside-note span { display: block; font-size: 12.5px; line-height: 1.6; color: #46556b; }
.se-aside-pied { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef2f8; font-size: 12.5px; line-height: 1.6; color: #647287; }

/* ─────────────────────── L'écran de confirmation ──────────────────────── */

.se-confirme { max-width: 660px; margin: 0 auto; }

.se-coche {
    width: 62px;
    height: 62px;
    margin: 0 0 24px;
    border-radius: 999px;
    border: 2px solid #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se-confirme-liste {
    border: 1px solid #e2e8f2;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 24px;
}

.se-confirme-liste > div:first-child {
    padding: 15px 20px;
    border-bottom: 1px solid #e8edf6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #46556b;
}

.se-confirme-ligne {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid #eef2f8;
    font-size: 13.5px;
}

.se-confirme-ligne > span:first-child { color: #647287; }
.se-confirme-ligne > span:last-child { font-weight: 600; text-align: right; }
.se-confirme-pied { padding: 14px 20px; font-size: 12px; color: #677285; line-height: 1.6; }

/* La mention de repli, quand l'accusé de réception n'a pas pu partir. Ce n'est
   pas une note de bas de page mais une CONSIGNE — noter sa référence, faute de
   quoi le visiteur n'en garde aucune trace écrite : au gris #677285 du pied,
   personne ne la lit. Bande pleine largeur et sans rayon, le conteneur portant
   déjà les siens avec overflow: hidden.

   AUCUNE RÈGLE DE `display` ICI, volontairement : « .se [hidden] » doit
   continuer de masquer cet élément, puisque c'est le script qui décide laquelle
   des deux mentions s'affiche. */
.se-confirme-pied[data-se-sans-accuse] {
    border-top: 1px solid #f3ddb4;
    background: #fffaf1;
    color: #7a4a06;
    font-size: 12.5px;
}

.se-confirme-pied[data-se-sans-accuse] strong { color: #5c3702; }

.se-suite {
    border: 1px solid #d9e2f2;
    border-radius: 12px;
    background: #f5f8ff;
    padding: 20px;
    margin-bottom: 26px;
}

.se-suite b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.se-suite span { display: block; font-size: 13px; line-height: 1.6; color: #46556b; }

/* « Vous préférez être rappelé ? » : un lien discret, pas un bouton fantôme. */
.se-rappel { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef2f8; }
.se-rappel a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1e5eff;
    font-size: 13.5px;
    font-weight: 600;
}
.se-rappel svg { flex-shrink: 0; }