/* ============================================================================
   FCS Groupe, feuille de style du site public.
   Remplace bootstrap.css, style.css, responsive.css et les vendors du thème.
   Aucune dépendance : pas de Bootstrap, pas de jQuery, pas de Font Awesome.

   Parti pris : monochrome sur #080808. La seule couleur vient de la photo
   et de l'accent vert FCS, repris de public/client/css/app.css.

   Le thème Colorlib et fcs.css ont été supprimés du dépôt le 2026-08-27,
   environ 3 Mo. La seule règle qu'il fallait sauver, le masquage du champ
   honeypot #contact_email, est reprise plus bas dans cette feuille.
   ========================================================================= */

/* ---------- Polices, auto-hébergées ---------- */
/* Sous-ensemble latin uniquement, suffisant pour le français : la plage
   couvre les accents et la ligature œ (U+0152-0153). Un caractère hors
   plage retombe sur la pile système plutôt que sur un glyphe manquant.
   Auto-hébergées pour ne pas avoir à ouvrir font-src dans la CSP du vhost,
   et pour supprimer la dépendance à Google Fonts.

   Depuis le 2026-08-27, Outfit porte tout le texte et Poppins ne garde que
   les h1. Outfit est une police VARIABLE : un seul fichier de 32 Ko couvre
   les graisses 300 à 800, là où Poppins demandait un fichier par graisse.
   Les quatre fichiers poppins-300/400/500/600.woff2 ne sont donc plus
   déclarés, donc plus jamais téléchargés ; ils peuvent être supprimés du
   dépôt. Ne restent que les deux graisses utilisées par les h1 : 700
   (.login-card) et 800 (.hero, .page-header). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url('/main/fonts/outfit-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/main/fonts/poppins-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/main/fonts/poppins-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Outfit pour le texte, Poppins reservee aux h1 : les deux piles sont
     nommees ici pour qu'un changement de police n'ait qu'un seul point
     d'entree. */
  --font-text:'Outfit',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-title:'Poppins',var(--font-text);

  --ink:#080808;
  --ink-72:rgba(8,8,8,.72);
  --fcs-green:#d5dd02;      /* identique à client/css/app.css */
  --star:#f5a623;           /* etoiles des avis, seule couleur chaude du site */

  --text:#080808;
  --muted:#6b6b6b;
  --muted-on-ink:#b4b4b4;
  --border:#e6e6e6;
  --surface:#fafafa;
  --bg:#ffffff;
  --danger:#a10f0f;
  --success:#136c3a;
  --shadow:0 10px 34px rgba(8,8,8,.10);

  --wrap:1180px;
  --header-h:76px;
  /* Échelle d'arrondi de la charte FCS, reprise telle quelle du portail
     intégrateur (templates/integrateur/base.html.twig). Ne pas y ajouter de
     valeur : trois crans suffisent, et une quatrième vaudrait divergence.
     Avant le 2026-08-29 le site posait un unique --radius de 18 px sur les
     douze règles ci-dessous, valeur absente de la charte et qui donnait le
     même arrondi à un bouton et à un panneau pleine largeur. */
  --radius-sm:8px;          /* commandes : boutons, liens du menu, champs */
  --radius-md:12px;         /* blocs de contenu : alertes, avis, vignette */
  --radius-lg:16px;         /* grands panneaux : activités, formulaire, grilles */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:16px;font-weight:400;line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
/* Aucun soulignement au survol (2026-08-27). Les liens qui sont soulignes en
   permanence le restent, .prose et .info-list par exemple : leur survol ne
   fait que foncer le trait. Les `text-decoration:none` poses sur les :hover
   des boutons, des cartes et du menu ne sont pas devenus inutiles pour
   autant, ils protegent un lien pose a l'interieur d'un bloc qui souligne. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,8vw,112px) 0}
.section--tint{background:var(--surface);border-block:1px solid var(--border)}

/* Lien d'évitement, obligatoire dès qu'il y a une navigation répétée */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:#fff;padding:12px 20px;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- Titres ---------- */
/* Poppins n'habille plus que le titre principal de chaque page. Tout le
   reste, titres de section compris, suit le texte en Outfit. */
h1{font-family:var(--font-title)}
.kicker{
  margin:0 0 14px;font-size:.875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
}
.title{
  margin:0 0 12px;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;
  letter-spacing:-.03em;font-weight:800;
}
.title-sub{margin:0 auto 48px;max-width:58ch;color:var(--muted);font-weight:300;font-size:1.05rem}
.section-head{text-align:center}
.color-fcs{color:var(--fcs-green)}          /* même nom que client/css/app.css */

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:15px 30px;border-radius:var(--radius-sm);
  font:inherit;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{text-decoration:none}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#2b2b2b}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#e9e9e9}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ---------- En-tête ---------- */
/* Défaut flouté : c'est aussi le repli sans JavaScript, sinon le logo blanc
   deviendrait invisible sur les sections claires. .is-top est posée par le
   script tant que la page n'a pas été défilée. */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--ink-72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background-color .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease;
}
.site-header.is-top{background:transparent;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px)}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:64px;pointer-events:none}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.brand img{height:46px;width:auto}
.site-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.site-nav a{
  color:#e4e4e4;font-weight:500;font-size:.95rem;padding:9px 15px;border-radius:var(--radius-sm);
  transition:background-color .2s ease,color .2s ease;
}
.site-nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.site-nav a.is-cta{background:#fff;color:var(--ink);font-weight:600}
.site-nav a.is-cta:hover{background:#e9e9e9}
.site-header :focus-visible{outline-color:#fff}
/* Sous 560 px, la barre ne tient pas quatre liens à côté du logo : le menu
   passait sur deux lignes et l'en-tête doublait de hauteur. Au passage cela
   faussait --header-h, figée à 76 px, dont dépendent la compensation de
   .page-header et le scroll-margin des ancres : les titres des pages
   intérieures glissaient sous l'en-tête collant.

   « Accès client » sort donc de la barre, c'est le plus long des quatre et il
   figure déjà dans le pied de page. Seuil à 560 et non 520 : à taille pleine,
   les quatre liens plus le logo demandent environ 550 px, ils se replient donc
   avant d'atteindre l'ancien seuil. */
@media (max-width:560px){
  .site-nav a{padding:8px 11px;font-size:.875rem}
  .site-nav a.is-desk{display:none}
  .brand img{height:38px}
}

/* ---------- La photo de bannière ---------- */
/* Définie une seule fois : elle sert à la bannière de l'accueil, aux en-têtes
   des pages intérieures et à la page de connexion.

   Le JPEG reste la valeur par défaut, et le @supports n'est pas une
   précaution de principe : un navigateur incapable d'analyser image-set()
   invaliderait la déclaration `background` entière, dégradé compris, et la
   section deviendrait transparente. Le test le met à l'abri.

   Sous 900 px, la variable bascule sur une image de 960 px de large. C'est là
   que se joue le vrai gain, 86 Ko au lieu de 319 : servir une photo de
   1920 px à un téléphone de 390 px de large, c'est payer quatre fois la
   surface affichée. */
:root{
  --banner:url("/main/img/banner/banner-energie-du-batiment.jpg");
  --banner-mobile:url("/main/img/banner/banner-energie-du-batiment-960.jpg");
}
@supports (background-image:image-set(url("x.webp") type("image/webp"))){
  :root{
    --banner:image-set(
      url("/main/img/banner/banner-energie-du-batiment.webp") type("image/webp"),
      url("/main/img/banner/banner-energie-du-batiment.jpg") type("image/jpeg"));
    --banner-mobile:image-set(
      url("/main/img/banner/banner-energie-du-batiment-960.webp") type("image/webp"),
      url("/main/img/banner/banner-energie-du-batiment-960.jpg") type("image/jpeg"));
  }
}
/* Apres le @supports, sinon la redefinition serait ecrasee par lui. */
@media (max-width:900px){
  :root{--banner:var(--banner-mobile)}
}

/* ---------- Décor photographique ---------- */
/* Une seule image derrière la bannière ET les activités : aucune jonction
   possible entre les deux sections. */
.photo-stage{
  background:var(--banner) 62% center/cover fixed no-repeat;
}

/* ---------- Bannière d'accueil ---------- */
/* Voile en trois temps : sombre en haut pour l'en-tête, transparent au
   milieu pour la photo, sombre en bas pour le texte. Il se ferme à 78 %,
   valeur exacte à laquelle démarre celui des activités. */
.hero{
  position:relative;color:#fff;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  background:linear-gradient(to bottom,
      rgba(8,8,8,.80) 0%,
      rgba(8,8,8,.34) 15%,
      rgba(8,8,8,.06) 36%,
      rgba(8,8,8,.55) 72%,
      rgba(8,8,8,.78) 100%);
  margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
}
.hero .wrap{padding-block:clamp(48px,7vw,88px)}
.hero-inner{
  max-width:none;
  text-shadow:0 1px 2px rgba(8,8,8,.55), 0 10px 38px rgba(8,8,8,.6);
}
.hero .btn--light{text-shadow:none}
.hero .kicker{color:rgba(255,255,255,.72)}
/* Le titre a sa propre largeur, bien plus généreuse que le paragraphe.
   Les 24ch sont relatifs à sa propre taille : le nombre de lignes ne
   change pas quand la police rétrécit. */
.hero h1{
  margin:0 0 24px;max-width:24ch;
  font-size:clamp(2.1rem,5.6vw,4.5rem);line-height:1.03;
  letter-spacing:-.04em;font-weight:800;
  text-wrap:balance;
}
.hero p{margin:0 0 34px;max-width:60ch;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:300;line-height:1.7;color:#dedede}
.hero p a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.hero p a:hover{text-decoration-color:#fff}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Activités ---------- */
.activities{color:#fff;background:linear-gradient(rgba(8,8,8,.78),rgba(8,8,8,.84))}
.activities .title{color:#fff}
.activities .title-sub{color:#d2d2d2}
.activities .section-head{text-shadow:0 1px 2px rgba(8,8,8,.6), 0 10px 34px rgba(8,8,8,.6)}
.activities :focus-visible{outline-color:var(--fcs-green)}

/* Un seul panneau de verre découpé par des filets d'un pixel. Le flou est
   porté par le panneau, pas par chaque carte, sinon les séparations
   resteraient nettes au milieu du flou. */
.grid{
  display:grid;gap:1px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-radius:var(--radius-lg);overflow:hidden;
}
@media (min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(3,1fr)} }

.card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
  padding:34px 30px 30px;color:#fff;
  background:rgba(255,255,255,.07);
  transition:background-color .3s ease;
}
.card:hover{background:rgba(255,255,255,.16);text-decoration:none}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--fcs-green);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.card:hover::before,.card:focus-visible::before{transform:scaleX(1)}
.card-icon{margin-bottom:14px}
.card-icon img{width:42px;height:42px;object-fit:contain;opacity:.9;transition:opacity .3s ease}
.card:hover .card-icon img{opacity:1}
.card h3{margin:0;font-size:1.08rem;line-height:1.35;letter-spacing:-.015em;font-weight:600;color:#fff}
.card p{margin:0;font-size:.92rem;font-weight:300;line-height:1.65;color:#cfcfcf}
.card .card-link{
  margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:8px;
  font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#a8a8a8;
  transition:color .3s ease;
}
.card:hover .card-link{color:var(--fcs-green)}
.card-arrow{display:inline-block;transition:transform .3s ease}
.card:hover .card-arrow{transform:translateX(5px)}

/* En dessous de 901 px : iOS Safari gère mal `fixed`, et une image en
   `cover` sur un conteneur très haut se réduit à une bande illisible.
   La photo reste sous la seule bannière, les activités passent en noir. */
@media (max-width:900px){
  .photo-stage{background:none}
  .hero{
    background:
      linear-gradient(to bottom,
        rgba(8,8,8,.86) 0%,
        rgba(8,8,8,.52) 30%,
        rgba(8,8,8,.72) 62%,
        rgba(8,8,8,.96) 100%),
      var(--banner) 62% center/cover no-repeat;
  }
  .activities{background:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .card,.card::before,.card-arrow,.card-icon img,.card .card-link,.site-header{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- En-tête des pages intérieures ---------- */
/* Remplace la « home_banner_area » du thème sur contact et mentions. */
.page-header{
  color:#fff;
  margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(56px,8vw,104px)) 0 clamp(48px,6vw,80px);
  background:
    linear-gradient(to bottom,rgba(8,8,8,.86) 0%,rgba(8,8,8,.72) 45%,rgba(8,8,8,.9) 100%),
    var(--banner) 62% center/cover no-repeat;
  text-shadow:0 1px 2px rgba(8,8,8,.55), 0 10px 38px rgba(8,8,8,.6);
}
.page-header h1{
  margin:0 0 14px;max-width:22ch;
  font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.06;
  letter-spacing:-.035em;font-weight:800;
}
.page-header p{margin:0;max-width:60ch;color:#dedede;font-weight:300;font-size:1.1rem}
.page-header .kicker{color:rgba(255,255,255,.72)}

/* ---------- Contact ---------- */
.contact-layout{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media (min-width:980px){ .contact-layout{grid-template-columns:1.35fr .85fr} }
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.info-list h3{margin:0 0 4px;font-size:.875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.info-list p{margin:0}
.info-list a{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)}
.info-list a:hover{text-decoration-color:var(--ink)}

/* ---------- Formulaire ---------- */
/* Les identifiants des champs (contact_name, contact_information,
   contact_message) sont générés par Symfony et attendus par
   public/main/js/form-contact.js : ne jamais les renommer. */
.fcs-form{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(22px,3vw,40px);
}
.fcs-form-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:620px){ .fcs-form-grid{grid-template-columns:1fr 1fr} }
.fcs-field{display:flex;flex-direction:column;min-width:0}
.fcs-field--full{grid-column:1 / -1}
.fcs-field label{margin-bottom:7px;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.fcs-field .req{color:var(--danger)}
.fcs-field input,
.fcs-field textarea,
.fcs-field select{
  width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font:inherit;color:var(--text);background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.fcs-field textarea{min-height:150px;resize:vertical}
.fcs-field input::placeholder,.fcs-field textarea::placeholder{color:#9a9a9a}
/* Focus : la bordure se contente de passer du gris de repos au gris de texte
   secondaire. Ni halo extérieur, qui dessinait une seconde bulle détachée du
   bord sur un rayon de 18 px, ni anneau intérieur, qui épaississait le trait
   au point de le rendre noir. Un seul trait de 1 px, nettement plus contrasté
   qu'au repos, suffit à signaler le champ actif sans alourdir la carte.

   Corollaire : l'état actif ne passe plus par box-shadow, l'aplat blanc de la
   saisie automatique ci-dessous n'a donc plus rien à concilier avec lui. */
.fcs-field input:focus,.fcs-field textarea:focus,.fcs-field select:focus{
  outline:0;border-color:var(--muted);
}

/* Champs pré-remplis par le navigateur. Le fond jaune ou bleu qu'ils
   reçoivent ne vient pas d'ici et ne se corrige pas avec background-color :
   chaque moteur l'impose à sa façon, il faut une parade par moteur. Les deux
   règles restent séparées à dessein, un sélecteur inconnu invaliderait toute
   la liste dans le navigateur qui ne le connaît pas. */

/* Chrome, Edge, Safari : la couleur de fond est verrouillée. Un inset assez
   grand pour couvrir le champ est le seul moyen de la repeindre, et la
   transition absurdement longue empêche le moteur de la réappliquer après
   coup. Le texte passe par -webkit-text-fill-color, color étant ignoré. */
.fcs-field input:-webkit-autofill,
.fcs-field input:-webkit-autofill:hover,
.fcs-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:inset 0 0 0 100px #fff;
  box-shadow:inset 0 0 0 100px #fff;
  transition:background-color 100000s ease-in-out 0s;
}
/* Firefox : le surlignage est un background-image, pas une couleur de fond. */
.fcs-field input:autofill{
  background-image:none;
  background-color:#fff;
  filter:none;
}

.fcs-form-actions{margin-top:24px}
@media (max-width:575.98px){ .fcs-form-actions .btn{width:100%} }

/* Messages d'erreur injectés par JustValidate */
.just-validate-error-label{
  display:block;margin-top:6px;font-size:.875rem;font-weight:500;color:var(--danger);
}
.just-validate-error-field{border-color:var(--danger) !important}

/* Honeypot anti-spam. Doublon volontaire de la règle de fcs.css : si un jour
   fcs.css n'est plus chargé, le champ ne doit pas réapparaître. */
.fcs-form input.email,
#contact_email{
  position:absolute !important;left:-10000px !important;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- Messages ---------- */
.alert{padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-md);border-left-width:3px;margin-bottom:28px;background:var(--surface)}
.alert--ok{border-left-color:var(--success)}
.alert--ko{border-left-color:var(--danger)}
.alert p{margin:0 0 12px}
.alert p:last-child{margin:0}

/* ---------- Pages de texte ---------- */
.legal-layout{display:grid;gap:44px;grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){ .legal-layout{grid-template-columns:230px 1fr;gap:72px} }

/* Sommaire collant. Masqué sous 1000 px : en une seule colonne il devient
   onze liens à franchir avant d'atteindre le texte. */
.legal-toc{display:none}
@media (min-width:1000px){
  .legal-toc{display:block;position:sticky;top:calc(var(--header-h) + 28px)}
}
.legal-toc-title{
  margin:0 0 14px;font-size:.875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc a{
  display:block;padding:8px 0 8px 16px;
  border-left:2px solid var(--border);
  font-size:.88rem;color:var(--muted);
  transition:color .2s ease,border-color .2s ease;
}
.legal-toc a:hover{color:var(--ink);border-left-color:var(--fcs-green);text-decoration:none}

.prose{max-width:76ch}
/* scroll-margin : sans lui, un titre atteint par une ancre se range sous
   l'en-tête collant et devient invisible. */
.prose h2{
  position:relative;
  margin:52px 0 16px;padding-top:22px;
  scroll-margin-top:calc(var(--header-h) + 24px);
  font-size:1.3rem;font-weight:700;letter-spacing:-.025em;
}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--fcs-green)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 10px;font-size:1.05rem;font-weight:600}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)}
.prose a:hover{text-decoration-color:var(--ink)}

/* Fiche d'identité : des paires libellé/valeur plutôt qu'un empilement de
   phrases. C'est un registre, il doit se parcourir en diagonale. */
.legal-identity{
  margin:0 0 12px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.legal-identity > div{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:14px 22px;border-bottom:1px solid var(--border);
}
@media (min-width:620px){
  .legal-identity > div{grid-template-columns:200px 1fr;gap:24px;align-items:baseline}
}
.legal-identity > div:last-child{border-bottom:0}
.legal-identity dt{
  font-size:.875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.legal-identity dd{margin:0}

.legal-footnote{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  color:var(--muted);font-weight:300;
}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--ink);color:var(--muted-on-ink);padding-top:clamp(56px,7vw,84px)}
/* Deux colonnes des le plus petit ecran : le bloc du logo et sa phrase
   occupent toute la largeur, les deux listes de liens se partagent la ligne
   suivante. Empilees, elles donnaient un pied de page interminable.
   La gouttiere de colonne descend a 20 px, celle de 40 px ne laissait pas
   assez de place aux libelles. */
.footer-grid{display:grid;gap:40px 20px;grid-template-columns:1fr 1fr}
.footer-grid > div:first-child{grid-column:1 / -1}
@media (min-width:820px){
  .footer-grid{gap:40px;grid-template-columns:1.7fr 1fr 1fr}
  .footer-grid > div:first-child{grid-column:auto}
}
.site-footer h4{margin:0 0 18px;font-size:.875rem;text-transform:uppercase;letter-spacing:.14em;color:#fff}
.site-footer p{margin:0 0 12px;font-size:.92rem;font-weight:300;line-height:1.7}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{color:var(--muted-on-ink);font-size:.92rem}
.site-footer a:hover{color:#fff}
.site-footer :focus-visible{outline-color:#fff}
.footer-logo{height:42px;width:auto;margin-bottom:20px}
.footer-bottom{
  margin-top:clamp(40px,5vw,64px);padding:24px 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.875rem;
}
.footer-bottom p{margin:0}

/* Le plus long libelle, « Application FCS Home », mesure 9,97 em en Outfit.
   A .92rem il demande 147 px, alors qu'une colonne vaut (largeur - 48 - 20) / 2,
   soit 146 px sur un ecran de 360. Il basculait donc sur deux lignes tout en
   bas de la grille. Un cran de police en dessous le ramene a 137 px et il
   tient jusqu'a 360 px de large. Seuil a 400 px et non 362, la valeur exacte
   de la rupture : la marge couvre le cas ou Outfit n'est pas encore chargee et
   ou la pile systeme, plus large, prend le relais. */
@media (max-width:400px){
  .site-footer ul a{font-size:.875rem}
}

/* ---------- Avis clients ---------- */
/* Piste à défilement horizontal avec accroche (scroll-snap). Remplace Owl
   Carousel : aucun JavaScript, aucune dépendance jQuery. */
.testimonials{margin-top:8px}
.testimonial-track{
  list-style:none;margin:0;padding:4px 0 18px;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,360px);
  gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
/* Glissement a la souris, pose par main/js/testimonials-drag.js. La classe
   is-drag-ready n'arrive que si la piste deborde vraiment : sans ca le
   curseur promettrait une prise sur une rangee qui ne bouge pas. */
.testimonial-track.is-drag-ready{cursor:grab}
.testimonial-track.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.testimonial-track::-webkit-scrollbar{height:6px}
.testimonial-track::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:99px}
.testimonial{
  scroll-snap-align:start;border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:12px;
  padding:26px 24px;background:#fff;border:1px solid var(--border);
}
/* Le texte est borne a 10 lignes. Sans ca, un seul avis bavard imposait sa
   hauteur a toute la piste, puisque les cartes d'une meme rangee de grille
   s'alignent : les avis courts se retrouvaient avec 600 px de vide entre leur
   derniere ligne et leur signature, collee en bas par margin-top:auto. */
.testimonial blockquote{
  margin:0;font-weight:300;line-height:1.7;font-size:.95rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;overflow:hidden;
}
.testimonial-author{margin:auto 0 0;font-size:.9rem;color:var(--muted)}
.testimonial-author strong{color:var(--text);font-weight:600}
.testimonial-project{margin:0;font-size:.875rem;color:var(--muted)}
.testimonial-stars{display:flex;gap:2px}
.testimonial-stars .star{fill:#dcdcdc}
.testimonial-stars .star.is-on{fill:var(--star)}

/* ---------- Page de connexion ---------- */
/* admin/security/login.html.twig est le seul gabarit hors main/ à étendre ce
   layout. Le décor est repris à l'identique de la bannière d'accueil : mêmes
   arrêts de dégradé que .hero au-dessus de la même photo, donc sombre sous
   l'en-tête, presque transparent au milieu, sombre en bas. Recopié plutôt que
   factorisé : la bannière d'accueil dépend d'un conteneur .photo-stage partagé
   avec la section des activités, que cette page n'a pas. */
.login{
  position:relative;color:#fff;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  margin-top:calc(var(--header-h) * -1);
  padding:calc(var(--header-h) + clamp(40px,6vw,72px)) 0 clamp(48px,6vw,80px);
  background:
    linear-gradient(to bottom,
      rgba(8,8,8,.80) 0%,
      rgba(8,8,8,.34) 15%,
      rgba(8,8,8,.06) 36%,
      rgba(8,8,8,.55) 72%,
      rgba(8,8,8,.78) 100%),
    var(--banner) 62% center/cover fixed no-repeat;
}
.login :focus-visible{outline-color:#fff}

/* Même seuil et mêmes arrêts que la bannière d'accueil : iOS Safari gère mal
   `fixed`, et le dégradé se referme davantage pour rester lisible sur une
   photo réduite à une bande. */
@media (max-width:900px){
  .login{
    background:
      linear-gradient(to bottom,
        rgba(8,8,8,.86) 0%,
        rgba(8,8,8,.52) 30%,
        rgba(8,8,8,.72) 62%,
        rgba(8,8,8,.96) 100%),
      var(--banner) 62% center/cover no-repeat;
  }
}

/* .fcs-form fournit déjà le fond blanc, la bordure, l'arrondi et l'ombre.
   Le rappel de `color` est indispensable : posée dans une section en
   color:#fff, la carte hériterait du blanc et les libellés des champs
   disparaîtraient sur le fond blanc. */
/* Alignée à gauche du `wrap`, donc sur le même axe que le logo de l'en-tête
   et que le texte de la bannière d'accueil, pas centrée dans la page. */
.login-card{width:100%;max-width:440px;color:var(--text)}
.login-card :focus-visible{outline-color:var(--ink)}
.login-card h1{
  margin:0 0 24px;font-size:clamp(1.5rem,3vw,1.9rem);
  line-height:1.15;letter-spacing:-.03em;font-weight:700;
}
.login-card .fcs-form-actions .btn{width:100%}

/* Case « se souvenir de moi » : la seule commande de la page qui ne soit pas
   un champ texte, elle sort donc de la grille .fcs-form-grid. */
.login-check{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:.92rem}
.login-check input{width:16px;height:16px;margin:0;accent-color:var(--ink);flex:none}
.login-check label{margin:0;cursor:pointer;font-weight:400}

/* ---------- Page de l'application FCS Home ---------- */
/* /application-fcs-home. Le décor est celui de .page-header, inchangé : ne
   s'ajoutent que la vignette de l'icône, les deux boutons de magasin et deux
   grilles claires. */

.app-intro{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:760px){ .app-intro{grid-template-columns:auto 1fr;gap:36px} }

/* L'icône de l'application est noire sur fond transparent : il lui faut une
   vignette blanche pour exister sur la photo. Même arrondi que les boutons
   et les cartes du site. */
.app-icon{
  width:96px;height:96px;padding:14px;
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow);
}

/* Boutons de magasin. Ce ne sont pas les visuels officiels d'Apple et de
   Google, que nous n'hébergeons pas : c'est le bouton du site, avec le logo
   du magasin et la même mise en page sur deux lignes. Poser les visuels
   officiels un jour ne toucherait que ce bloc et le gabarit. */
.store-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,32px)}
.store-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 24px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:#fff;color:var(--ink);
  text-shadow:none;
  transition:background-color .2s ease,border-color .2s ease;
}
.store-btn:hover{background:#e9e9e9;text-decoration:none}
.store-btn svg{flex:none;width:26px;height:26px;fill:currentColor}
.store-btn span{display:block;line-height:1.2}
.store-btn-label{font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.store-btn-name{font-size:1.05rem;font-weight:600;letter-spacing:-.015em}

/* Sans URL de magasin, le gabarit rend un <a> sans href : ni cliquable, ni
   focalisable. Il prend l'habillage discret de .btn--ghost pour se
   distinguer au premier coup d'œil d'un bouton actif. */
.store-btn.is-soon{
  background:transparent;border-color:rgba(255,255,255,.45);color:#fff;cursor:default;
}
.store-btn.is-soon .store-btn-label{color:rgba(255,255,255,.72)}

/* Même panneau découpé par des filets d'un pixel que .grid, en version
   claire : pas de photo derrière, donc pas de flou à porter. */
.app-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;grid-template-columns:1fr;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
}
@media (min-width:700px){ .app-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .app-grid{grid-template-columns:repeat(3,1fr)} }
.app-item{padding:30px 28px;background:var(--bg)}
.app-item h3{margin:0 0 8px;font-size:1.06rem;line-height:1.35;letter-spacing:-.015em;font-weight:600}
.app-item p{margin:0;color:var(--muted);font-weight:300;font-size:.94rem;line-height:1.65}

/* Étapes : le filet vert de 34 px des titres de .prose, repris tel quel.
   Pas de numéro dessiné, le libellé « Étape n » le dit déjà. */
.app-steps{list-style:none;margin:0;padding:0;display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:820px){ .app-steps{grid-template-columns:repeat(3,1fr);gap:44px} }
.app-steps li{position:relative;padding-top:22px}
.app-steps li::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--fcs-green)}
.app-steps .kicker{margin-bottom:8px}
.app-steps h3{margin:0 0 8px;font-size:1.1rem;line-height:1.35;letter-spacing:-.02em;font-weight:600}
/* :not(.kicker) sinon le poids 300 écraserait les 700 du sur-titre, à
   spécificité égale et plus bas dans la feuille. */
.app-steps li p:not(.kicker){margin:0;color:var(--muted);font-weight:300}

/* .prose n'a pas de marges automatiques : sans ça le bloc de fin resterait
   contre le bord gauche du wrap alors que la section est centrée. */
.app-outro{margin:clamp(40px,5vw,56px) auto 0}

/* Formulaire décollé du texte qui le précède, sur la page Contact.
   Sortie de l'attribut style= du gabarit le 2026-08-30. */
.fcs-form--espace {
    margin-top: 28px;
}