/* public/css/footer.css — pied de page commun site parent + console admin.
   Voir partials/footer.php. AUCUNE couleur en dur : tout passe par les tokens de marque, donc le
   footer se re-teinte pour chaque client ET chaque école (couleurs réglées en base, injectées par
   bootstrap.php::theme_css_vars()). Light et dark traités. */

.sfooter {
    position: relative;
    overflow: hidden;                       /* clippe le motif signature */
    margin-top: 56px;
    padding: 40px 36px 0;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 24px 24px 0 0;
}

/* Motif signature : cercle accent partiellement clipé dans le coin (DESIGN-SPEC §3). */
.sfooter__motif {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--brand-accent);
    opacity: 0.9;
    pointer-events: none;
}

.sfooter__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
    padding-bottom: 32px;
}

.sfooter__brand { display: flex; flex-direction: column; gap: 12px; }

/* CORRECTIF LISIBILITÉ (constat auditor-deployer en rendu réel, 2026-08-10 : « logo illisible,
   navy sur navy »). Le logo uploadé par le client est posé sur `background: var(--brand-primary)`
   — or un logo de marque est presque toujours dessiné pour un FOND CLAIR (c'est le cas standard
   d'un fichier de charte). Chez Servair, mot-symbole navy sur aplat navy : on ne lit rien.

   Solution retenue : une PLAQUE claire derrière le logo, et non un logo éclairci ou une couleur
   forcée. C'est la seule qui tient pour N'IMPORTE QUEL client white-label — on ne peut pas savoir
   à l'avance si `--brand-primary` sera sombre (Servair) ou clair, ni de quelle couleur sera le
   logo fourni. Une plaque claire garantit au logo le fond pour lequel il a été dessiné, quelle
   que soit la marque. `--surface` plutôt que `#fff` : le token suit déjà light/dark.

   NB : ce n'est PAS un problème d'empilement. Le diagnostic d'audit parlait aussi d'un « motif
   qui passe par-dessus le contenu » — vérifié faux : `.sfooter__motif` est un frère en
   `position:absolute` sans z-index, `.sfooter__inner` porte `position:relative; z-index:1`, donc
   le contenu est DÉJÀ au-dessus. Ce que l'audit a vu, c'est ce même logo invisible qui
   redevenait très légèrement perceptible là où le blob cramoisi passe DERRIÈRE lui. Un seul
   défaut, pas deux — ne pas « corriger » un z-index déjà juste. */
.sfooter__logo-plate {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--surface);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(15, 19, 32, 0.12);
}
.sfooter__logo { max-height: 56px; width: auto; display: block; }
.sfooter__tagline {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.75;
    max-width: 34ch;
    margin: 0;
}

.sfooter__h {
    font: 600 11px/1 var(--ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.65;
    margin: 0 0 12px;
}

.sfooter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sfooter__list a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.92;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: opacity .15s, border-color .15s;
}
/* SOULIGNÉ DE SURVOL — arbitrage V32-D5, lire avant de changer de token.
   Ce site est le SEUL du dépôt où le fond n'est ni clair ni sombre mais LA MARQUE ELLE-MÊME
   (`background: var(--brand-primary)`, l.11 ; en sombre, la règle `.theme-dark .sfooter` en fin
   de fichier le garde dérivé de la marque).
   Il n'appartient donc PAS à la famille des topbars admin, dont le fond est figé sombre.
   --red-ink y était mesuré à 1,25:1 en clair et 3,13:1 en sombre — défaut PRÉEXISTANT (une
   encre pour fonds clairs posée sur un aplat de marque), que le durcissement V32-D aggrave.

   Pourquoi --red-ink-on-dark malgré tout, et pourquoi ce n'est pas la même erreur : ce fichier
   a DÉJÀ tranché que --brand-primary porte du blanc — `color:#fff` l.12 et l.85, l'anneau de
   focus `#fff` de `.sfooter__list a:focus-visible` et le filet `rgba(255,255,255,.18)` de
   `.sfooter__bar`, tous deux plus bas. Le token n'introduit donc AUCUNE
   hypothèse nouvelle : il échoue exactement là où le footer entier échoue déjà (client à
   marque primaire claire), et nulle part ailleurs.
   Pourquoi pas `#fff` : un souligné blanc serait lisible, mais il ferait disparaître l'accent,
   c'est-à-dire l'écho du motif signature (le cercle accent, l.24). Ici l'accent est visible
   ET lisible — on ne troque pas l'identité contre une lisibilité qu'on a déjà.
   ⚠️ IL N'Y A PAS DE REPLI D'ACCESSIBILITÉ ICI — une version antérieure de ce commentaire
   affirmait le contraire (« `:focus-visible` porte aussi un `outline: 2px solid #fff`, donc le
   focus reste signalé quoi qu'il arrive »). C'est FAUX, et mesuré : `#fff` sur le fond de
   marque donne **1,40:1 en clair et 1,32:1 en sombre**. L'anneau blanc a donc EXACTEMENT le
   même angle mort white-label que le souligné qu'il était censé rattraper : les deux canaux
   échouent sur le MÊME sous-espace de marques — ils ne sont pas indépendants. Le blanc ne
   « tient » que parce que la marque Servair est sombre.
   ⇒ HIÉRARCHIE À L'ENDROIT : `:focus-visible` relève de **WCAG 2.4.7, niveau A**, donc il est
   PRIORITAIRE sur `:hover` (confort). L'ancien commentaire rassurait sur le focus et inquiétait
   sur le survol — l'inverse exact de ce qu'il fallait lire.

   ⚠️ LOT SÉPARÉ, EN ATTENTE D'ARBITRAGE PROPRIÉTAIRE (V33-D, hors V32-D) : le contrat
   implicite « --brand-primary est assez sombre pour porter du blanc » n'est vérifié NULLE
   PART. Un client à marque primaire claire rend tout ce footer illisible, pas seulement ce
   souligné. MESURÉ, balayage croisé des DEUX couleurs client (99 225 couples par état,
   seuil 3:1) : pire cas **1,00:1** dans les quatre états (clair/sombre × repli/moderne), et
   53 % à 81 % des couples sous 3:1 selon l'état. Le 1,00:1 survient dès que les deux
   couleurs de marque ont la MÊME luminance — cas banal dans une charte.
   ⇒ AUCUN réglage d'encre ne peut réparer ce site : le problème est le FOND, pas l'encre.
   Ne pas tenter de le corriger en changeant de token — c'est l'impasse qu'on a déjà écartée.
   Trois issues possibles, aucune n'étant une correction d'encre :
     1. PLAQUE DE FOND NEUTRE derrière les liens — exactement le remède déjà retenu pour le
        logo dans ce même fichier (voir le bloc « CORRECTIF LISIBILITÉ » plus haut), donc
        cohérent avec la solution que ce fichier a déjà validée ;
     2. canal NON CHROMATIQUE (soulignement plein, graisse) — ne dépend d'aucune couleur ;
     3. acceptation explicite du propriétaire sur un périmètre de marques restreint.
   Tant que l'arbitrage n'est pas rendu : ne rien coder ici. */
.sfooter__list a:hover,
.sfooter__list a:focus-visible { opacity: 1; border-bottom-color: var(--red-ink-on-dark); }
.sfooter__list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

.sfooter__bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    opacity: 0.8;
}
/* CORRECTIF TRONCATURE (constat auditor-deployer en rendu réel, 390px ET ~780px : « Une idée
   d'application ? ... vous rép[ondez au...] » coupé net en plein mot). Cause : `.sfooter__pitch`
   forçait `white-space:nowrap` sur une PHRASE ENTIÈRE (pas un libellé court) ; ce nowrap gonflait
   le min-content de `.sfooter__maker` (piège classique flexbox : un enfant flex garde
   `min-width:auto`, donc n'accepte jamais d'être plus étroit que son contenu non cassable) au-delà
   de la largeur dispo, et `.sfooter { overflow:hidden }` — posé pour clipper le motif, pas le
   texte — coupait silencieusement le débordement au lieu de le montrer. Fix : la phrase peut
   redevenir multi-lignes (elle est de toute façon trop longue pour tenir sur une ligne en dessous
   d'un certain point mort, y compris ≥560px selon la longueur du libellé maker/téléphone par
   client) et `.sfooter__maker` peut rétrécir sous son min-content par défaut. */
.sfooter__maker {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;         /* neutralise le piège flexbox min-width:auto */
    max-width: 100%;
}
.sfooter__maker a { color: #fff; font-weight: 700; }
.sfooter__dev strong { font-weight: 700; }
/* Accroche « Besoin d'une application ? Contactez-nous » : pill discrète mais cliquable — devient
   une capsule multi-lignes plutôt qu'un ruban nowrap dès que la phrase ne tient plus. */
.sfooter__pitch {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: normal;
    line-height: 1.4;
    max-width: 100%;
}
.sfooter__pitch:hover, .sfooter__pitch:focus-visible { filter: brightness(1.08); }
.sfooter__pitch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sfooter__version {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

/* Variante console admin : plus compacte, sans bloc marque. */
.sfooter--compact { margin-top: 32px; padding: 28px 24px 0; border-radius: 18px 18px 0 0; }
.sfooter--compact .sfooter__inner { grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 22px; }
.sfooter--compact .sfooter__motif { width: 180px; height: 180px; top: -70px; right: -55px; }

/* En mode sombre, la marque peut être très foncée : on garde le contraste du texte blanc en
   éclaircissant légèrement le fond plutôt qu'en changeant de couleur (le token reste la source). */
.theme-dark .sfooter { background: color-mix(in oklch, var(--brand-primary) 82%, white 18%); }
.theme-dark .sfooter__motif { opacity: 0.8; }

@media (max-width: 900px) {
    .sfooter__inner { grid-template-columns: 1fr 1fr; }
    .sfooter--compact .sfooter__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sfooter { padding: 32px 20px 0; margin-top: 40px; }
    .sfooter__inner { grid-template-columns: 1fr; gap: 24px; }
    .sfooter--compact .sfooter__inner { grid-template-columns: 1fr; }
    .sfooter__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* `width:100%` (pas seulement `margin-left:0`) : sans ça, un flex item en colonne avec
       `align-items:flex-start` reste large de son seul contenu (shrink-to-fit) — la capsule
       `.sfooter__pitch` se retrouve alors sur une colonne aussi étroite que son texte, donc
       wrappe bien plus tôt que nécessaire au lieu d'utiliser toute la largeur du footer. */
    .sfooter__maker { margin-left: 0; width: 100%; }
    .sfooter__pitch { width: 100%; box-sizing: border-box; }
    /* Cibles tactiles confortables sur les liens de contact (PWA). */
    .sfooter__list a { display: inline-block; padding: 6px 0; }
}