/* -------------------------------------------------------------------------- */
/*                                 COMPONENTS                                 */
/* -------------------------------------------------------------------------- */

/* BOUTONS */
/* ⚠️⚠️ `.text-center` ÉTAIT ÉCRITE DANS SEPT ENDROITS ET NE CORRESPONDAIT À AUCUNE RÈGLE.
   Conséquence visible, signalée par Alexandre : sur /accompagnement, les boutons se collaient à
   GAUCHE dans un bloc pourtant centré — `text-align` calculé valait `start`. Une classe qu'on écrit
   sans la définir ne produit aucune erreur : elle ne fait simplement rien, et ça ne se voit qu'à
   l'œil. Le contrôle qui l'a trouvée est un balayage de TOUTE la population, pas l'inspection de
   l'instance signalée : `grep` des classes des gabarits contre celles des feuilles.
   ⚠️ Elle vit ici, dans `components.css`, parce qu'elle est chargée sur TOUTES les pages — la poser
   dans `accompagnement.css` l'aurait laissée absente de /realisations, qui l'emploie aussi. */
/* ⚠️⚠️ SANS CECI, UN TITRE TROP LONG SORT DE SA BOÎTE AU LIEU DE PASSER À LA LIGNE — et il est
   COUPÉ, pas seulement décalé. Mesuré au téléphone sur /accompagnement : le h1 occupait 355 px
   de large pour 395 px de texte, et « L'accompagnement » finissait en « L'accompagnemen ».
   `overflow-wrap: break-word` ne coupe QUE les mots qui ne tiennent pas : la typographie des
   titres courts n'est pas touchée. C'est global parce que le défaut l'est — n'importe quel titre
   d'un futur client, plus long que prévu, produirait le même. */
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

/* Deux actions côte à côte, qui s'empilent proprement au téléphone.
   ⚠️ Définie ICI, dans le même commit que son premier usage : une classe écrite dans un gabarit
   sans règle correspondante ne produit aucune erreur — elle ne fait rien, et ça ne se voit qu'à
   l'œil. C'est exactement le défaut que ce commit répare par ailleurs (`.text-center`). */
/* ═══ Cartes « fonctionnalité » — accueil ET /accompagnement ═══
   ⚠️ VENUES DE `home.css`, QUI N'EST PAS CHARGÉE PARTOUT : sur /accompagnement, ces cartes
   n'avaient aucune apparence, et un `style=` en ligne dans le gabarit rafistolait la grille seule.
   ⚠️ LE `gap` ÉTAIT DE 80px, EN `!important` : c'est ce qui donnait l'impression de vide entre
   trois cartes, et aucune feuille ne pouvait le corriger. Un `!important` dans un composant
   partagé interdit toute adaptation par la page qui l'emploie. Le `margin-bottom` de « sécurité »
   sur les cartes se battait en plus avec ce gap — les deux sont retirés au profit d'un seul
   espacement, celui de la grille. */
/* ═══ Rythme des sections — TOUTES les pages ═══
   ⚠️ VENUES DE `home.css`, QUE SEULE L'ACCUEIL CHARGE, alors que cinq gabarits les emploient.
   Une page qui ne chargeait pas cette feuille se retrouvait sans aucun espacement vertical. */
/* ═══ Le HERO — toutes les pages qui en ont un ═══
   ⚠️ VENU DE `home.css`, QUE SEULE L'ACCUEIL CHARGE. Symptôme sur la page locale neuve : badge
   sans sa pastille, paragraphe étalé sur toute la largeur, boutons non cadrés. C'est la TROISIÈME
   fois que ce défaut se paie sur ce dépôt — la question à se poser devant toute classe est donc
   « combien de gabarits l'emploient ? », pas « sur quelle page je la vois ». */

/* ═══ Le titre principal — TOUTES les pages ═══
   ⚠️ CETTE RÈGLE VIVAIT DANS `home.css`. Ce n'est même pas une classe : c'est `h1`, la balise. Une
   page qui ne chargeait pas cette feuille affichait donc son titre à la taille par défaut du
   navigateur — 32 px contre 64. Mesuré sur la page locale neuve.
   ⚠️ Et la taille du titre de hero est écrite dans SIX feuilles avec QUATRE valeurs différentes
   (`#acc-hero h1`, `.contact-info h1`, `.page-hero h1`, `.tarifs-intro h1`…). Celles qui restent
   sont des choix assumés pour une page ; celle-ci est le défaut dont elles s'écartent. */
h1 {
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 20px 0 30px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 40px;
}
.hero-ctas {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
/* ⚠️⚠️ `flex-wrap` MANQUAIT, ET CA HACHAIT LES TROIS PHRASES. Mesure a 375 px : trois `span` sans
   retour a la ligne se partagent 335 px, soit **102, 90 et 93 px chacun**. Le texte ny tient pas,
   il se replie a linterieur de sa colonne, et « Demo complete en moins de 24 h » devient quatre
   fragments empiles. Cest litteralement ce quAlexandre a appele « fragmente ».
   ⚠️ Et `flex-wrap: wrap` SEUL ne suffirait pas : les trois tiendraient encore en ligne, plus
   etroits. Au telephone on les EMPILE — une promesse par ligne, lisible dun coup dœil. */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@media (max-width: 760px) {
    .hero-trust {
        flex-direction: column;
        gap: 10px;
    }
}
.badge-available {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(0, 153, 255, 0.08);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.dot-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    position: relative;
}
.text-gradient {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dot-pulse::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* ⚠️ UN HERO CENTRÉ A BESOIN QUE SON PARAGRAPHE LE SOIT AUSSI : `max-width: 600px` sans marge
   automatique laisse le bloc collé à gauche dans un conteneur pourtant centré — ça se voit
   immédiatement et ça ne ressemble à rien. */
.text-center .hero-subtitle {
    margin-inline: auto;
}

.section-padding { padding: 120px 0; }
.bg-alt { background-color: transparent; } /* laisse voir le fond constellation global */

.section-title {
    text-align: center;
    margin-bottom: 24px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.01em;
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ⚠️⚠️ LA PREMIÈRE SECTION DOIT DÉGAGER LA BARRE FIXE, ET C'ÉTAIT ÉCRIT DEUX FOIS.
   `#hero` et `#acc-hero` portaient chacun leur `padding-top: 180px`, dans deux feuilles
   différentes — une valeur magique recopiée, qui manquait donc à toute page neuve. Le symptôme
   est net et silencieux : le `h1` s'affiche SOUS l'en-tête, à 54 px d'un header qui en fait 99.
   La règle porte désormais sur la PROPRIÉTÉ — « je suis la première section » — et non sur
   l'identifiant de chaque page. */
main > section:first-of-type {
    padding-top: 180px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.feature-card {
    padding: 32px;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-6px);
}

.feature-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.features-note {
    text-align: center;
    margin-top: 40px;
    color: var(--text-secondary);
}

.cta-duo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-blue {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 0 30px rgba(0, 153, 255, 0.35), 0 0 60px rgba(0, 153, 255, 0.15);
}

.btn-blue:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(0, 153, 255, 0.5);
}

.btn-green {
    background: var(--accent-green);
    color: white;
}

.btn-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 194, 124, 0.35);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-primary);
}

/* ⚠️ RÉDUIT le 18 septembre 2026 (« le bouton est gros ») : il était à `20px 40px` en `1.2rem`,
   ce qui, sur un hero centré à deux boutons, écrasait le reste de la page. Un appel à l'action se
   remarque par sa COULEUR et sa place, pas par sa taille. */
.btn-large {
    padding: 15px 32px;
    font-size: 1.05rem;
}

/* CARDS GLASSMORPHISM */
.glass, .glass-card {
    background: rgba(15, 22, 41, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.glass:hover, .glass-card:hover {
    border-color: rgba(0, 153, 255, 0.4);
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: all 0.4s ease;
}

.navbar-scrolled {
    background: rgba(15, 22, 41, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-glass);
    padding: 12px 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo {
    display: flex;
    align-items: center;
    font-family: var(--font-titles);
    font-size: 1.5rem;
    font-weight: 800;
}

.logo-w {
    color: var(--accent-blue);
    margin-right: 2px;
}

.nav-list {
    display: flex;
    gap: 30px;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary);
}

.nav-cta-mobile { display: none; }
.mobile-nav-toggle { display: none !important; }

/* FOOTER */
.footer {
    padding: 100px 0 60px;
    background: var(--bg-sections-alt);
    border-top: 1px solid var(--border-glass);
    margin-top: 120px;
    margin-bottom: 40px; /* Ajout d'une marge sous le footer */
}

/* ⚠️ QUATRE COLONNES DEPUIS QUE LES FICHES MÉTIER SONT DANS LE PIED, et la gouttière tombe de
   80 à 48 px : à 80 px, quatre colonnes dans 1200 px laissaient 240 px de texte utile par colonne
   et « Politique de confidentialité » passait sur trois lignes. `minmax(0, …)` sur les colonnes de
   liens parce qu'un libellé long impose sinon sa largeur à toute la piste. */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    margin-bottom: 60px;
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand .logo img {
    height: 40px;
}

/* ⚠️ LE NAP DU PIED — nom, adresse, téléphone — EST UN SIGNAL DE RÉFÉRENCEMENT LOCAL, PAS UNE
   SIGNATURE. Il doit être identique, à l'octet près, à la fiche Google Business et au JSON-LD de
   `base.html.twig`. Une divergence, même d'un espace dans le numéro, coûte plus cher que l'absence
   de la donnée. */
.footer-nap {
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.9;
}

.footer-nap a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nap a:hover {
    color: var(--accent-green);
}

.footer-list {
    margin-top: 15px;
}

.footer-title {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.footer-links ul li, .footer-legal ul li {
    margin-bottom: 12px;
}

.footer-links a, .footer-legal a {
    color: var(--text-secondary);
}

.footer-links a:hover, .footer-legal a:hover {
    color: var(--accent-blue);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0; /* Padding haut et bas pour plus de respiration */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* BADGE DISPONIBLE */
.available-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(0, 153, 255, 0.08);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

/* RESPONSIVE NAVBAR */
@media (max-width: 992px) {
    .nav-list { display: none; }
    .navbar-actions { display: none; }
    .mobile-nav-toggle {
        display: block !important;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1200;
    }
    .burger span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--text-primary);
        margin: 6px 0;
        transition: 0.3s;
    }
}

/* ⚠️ UN PALIER INTERMÉDIAIRE, PARCE QUE QUATRE COLONNES NE TIENNENT PAS SUR UNE TABLETTE et que
   le palier suivant est à 768 px : entre les deux, chaque colonne tombait sous 150 px et les
   libellés se coupaient mot par mot. Deux colonnes, puis une. */
@media (max-width: 1040px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* CONSENTEMENT AUX COOKIES (bannière et page « Gérer les cookies ») */
.consentement {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 20px 24px;
    background: rgba(15, 22, 41, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.consentement__texte {
    flex: 1 1 320px;
}

.consentement__titre {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 4px;
}

.consentement a,
.consentement-page a {
    color: var(--accent-blue);
    text-decoration: underline;
}

.consentement__formulaire {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.consentement__formulaire .btn {
    padding: 10px 22px;
    font-family: inherit;
    font-size: 0.95rem;
}

.consentement-page {
    padding: 180px 0 100px;
}

.consentement-page__contenu {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    background: rgba(15, 22, 41, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.consentement-page__contenu h1 {
    margin-bottom: 24px;
    color: var(--text-primary);
}

.consentement-page__contenu p {
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .consentement-page__contenu {
        padding: 28px 20px;
    }
}

/* ═══ LE DÉPLIANT DE QUESTIONS, ET LE BLOC DE PREUVE ═══
   *(déplacés depuis `accompagnement.css` le 19 septembre 2026.)*

   ⚠️⚠️ CES DEUX COMPOSANTS SONT PARTAGÉS PAR DEUX PAGES, ET ILS VIVAIENT DANS LA FEUILLE D'UNE
   SEULE. `/creation-site-internet-orange` chargeait `accompagnement.css` — la feuille d'une AUTRE
   page — uniquement pour obtenir ces règles-là. C'est la quatrième occurrence du même défaut sur ce
   dépôt (après `.text-center`, `.cta-duo`, la carte de fonction et le hero) : un composant écrit
   dans une feuille de page, et une seconde page qui vient le chercher là où il n'aurait jamais dû
   être. La dépendance se voit à l'œil nu sur le lien de la feuille, et elle casse le jour où
   quelqu'un range la page d'origine — sans qu'aucune erreur ne se lève, puisqu'une classe sans
   règle ne fait rien.

   ⚠️ `.faq-open` EST POSÉE PAR LE JAVASCRIPT (`assets/js/animations.js`), JAMAIS PAR UN GABARIT.
   Un balayage de classes mortes qui ne lit que les gabarits la déclare orpheline et la supprime —
   le dépliant cesse alors de s'ouvrir, en silence. Le balayage doit lire le JS.
*/
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 20px;
    padding: 0; /* On gère le padding dans les enfants pour un clic plus précis */
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    background: transparent;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-question h4 {
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary);
}

.faq-toggle {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-toggle svg {
    width: 100%;
    height: 100%;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 30px;
    opacity: 0;
}

.faq-item.faq-open .faq-answer {
    max-height: 500px; /* Valeur arbitraire suffisamment grande */
    padding-bottom: 30px;
    opacity: 1;
}

.faq-item.faq-open .faq-toggle {
    transform: rotate(180deg);
}

/* ═══ La preuve : un site réellement livré ═══
   ⚠️ Classes définies ici, avec leur premier usage. Une classe écrite dans un gabarit sans règle
   correspondante ne lève aucune erreur — elle ne fait rien. Ce fichier en a déjà fait les frais
   (`.text-center`, qui n'existait nulle part et décalait les boutons de cette page). */
.preuve-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 28px;
    margin-top: 40px;
}

.preuve-image {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.3s;
}

.preuve-image:hover {
    transform: translateY(-4px);
}

.preuve-image img {
    width: 100%;
    height: auto;
    display: block;
}

.preuve-texte h3 {
    margin: 0 0 10px;
}

.preuve-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* Au téléphone, l'image passe au-dessus du texte. */
@media (max-width: 860px) {
    .preuve-bloc {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ═══ LE BLOC DE CLÔTURE D'UNE PAGE — trois faits, pas une phrase de plus ═══ (19 septembre 2026)

   ⚠️ IL VIT DANS `components.css` PARCE QU'IL EST FAIT POUR SERVIR PLUSIEURS PAGES. Écrit dans la
   feuille de la page locale, il aurait fallu le recopier pour la deuxième — c'est le défaut payé
   quatre fois ici. Il est nommé `local-final` d'après sa première page ; s'il sert ailleurs, c'est
   le NOM qu'il faudra changer, pas l'endroit. */
.local-final {
    max-width: 880px;
    margin-inline: auto;
    padding: 48px 44px;
    text-align: center;
}

.local-final h2 {
    margin: 0 0 12px;
}

.local-final__chapo {
    max-width: 52ch;
    margin: 0 auto 36px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ⚠️ TROIS COLONNES, ET C'EST UNE LISTE, PAS UNE GRILLE DE CARTES : pas de bordure, pas de fond.
   Ces trois faits sont DANS la carte, ils n'ont pas à être trois objets de plus — empiler un cadre
   dans un cadre est ce qui fait qu'une page « fait template ». */
.local-final__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    text-align: left;
}

.local-final__points li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 16px;
    border-left: 2px solid var(--border-glass);
}

.local-final__points strong {
    font-family: var(--font-titles);
    font-size: 1.05rem;
    color: var(--accent-green);
}

.local-final__points span {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.local-final__actions {
    justify-content: center;
}

@media (max-width: 760px) {
    .local-final {
        padding: 32px 22px;
    }

    .local-final__points {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ═══ CORRECTIFS TÉLÉPHONE — retours d'Alexandre du 19 septembre 2026 ═══ */

/* ⚠️⚠️ LE POINT VERT ÉTAIT ÉCRASÉ EN OVALE, ET C'EST MESURÉ : 5,3 × 8 px au lieu de 8 × 8 à 390 px
   de large. La cause n'est pas une taille mal choisie — `.dot-pulse` déclare bien 8 px — mais le
   fait qu'il est un ENFANT DE FLEX (`.badge-available` est en `inline-flex`). Quand le texte du
   badge passe à trois lignes, le conteneur manque de place et le navigateur applique le
   `flex-shrink: 1` par défaut : il rétrécit ce qu'il peut, et un carré de 8 px devient un ovale.
   ⚠️ `width` N'EMPÊCHE RIEN sur un enfant de flex — c'est `flex: none` qui le protège. Le même
   piège attend toute pastille, toute icône et tout `<svg>` posé dans une barre en `flex`. */
.dot-pulse {
    flex: none;
}

/* ⚠️ LE TEXTE D'UN BOUTON QUI PASSE À LA LIGNE DOIT ÊTRE CENTRÉ. `.btn` est en `inline-flex` avec
   `align-items: center` mais sans `justify-content` : une étiquette sur deux lignes se collait à
   gauche, ce qui donnait au bouton l'air cassé plutôt que long. */
.btn {
    justify-content: center;
    text-align: center;
}

@media (max-width: 600px) {
    /* ⚠️ MESURÉ À 390 px AVANT CORRECTION : « Création de site internet à Orange → » faisait
       **91 px de haut, sur TROIS lignes** — le « gros pâté vert » d'Alexandre. Un bouton de trois
       lignes ne se lit plus comme un bouton, il se lit comme un bloc de couleur. On réduit le
       rembourrage et la taille de texte du seul `.btn-large`, qui est celui des appels à l'action :
       le `.btn` ordinaire, plus court, n'a pas le problème. */
    .btn-large {
        padding: 13px 20px;
        font-size: 0.95rem;
    }

    /* ⚠️ LE REVEAL DU TÉLÉPHONE A ÉTÉ RETIRÉ D'ICI, ET IL NE FAUT PAS LE REMETTRE. Ce bloc
       raccourcissait la durée et la distance de l'apparition sous 600 px. Il est devenu non
       seulement inutile mais NUISIBLE le jour où `app.css` a supprimé l'apparition sous 768 px :
       chargée après, cette feuille réimposait `translateY(18px)` — que plus aucune classe `active`
       ne venait annuler, puisque l'observateur ne tourne plus. Mesuré : tout le contenu décalé de
       18 px vers le bas, en permanence.
       *Deux feuilles qui règlent la même propriété, c'est la dernière chargée qui décide — pas
       celle qui porte l'intention.* */
}

/* ⚠️ `.sr-only` — visible des lecteurs d'écran, jamais à l'écran. Elle n'existait sur AUCUNE des
   feuilles de ce site, et le tableau comparatif posait ses « ✓ » et ses « ✗ » NUS : un lecteur
   d'écran annonçait « coche » ligne après ligne sans jamais dire de quoi. Elle vit dans
   `components.css` parce que le besoin reviendra partout — un symbole seul n'est jamais lisible. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ TÉLÉPHONE : AUCUN `backdrop-filter` ═══ (19 septembre 2026)

   ⚠️⚠️ C'EST LA CAUSE DU « C'EST FRAGMENTÉ », ET J'AI MIS TROIS TOURS À LA TROUVER. Alexandre l'a
   décrit quatre fois, de quatre façons — « un temps de chargement », « ça bug avant que tout
   apparaisse », « ça coupe au milieu du site, et pareil en haut quand je remonte », « c'est
   fragmenté ». J'ai cherché de la lenteur (le reveal, le fond animé), puis un défaut de hauteur
   (`100vh`). Les trois étaient de vrais défauts, aucun n'était CELUI-LÀ.

   Ce qu'il voit n'est pas du contenu qui met du temps à arriver : ce sont des **tuiles que le
   compositeur n'a pas fini de peindre**. Mesuré : **douze éléments `.glass` sur l'accueil**, chacun
   avec `backdrop-filter: blur(16px)`, plus l'en-tête fixe qui en porte un. Un `backdrop-filter`
   force son élément sur sa propre couche ET **refloute ce qu'il y a derrière à chaque image du
   défilement**. Sur un téléphone, treize floutages par image ne passent pas : Safari rend des
   bandes vides qui se remplissent une fraction de seconde plus tard. En remontant, les mêmes
   bandes réapparaissent en haut — exactement ce qu'il décrit.

   ⚠️ LE REMÈDE N'EST PAS D'ALLÉGER LE FLOU, C'EST DE LE RETIRER. Sur un thème sombre, un fond
   opaque à 94 % est visuellement indiscernable d'un flou sur un fond presque uni — et il ne coûte
   rien à peindre. Le flou reste sur grand écran, où il se voit vraiment et où la machine suit.

   ⚠️ CETTE RÈGLE DOIT VENIR EN DERNIER DANS LA FEUILLE, et le sélecteur porte assez de poids pour
   battre `.navbar-scrolled` d'`app.css`, qui est en `!important`. Si un composant vitré est ajouté
   plus tard, **il faut l'ajouter ici aussi** — sinon il ramènera le défaut à lui seul. */
@media (max-width: 900px) {
    .glass,
    .glass-card,
    .faq-item,
    .status-badge,
    .cas-etat {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 22, 41, 0.94);
    }

    #main-header.navbar-scrolled {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 13, 26, 0.97) !important;
    }
}

/* ═══ La page 404 ═══
   ⚠️ SON RYTHME VERTICAL VIT ICI, PAS EN STYLE EN LIGNE, et ses deux liens sont de vrais `.btn` :
   écrits `btn-blue` seuls (le modificateur de couleur sans la forme), ils sortaient nus — recette
   du 20 septembre 2026. Le code d'erreur est DISCRET : la personne cherche la sortie. */

.erreur-code {
    font-size: clamp(2.8rem, 8vw, 4rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 .5rem;
    color: var(--text-secondary, #8A9CC2);
    opacity: .55;
}

.erreur-sorties {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}