/* AGL Consult - feuille de style principale (migration WebDev -> ASP.NET) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-texte);
  color: var(--c-texte);
  background-color: var(--c-blanc);
  background-image: url('../img/illustrations/decor-point.png');
  background-repeat: repeat;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Les sections a fond plein (bleu, gris) masquent le point de fond du body */
.section-bleu, .section-gris, #site-header, #site-footer { background-image: none; }
a { color: var(--c-cyan); text-decoration: none; transition: color var(--transition-std); }
a:hover { color: var(--c-cyan-hover); }
/* Lien "Lire l'actu" (Accueil + Blog/Actualites) : soulignement anime au survol */
.actu-link {
  display: block; width: fit-content; position: relative; color: var(--c-rouge); font-weight: 700;
  text-transform: uppercase; font-family: var(--font-titres); letter-spacing: .03em; font-size: .85rem;
}
.actu-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px;
  background: var(--c-rouge); transition: width var(--transition-std);
}
.actu-link:hover, .actu-link:focus { color: var(--c-rouge); }
.actu-link:hover::after { width: 100%; }
/* Disposition hero 2 colonnes (texte/cartouche a gauche, illustration a droite) - Accueil + Blog/Actualites */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
/* Sans ca, un enfant de grid a par defaut min-width:auto (pas 0) : sa taille intrinseque
   (ex. l'image hero-visual, 580px de large en HTML) peut forcer la piste 1fr, et donc toute
   la grille, a deborder du viewport au lieu de se laisser reduire par max-width:100%. */
.hero-grid > * { min-width: 0; }
.hero-visual img { max-width: 100%; }
/* Dans un hero-grid, le cartouche reste cale a gauche de sa colonne (comme .hero-badge sur l'Accueil),
   pas centre comme lorsqu'il occupe seul la largeur du conteneur */
.hero-grid .callout-title-box, .hero-grid .subtitle-box { margin-left: 0; }
@media (max-width: 770px) {
  .hero-grid { grid-template-columns: 1fr; }
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, .titre-bleu, .titre-rouge {
  font-family: var(--font-titres);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--c-bleu);
  margin: 0 0 .5em;
}
/* Echelle de titres mesuree au pixel pres sur la maquette reelle (cap-height / 0.69) */
h1 { font-size: 2.75rem; line-height: 1.15; }
h2 { font-size: 3.125rem; line-height: 1.15; } /* 50px : taille relevee sur les titres de section du site en ligne */
h3 { font-size: 1.4rem; line-height: 1.25; }
h4 { font-size: 1.1rem; }
@media (max-width: 770px) {
  /* Doit rester APRES la regle h2 non conditionnelle ci-dessus : a specificite egale (simple
     type selector), le CSS depage par ordre de source, pas par presence d'un @media - une
     media query placee AVANT une regle non conditionnelle plus tardive perd face a elle meme
     quand elle s'applique (verifie en pratique : un premier essai plus haut dans ce fichier,
     avant cette regle de base, restait sans effet). */
  h2 { font-size: 2rem; } /* 50px de base deborde sur les titres longs en mobile */
}
/* Sous-titre H3 (36px) des blocs d'intro Prestations (Maintenance/Audit/Migration/Refonte) -
   distinct du H3 par defaut (1.4rem, utilise pour les petites cartes/objectifs) et du H2 titre
   de section (50px). Mesure relevee sur le site en ligne (36px, line-height 50px). */
.h3-intro-prestation { font-size: 2.25rem; line-height: 1.39; }
/* Motif recurrent du site source : titre sur 2 lignes, une ligne grasse + une ligne fine, meme couleur/taille */
h2 .titre-fin, h1 .titre-fin, .titre-fin { font-weight: 300; }
.titre-rouge, h2 .accent { color: var(--c-rouge); }
/* Poids 400 et pas de letter-spacing releves sur le site en ligne (Contact "Vous"/"Votre projet", References
   "Grands comptes, PME, TPE et associations") - la police Gravur Condensed (pas Light/Bold) est deja fine par defaut. */
.sous-titre-rouge {
  color: var(--c-rouge);
  font-family: var(--font-titres);
  font-weight: 400;
  text-transform: uppercase;
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius-bouton);
  font-family: var(--font-titres);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-std), color var(--transition-std), border-color var(--transition-std);
}
.btn-rouge { background: var(--c-rouge); color: var(--c-blanc); }
.btn-rouge:hover { background: var(--c-rouge-hover); color: var(--c-blanc); }
.btn-bleu-clair { background: var(--c-cyan); color: var(--c-blanc); }
.btn-bleu-clair:hover { background: var(--c-cyan-hover); }
.btn-outline { background: transparent; color: var(--c-bleu); border-color: var(--c-bleu); }
.btn-outline:hover { background: var(--c-bleu); color: var(--c-blanc); }

/* ---------- Header ---------- */
#site-header {
  background: var(--c-blanc);
  border-bottom: 1px solid var(--c-blanc);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background var(--transition-std), border-color var(--transition-std);
}
#site-header.scrolled {
  background: var(--c-blanc);
  border-bottom-color: var(--c-gris-clair);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 86px; }
.logo { display: flex; align-items: center; }
.logo img.logo-default { height: 80px; width: 80px; }
.logo img.logo-scrolled { display: none; height: 48px; width: auto; }
#site-header.scrolled .logo img.logo-default { display: none; }
#site-header.scrolled .logo img.logo-scrolled { display: block; }
#main-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--font-titres);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.125rem; /* 18px sur desktop (base 16px) */
  letter-spacing: .03em;
  color: var(--c-bleu);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link:hover, .nav-link.active { color: var(--c-rouge); }
/* Sur le site reel, "Contact" est simplement le lien de nav actif en rouge, pas un bouton */
.nav-cta { color: var(--c-rouge); }
.nav-cta:hover { color: var(--c-rouge-hover); }
.nav-item.has-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--c-blanc);
  box-shadow: 0 12px 24px rgba(27,80,97,.15);
  border-radius: var(--radius-bouton);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 280px;
}
.nav-item.has-dropdown:hover .dropdown { display: block; }
.dropdown li a { display: block; padding: 10px 20px; color: var(--c-bleu); font-family: var(--font-texte); font-weight: 400; text-transform: none; font-size: .92rem; }
.dropdown li a:hover { background: var(--c-gris-fond); color: var(--c-cyan-hover); }
.nav-partner img { display: block; }
.burger { display: none; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; background: var(--c-bleu); margin: 5px 0; }

/* display:none inconditionnel (pas dans la media query mobile ci-dessous) : sans ca, en
   l'absence de toute regle "display" au-dessus de 980px, le bouton (un <button> a l'affichage
   par defaut du navigateur, pas "none") redevenait visible sur desktop - verifie en pratique. */
.nav-close { display: none; }
@media (max-width: 980px) {
  .burger { display: block; }
  /* Bug corrige (menu ne s'affichait jamais sur mobile) : Slideout.js ne fait pas un simple
     toggle d'affichage, il fait glisser <main> (classe .slideout-panel ajoutee automatiquement
     par la lib, cf. site.js) pour reveler #main-nav (classe .slideout-menu ajoutee elle aussi
     automatiquement), positionne fixe EN DESSOUS - #main-nav doit donc rester visible en
     permanence (jamais display:none). Cache/revele via transform (hors-champ a gauche par
     defaut), PAS via un z-index plus bas que <main> : #main-nav est imbrique dans #site-header
     (z-index:100, cf. plus haut) et participe donc a SON contexte d'empilement, pas a celui de
     <main> (sibling de #site-header, pas un descendant) - aucun z-index pose ici ne peut jamais
     le faire passer sous <main>. Verifie en pratique : premiere version en z-index laissait le
     menu visible en permanence, superpose au contenu, meme ferme. */
  #main-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 82vw;
    margin: 0;
    padding: 76px 28px 28px;
    /* Fond fonce + semis de points, repris de .section-bleu (maquette fournie). */
    background: var(--c-bleu);
    background-image: url('../img/illustrations/decor-point-bleu.png'); background-repeat: repeat;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
    transform: translateX(-100%);
    transition: transform var(--transition-std);
  }
  html.slideout-open #main-nav {
    transform: translateX(0);
  }
  /* Empeche le contenu de fond de scroller pendant que le menu est ouvert (classe posee par
     Slideout.js sur <html> a l'ouverture). */
  html.slideout-open, html.slideout-open body {
    overflow: hidden;
  }
  /* Le burger (header, hors du panneau sombre) est remplace par .nav-close (dans le panneau,
     cf. _Layout.cshtml) une fois le menu ouvert - un seul controle de fermeture visible a la fois. */
  html.slideout-open .burger { visibility: hidden; }
  .nav-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--c-rouge);
    cursor: pointer;
  }
  html.slideout-open .nav-close { display: block; }
  #main-nav .nav-link {
    color: var(--c-blanc);
    font-size: 1.05rem;
  }
  #main-nav .nav-cta, #main-nav .nav-cta:hover { color: var(--c-cyan); }
  /* Sous-menu Prestations : deploye en permanence sur mobile (pas de survol tactile fiable,
     contrairement au hover desktop de .dropdown) plutot qu'un calque blanc superpose. */
  #main-nav .dropdown {
    display: block;
    position: static;
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 14px 0 0 18px;
  }
  #main-nav .dropdown li a {
    color: var(--c-blanc);
    font-family: var(--font-titres);
    font-weight: 400;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .02em;
    padding: 9px 0;
  }
  #main-nav .dropdown li a:hover { background: none; color: var(--c-cyan); }
}

/* ---------- Sections / bandeaux ---------- */
.section { padding: 72px 0; }
/* Toute section a fond bleu porte le semis de points fonces (decor-point-bleu.png du site
   source) - verifie sur plusieurs pages, ce n'est pas une variante mais le rendu par defaut
   (seul le pied de page, exclu via la regle de reset ligne 15, y echappe). */
.section-bleu {
  background: var(--c-bleu); color: var(--c-blanc);
  background-image: url('../img/illustrations/decor-point-bleu.png'); background-repeat: repeat;
}
.section-bleu h2, .section-bleu h3, .section-bleu .titre-bleu { color: var(--c-blanc); }
.section-gris { background: var(--c-gris-fond); }
/* Supprime la marge basse/haute d'une section en desktop uniquement (conservee en mobile,
   ou les colonnes s'empilent et ont besoin de respirer) */
@media (min-width: 771px) {
  .section.sans-marge-bas { padding-bottom: 0; }
  .section.sans-marge-haut { padding-top: 0; }
}

/* Listes a puces de contenu (non deja stylees par une classe dediee) : puce coloree carree/ronde */
.section ul:not([class]) { list-style: none; padding-left: 0; margin: 16px 0; }
.section ul:not([class]) li { position: relative; padding-left: 22px; margin-bottom: 8px; }
/* bullet-point.png (puce) est rouge en dur sur le site, meme sur fond bleu (verifie par echantillonnage pixel) */
.section ul:not([class]) li::before { content: "•"; color: var(--c-rouge); position: absolute; left: 0; font-weight: 900; }

/* Sous-liste imbriquee (ex: detail "regie non hebergee") : tiret au lieu de la puce ronde */
.sub-list { list-style: none; padding-left: 0; margin: 4px 0 4px 22px; }
.sub-list li { position: relative; padding-left: 16px; margin-bottom: 4px; }
.sub-list li::before { content: "-"; position: absolute; left: 0; color: var(--c-bleu); font-weight: 700; }

/* Bloc "Avantages / Inconvenients" avec icone ronde +/- : utilise en grille 2 colonnes (Forfait)
   ou empile verticalement (Regie). Titre cyan sur fond bleu, rouge sur fond blanc. */
.forfait-intro { max-width: 860px; margin: 0 auto 48px; text-align: center; }
.forfait-intro p { font-size: 1.1rem; margin: 0; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; max-width: 900px; margin: 0 auto; }
@media (max-width: 770px) {
  .ai-grid { grid-template-columns: 1fr; gap: 32px; } /* Inconvenients passe sous Avantages plutot que 2 colonnes etroites */
}
.ai-block { margin-top: 32px; }
.ai-heading { font-size: 1.3rem; margin-bottom: 20px; color: var(--c-rouge); }
.section-bleu .ai-heading { color: var(--c-cyan); }
.ai-row { display: flex; align-items: flex-start; gap: 24px; }
.ai-icon {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titres);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--c-bleu);
  background: transparent;
  border: 2px solid var(--c-bleu);
}
.section-bleu .ai-icon { background: var(--c-blanc); border-color: transparent; }
.ai-list { margin: 0; }
.ai-list li::before { color: var(--c-rouge) !important; }

/* Cartouche "callout" - boite simple a bordure fine, coins opposes arrondis en pointe */
.callout {
  border: 4px solid var(--c-bleu);
  border-radius: 20px 4px 20px 4px;
  padding: 0;
  background: var(--c-blanc);
  display: inline-block;
  min-width: 480px;
  max-width: 100%;
}
.callout .callout-row {
  padding: 22px 40px;
}
.callout .callout-row + .callout-row {
  border-top: 4px solid var(--c-bleu);
}
.callout h1, .callout .callout-title {
  margin: 0;
  font-size: 3.75rem; /* 60px : mesure sur le site en ligne (Contact) */
}
.callout .callout-subtitle {
  margin: 0;
  color: var(--c-rouge);
  font-family: var(--font-titres);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.875rem;
}
/* Ancien usage (numero inline) conserve pour compatibilite, non utilise par les nouveaux gabarits */
.callout .numero {
  font-family: var(--font-titres);
  font-size: 3rem;
  font-weight: 900;
  color: var(--c-cyan);
  line-height: 1;
}

/* Cartouche numerotee des pages Prestations.
   Geometrie relevee au pixel pres sur le rendu de reference (capture DPR 1.5 -> valeurs CSS = mesures / 1.5) :
   - bordures 4px, rayon exterieur 27px
   - boite numero 208x208, elle DEBORDE de 81px au-dessus de la boite titre
   - boite titre 127px de haut, calee sur le bas de la boite numero
   - boite sous-titre 67px, alignee sur le bord GAUCHE du numero, largeur ajustee au texte
   - la bordure basse de la ligne 1 sert de bordure haute au sous-titre (d'ou border-top: none) */
.callout-numbered {
  display: grid;
  grid-template-columns: 208px auto;
  grid-template-rows: 81px minmax(127px, auto) minmax(67px, auto);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 40px; /* cartouche centree horizontalement dans le conteneur */
}
.prestation-hero .callout-numbered { margin: 0 auto; }
.callout-numbered .numero-box {
  grid-column: 1;
  grid-row: 1 / 3;
  border: 4px solid var(--c-bleu);
  border-radius: 27px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titres);
  font-size: 10.0625rem; /* 161px : hauteur de capitale relevee 112px / ratio 0.695 */
  font-weight: 400;
  line-height: 1;
  color: var(--c-cyan);
}
.callout-numbered .title-box {
  grid-column: 2;
  grid-row: 2;
  border: 4px solid var(--c-bleu);
  border-left: none;
  border-radius: 0 27px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
}
.callout-numbered h1 {
  margin: 0;
  font-size: 4.5rem; /* 72px : hauteur de capitale relevee 50px / ratio 0.695 */
  line-height: 1.05;
  text-align: center;
}
.callout-numbered .subtitle-box {
  grid-column: 1 / 3;
  grid-row: 3;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  border: 4px solid var(--c-bleu);
  border-top: none;
  display: flex;
  align-items: center;
  padding: 0 38px;
}
.callout-numbered .callout-subtitle { font-size: 1.875rem; /* 30px */ }

/* Section hero des pages Prestations : cartouche centree, paragraphe d'intro cale a droite en dessous */
.prestation-hero { width: fit-content; max-width: 100%; margin: 0 auto; }
.prestation-hero-intro { width: 315px; max-width: 100%; margin: 11px 0 0 auto; font-size: .95rem; }
/* Bandeau simple (pages institutionnelles) : boite titre pleine largeur + boite sous-titre distincte en dessous */
.callout-title-box {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border: 4px solid var(--c-bleu);
  border-radius: 20px 0 0 0;
  padding: 22px 40px;
}
.callout-title-box.corner-br { border-radius: 0 0 20px 0; }
.callout-title-box.corner-tr { border-radius: 0 40px 0 0; }
.callout-title-box h1 { margin: 0; font-size: 4.375rem; } /* 70px : mesure sur le site en ligne (Competences, QuiSommesNous) - References/Recrutement l'ajustent en ligne (60px) */
/* Sous-titre (pages sans numero) : boite independante, largeur ajustee au texte */
/* Bordure 4px (pas 2px) et pas de bord haut, mesure sur le site en ligne (References) : la boite touche
   directement le bas de .callout-title-box (bordure 4px aussi), pas besoin de marge negative pour les superposer. */
.subtitle-box {
  display: inline-block;
  border: 4px solid var(--c-bleu);
  border-top: none;
  padding: 14px 32px;
  max-width: 100%;
}
.callout-subtitle {
  margin: 0;
  color: var(--c-rouge);
  font-family: var(--font-titres);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.4rem;
  white-space: nowrap;
}
/* Bandeau simple (pages institutionnelles, pas le cartouche numerote des Prestations) :
   poids 400 et taille 30px mesures sur le site en ligne (QuiSommesNous "Et vous ?"). Cible
   uniquement le sous-titre qui suit directement .callout-title-box, jamais celui de
   .callout-numbered (_PrestationBanner), deja verifie/different. */
.callout-title-box + .subtitle-box .callout-subtitle {
  font-weight: 400;
  font-size: 1.875rem;
  letter-spacing: normal;
}
@media (max-width: 900px) {
  .callout { min-width: 0; width: 100%; }
  .callout-numbered { grid-template-columns: 1fr; grid-template-rows: auto auto auto; width: 100%; }
  .callout-numbered .numero-box { grid-column: 1; grid-row: 1; border-radius: 27px 27px 0 0; min-height: 120px; font-size: 5rem; }
  .callout-numbered .title-box { grid-column: 1; grid-row: 2; border-left: 4px solid var(--c-bleu); border-top: none; border-radius: 0; padding: 18px 21px; }
  .callout-numbered h1 { font-size: 2.4rem !important; } /* !important : RefonteGraphique fixe ce h1 en ligne (60px, TitreFontSize) */
  .callout-numbered .subtitle-box { grid-column: 1; grid-row: 3; justify-self: stretch; width: 100%; padding: 14px 21px; }
  .callout-numbered .callout-subtitle { font-size: 1.1rem; white-space: normal; }
  .prestation-hero, .prestation-hero-intro { width: 100%; }
  .prestation-hero-intro { margin: 20px 0 0; }
  .subtitle-box { width: 100%; }
  .callout-subtitle { white-space: normal; }
  /* Meme debordement que .callout-numbered h1 ci-dessus, sur l'autre variante de cartouche
     (pages institutionnelles sans numero : Competences, QuiSommesNous...). References/Recrutement
     fixent ce h1 en ligne (60px) : necessite !important pour passer devant, cf. leurs styles
     propres. */
  .callout-title-box h1 { font-size: 2.4rem !important; }
  .callout-title-box { padding: 16px 20px; }
  .callout-title-box + .subtitle-box .callout-subtitle { font-size: 1.1rem !important; }
  .subtitle-box { padding: 10px 18px; }
  /* Troisieme variante de cartouche (boite simple .callout, ex. "Restons en contact" du formulaire
     de Contact) : meme debordement de titre 60px, meme traitement. */
  .callout h1, .callout .callout-title { font-size: 2.4rem; }
  .callout .callout-row { padding: 16px 20px; }
  .callout .callout-subtitle { font-size: 1.1rem; }
}

/* Bloc Objectif -> Reponse (pages clients / etudes de cas realisation).
   Releve sur le site en ligne (Stihl) : la boite (fond blanc, bordure 4px bleue, SEUL le coin
   haut-droit arrondi a 50px - classe source "cadre-realisation") enveloppe la grille, qui elle-meme
   n'a pas de bordure propre. La fleche entre Objectif/Reponse est une vraie image (fleche-rouge.png,
   alignee a droite dans une boite 190x51), pas un caractere "->" comme code avant. "Reponse" est en
   rouge (classe .titre-rouge deja existante), "Objectif" reste bleu par defaut. */
.cadre-realisation {
  background: var(--c-blanc);
  border: 4px solid var(--c-bleu);
  border-radius: 0 50px 0 0;
  padding: 40px;
}
.objectif-reponse {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
}
.objectif-reponse .fleche { align-self: center; }
.objectif-reponse .fleche {
  width: 190px; height: 51px;
  background-image: url('../img/illustrations/fleche-rouge.png');
  background-repeat: no-repeat;
  background-position: right center;
}

/* Rangees alternees illustration/texte des blocs de fonctionnalites (pages clients / etudes de cas) */
.cas-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 50px; }
.cas-feature-row > * { min-width: 0; }
.cas-feature-row img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.cas-feature-row .slick-carousel { overflow: hidden; }
@media (max-width: 770px) {
  .cas-feature-row { grid-template-columns: 1fr; }
  .cas-feature-row > *:first-child { order: 2; }
}

/* Hero photo des pages "etude de cas client" (Autodistribution/Intersport/Stihl/Salti/MarketView/Valophis) :
   boite logo+nom (fond blanc, bordure 4px bleue, coins hauts arrondis 40px, bas alignes) + boite sous-titre
   rouge accolee dessous a droite (meme bordure, sans bord haut). Releve sur Stihl : logo 207x163, nom
   216x127 (bas alignes), sous-titre aligne a droite sous l'ensemble.
   ECART VOLONTAIRE DEMANDE PAR LE CLIENT (voir AGLCONSULT_DIRECTIVES.md SS10) : la photo de fond est en
   PLEIN-BLEED sur toute la largeur disponible (pas confinee a 1160px comme mesure sur le site en ligne).
   Le style inline "background-image" se pose donc sur la <section class="cas-hero"> elle-meme, pas sur
   .container (qui reste juste le conteneur centre du contenu/cartouche). */
.cas-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cas-hero .container {
  display: flex; justify-content: center; align-items: center;
  padding-top: 40px; padding-bottom: 40px;
  min-height: 400px;
}
.cas-hero-stack { display: inline-flex; flex-direction: column; }
.cas-hero-badge { display: flex; align-items: flex-end; }
.cas-hero-logo, .cas-hero-nom {
  background: var(--c-blanc);
  border: 4px solid var(--c-bleu);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cas-hero-logo { border-radius: 40px 0 0 0; padding: 0 15px; min-height: 163px; }
.cas-hero-logo img { max-width: 100%; }
.cas-hero-nom { border-left: none; border-radius: 0 40px 0 0; padding: 0 30px; min-height: 127px; }
.cas-hero-nom h1 { margin: 0; font-size: 4.375rem; } /* 70px, mesure sur le site en ligne */
.cas-hero-sous-titre-wrap { align-self: flex-end; }
.cas-hero-sous-titre {
  display: inline-block;
  background: var(--c-blanc);
  border: 4px solid var(--c-bleu);
  border-top: none;
  padding: 20px 24px;
  margin: 0;
  font-size: 1.875rem; /* 30px, mesure sur le site en ligne (Stihl) - manquait, heritait de la taille par defaut */
}
@media (max-width: 770px) {
  .cas-hero-stack, .cas-hero-badge { align-items: center; }
  .cas-hero-badge { flex-direction: column; }
  .cas-hero-logo, .cas-hero-nom { border-radius: 0; border-left: 4px solid var(--c-bleu); }
  .cas-hero-sous-titre-wrap { align-self: center; }
}

/* Chiffres cles (pages clients, fond bleu). Releve sur Stihl : valeur en Gravur Condensed poids 400
   (pas 900), 44px ; libelle en casse normale (pas majuscules), 16px, sans letter-spacing. */
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; text-align: center; }
/* valeur et libelle sont sur 2 lignes distinctes sur le site en ligne (pas cote a cote) - mesure sur AutoDistribution */
.chiffre-cle .valeur { display: block; font-family: var(--font-titres); font-size: 2.75rem; font-weight: 400; color: var(--c-cyan); } /* 44px, mesure sur Stihl - varie par page (Salti/MarketView/Valophis sont a 50px via override scope, voir AGLCONSULT_DIRECTIVES.md) */
.chiffre-cle .libelle { display: block; font-size: 1rem; margin-top: 4px; }

/* Cartes numerotees "etude de cas" (page References + blocs "projets similaires" des pages clients).
   Releve sur le site en ligne (classes bloc-realisation/cellule-realisation/point-rouge/lien-titre-bleu du
   custom.css source) : la cellule numero+logo a un fond blanc et une bordure (blanche au repos, quasi
   invisible sur le fond a points, rouge au survol) ; le point rouge (point-rouge-timeline.png), masque par
   defaut, apparait au-dessus du coin de la cellule au survol ; le titre passe du bleu au rouge, le numero
   du cyan au bleu. */
.cas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; margin: 40px 0; }
@media screen and (max-width: 900px) { .cas-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .cas-grid { grid-template-columns: 1fr; } }
.cas-card { text-align: left; cursor: pointer; }
/* Cellule numero+logo : le numero est superpose en haut a gauche, par-dessus le coin du logo (mesure sur
   le site en ligne : numero a 15/25px du coin, logo a 65/37px, cellule 210px de haut). */
.cas-card .logo-row {
  position: relative; height: 210px; margin-bottom: 16px; background: var(--c-blanc);
  border: 4px solid var(--c-blanc); transition: border-color var(--transition-std);
}
.cas-card:hover .logo-row { border-color: var(--c-rouge); }
.cas-card .point-rouge {
  position: absolute; left: -4px; top: -39px; width: 48px; height: 20px;
  opacity: 0; transition: opacity .4s ease-out;
}
.cas-card:hover .point-rouge { opacity: 1; }
.cas-card .num {
  position: absolute; left: 25px; top: 15px;
  font-family: var(--font-titres); font-size: 3.125rem; color: var(--c-cyan); font-weight: 700; line-height: 1;
  transition: color var(--transition-std);
}
.cas-card:hover .num { color: var(--c-bleu); }
.cas-card img { position: absolute; left: 37px; top: 65px; max-width: 225px; max-height: 130px; width: auto; filter: grayscale(1); opacity: .3; transition: opacity var(--transition-std); }
.cas-card:hover img { opacity: .6; }
.cas-card h3 { font-family: var(--font-texte); font-size: 1.25rem; font-weight: 400; color: var(--c-bleu); margin-bottom: 4px; text-transform: uppercase; letter-spacing: normal; transition: color var(--transition-std); }
.cas-card:hover h3 { color: var(--c-rouge); }
.cas-card .sous { color: var(--c-bleu); font-size: 1.0625rem; font-weight: 700; text-transform: none; margin-bottom: 8px; }
.cas-card .lire-etude { color: var(--c-rouge); font-size: 1.125rem; text-transform: uppercase; text-decoration: none; opacity: 0; transition: opacity .4s ease-out; }
.cas-card:hover .lire-etude { opacity: 1; }
.cas-card .lire-etude:hover { text-decoration: underline; }

/* Galerie de logos animee (accueil + mur "References") - reprise du site_agl.css source, pilotee par AnimOnScroll.js */
.grid { max-width: 100%; list-style: none; margin: 15px auto; padding: 0; }
.grid li {
  float: left; padding: 7px; width: 180px; height: 160px;
  opacity: 0; margin: 18px 1.5%;
  background: url(../img/cadre-logo-client.png) no-repeat center;
  display: flex; align-items: center; justify-content: center;
}
.grid li.animate, .no-js .grid li { opacity: 1; }
.grid li img { max-height: 60px; width: auto; margin: 0 auto; display: block; filter: grayscale(1); opacity: .75; transition: filter var(--transition-std), opacity var(--transition-std); }
.grid li:hover img { filter: none; opacity: 1; }
/* Mur "References" (<a class="grayscale">) : opacite plus attenuee que les tuiles nues de l'Accueil,
   valeur exacte relevee sur le site en ligne (0.3, pas 0.75). */
.grid li a.grayscale img { opacity: .3; }
.grid li a.grayscale:hover img { opacity: 1; }
.grid.effect-2 li.animate {
  transform: translateY(40px);
  animation: gridMoveUp .65s ease forwards;
}
@keyframes gridMoveUp { 100% { transform: translateY(0); opacity: 1; } }
/* effect-4 : relevee telle quelle dans component_agl.css du site source (mur "References", effet 3D "chute") */
.grid.effect-4 { perspective: 1300px; }
.grid.effect-4 li.animate {
  transform-style: preserve-3d;
  transform: translateZ(400px) translateY(300px) rotateX(-90deg);
  animation: fallPerspective .8s ease-in-out forwards;
}
@keyframes fallPerspective { 100% { transform: translateZ(0) translateY(0) rotateX(0deg); opacity: 1; } }
/* Cellule "TexteIncruste" : le titre integre comme un <li> du mur (pas de cadre logo, plus large) */
.grid li.TexteIncruste { background-image: none !important; width: 580px; }
.grid li.TexteIncruste h3 { margin: 0; font-size: 3.125rem; line-height: 1.2; text-align: center; }
.grid::after { content: ""; display: table; clear: both; }
@media screen and (max-width: 900px) {
  .grid li { width: 46%; }
  .grid li.TexteIncruste { width: 96%; }
  .grid li.TexteIncruste h3 { font-size: 1.6rem; } /* 50px de base deborde tres largement en mobile */
  /* Le niveau au repos (grayscale + opacite reduite) n'est destine qu'a preceder le survol - sur
     tactile, sans hover, il reste l'etat permanent et les logos ne sont jamais lisibles. */
  .grid li img, .grid li a.grayscale img { filter: none; opacity: 1; }
}

/* Variante grille CSS avec le titre integre comme une cellule (bloc "Ils sont nombreux...") */
.grid-with-heading {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; float: none;
  max-width: 860px; margin-left: auto; margin-right: 0;
}
.grid-with-heading li { float: none; width: auto; margin: 0; }
.grid-with-heading .grid-heading {
  background: none; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;
  font-family: var(--font-titres); font-weight: 700; text-transform: uppercase;
  color: var(--c-bleu); font-size: 2.6rem; line-height: .85; gap: 0; grid-column: span 1;
  white-space: nowrap; overflow: visible; min-width: 0;
  position: relative; left: -300px;
}
@media screen and (max-width: 900px) {
  .grid-with-heading { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
  .grid-with-heading .grid-heading { font-size: 1.5rem; white-space: normal; position: static; left: 0; }
}
@media screen and (max-width: 600px) {
  .grid-with-heading { grid-template-columns: repeat(2, 1fr); }
  .grid-with-heading .grid-heading { grid-column: span 2; font-size: 1.8rem; white-space: normal; position: static; left: 0; }
}

/* Intitule de sous-bloc cyan, releve a 20px / Gravur Condensed Bold sur le site en ligne. Cyan que le fond
   soit bleu ou blanc (verifie sur la page Audit, section "Audit de base de donnees" en fond blanc). */
.sous-titre-cyan { font-size: 1.25rem; margin: 24px 0 4px; color: var(--c-cyan); text-transform: uppercase; }

/* Encart "studio graphique" : bordure en degrade anime, repris a l'identique du site en ligne */
@property --bi-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.encart-studio {
  display: flex;
  padding: 2.5rem 2rem 1rem;
  border: 3px solid transparent;
  border-image: linear-gradient(
      var(--bi-angle),
      #0d2e38,  /* bleu-petrole tres sombre */
      #1B5061,  /* bleu-petrole base */
      #2a7a8a,  /* bleu-petrole eclairci */
      #40C1C5,  /* cyan base */
      #7ddee1,  /* cyan pastel */
      #40C1C5,  /* cyan base retour */
      #F53628,  /* rouge base */
      #ff6b5b,  /* rouge eclairci */
      #F53628,  /* rouge base retour */
      #b8271c,  /* rouge assombri */
      #1B5061,  /* bleu-petrole base */
      #0d2e38   /* boucle vers le debut */
    ) 1;
  animation: encart-border 4s linear infinite;
}
@keyframes encart-border { 100% { --bi-angle: 360deg; } }
.encart-studio p {
  margin: 0;
  font-family: var(--font-titres);
  font-weight: 300;
  font-size: 2.8125rem; /* 45px */
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-bleu);
}
.encart-studio p strong { font-weight: 700; }
.encart-studio .studio-logo { width: 50%; }
.encart-studio .studio-logo a { display: block; color: #2D2D2D; }
.encart-studio .studio-logo svg { width: 320px; max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .encart-studio { animation: none; } }

/* Encart bleu "3 niveaux" (page Formation) : fond bleu + semis de points, titres de niveau en cyan */
.encart-niveaux {
  background-color: var(--c-bleu);
  background-image: url('../img/illustrations/decor-point-bleu.png');
  background-repeat: repeat;
  color: var(--c-blanc);
  padding: 42px;
}
.encart-niveaux h3, .encart-niveaux h4 { color: var(--c-blanc); }
.encart-niveaux-titre { font-size: 3.125rem; margin-bottom: .4em; } /* 50px, gras comme sur le site */
.encart-niveaux .niveau-titre { font-size: 1.625rem; color: var(--c-cyan); margin: 26px 0 4px; } /* 26px */
.encart-niveaux p:last-child { margin-bottom: 0; }
@media (max-width: 770px) {
  .encart-niveaux-titre { font-size: 2rem; } /* 50px de base deborde en mobile */
}

/* Encart bleu plein (ex : "Refonte graphique (UI)"), pose a cote d'une colonne de texte */
.ux-refonte-grid {
  display: grid;
  grid-template-columns: minmax(0, 523px) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  margin-bottom: 56px;
}
/* La colonne de gauche recoit le meme retrait haut que le padding de l'encart,
   pour que les deux titres soient sur la meme ligne. */
.ux-refonte-grid > div:first-child { padding-top: 38px; }
.encart-bleu { background: var(--c-bleu); color: var(--c-blanc); padding: 38px; }
.encart-bleu h2, .encart-bleu h3 { color: var(--c-blanc); }
.encart-bleu p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .ux-refonte-grid { grid-template-columns: 1fr; }
  .encart-studio { flex-direction: column; gap: 24px; }
  .encart-studio .studio-logo { width: 100%; }
  .encart-studio p { font-size: 2rem; }
}

/* Cards */
.card { background: var(--c-blanc); border-radius: var(--radius-bouton); box-shadow: 0 8px 24px rgba(27,80,97,.08); overflow: hidden; }
.card-body { padding: 24px; }

/* ---------- Footer ---------- */
#site-footer { background: var(--c-bleu); color: rgba(255,255,255,.9); padding: 56px 0 0; font-size: .92rem; }
.footer-logo-col { display: flex; align-items: flex-start; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.footer-heading {
  font-family: var(--font-titres); text-transform: uppercase; color: var(--c-cyan);
  font-weight: 700; font-size: 1.125rem; letter-spacing: .05em; margin-bottom: 14px;
}
.footer-text { color: var(--c-blanc); font-size: .9375rem; margin: 0 0 14px; line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.9); }
.footer-links a:hover { color: var(--c-cyan); }
.footer-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--c-cyan); color: var(--c-bleu);
}
.footer-social-icon:hover { background: var(--c-cyan-hover); color: var(--c-bleu); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding: 18px 0;
  font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.7;
}
.footer-bottom a { color: var(--c-cyan); }

.scroll-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-rouge); color: var(--c-blanc);
  border: none; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  z-index: 90;
}
.scroll-top.visible { display: flex; }

@media (max-width: 770px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .objectif-reponse { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Carte "Autres prestations" (carrousel) : boite blanche fine bordure, numero + titre uniquement */
.presta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  background: var(--c-blanc);
  border: 1px solid var(--c-gris-clair);
  border-radius: var(--radius-bouton);
  padding: 28px 24px;
  margin: 0 12px;
}
.presta-card .numero {
  display: block;
  font-family: var(--font-titres);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--c-cyan);
  line-height: 1;
  margin-bottom: 10px;
}
.presta-card h3 { margin: 0; font-size: 1.1rem; }
.presta-card:hover h3 { color: var(--c-rouge); }
/* Carte de la page en cours dans le carrousel : visible mais grisee et non cliquable */
.presta-card.is-current { background: var(--c-gris-fond); cursor: default; }
.presta-card.is-current .numero { color: var(--c-texte-muted); }
.presta-card.is-current h3 { color: var(--c-texte-muted); }
.presta-card.is-current:hover h3 { color: var(--c-texte-muted); }
@media (max-width: 480px) {
  /* 1 carte par slide (slidesToShow:1, cf. _AutresPrestations.cshtml) mais plus etroite que le
     plein largeur par defaut - demande utilisateur, la carte pleine largeur (327px) semblait trop
     imposante.
     Piege : width/max-width sur .presta-card ne fonctionne PAS ici. Slick pose un width inline en
     px dessus ET s'appuie sur du float (pas du flex) pour positionner les slides les unes a cote
     des autres - un float se recale sur la largeur REELLEMENT rendue de l'element precedent, pas
     sur le width inline que Slick a pose. Reduire width/max-width reduit donc aussi l'espacement
     entre slides (verifie : cartes recollees bord a bord, sans le "trou" du slide plein largeur
     d'origine), cassant le calcul interne de Slick (transform de translation base sur 327px/slide)
     et donnant une impression de "2 blocs" au lieu d'une carte isolee.
     transform:scale() n'affecte que le rendu visuel, jamais la boite de mise en page (le float
     suivant continue de se caler sur les 327px d'origine, invisibles) : la carte retrecit sur
     place, centree (transform-origin par defaut = centre), sans toucher au calcul de Slick. */
  .presta-card { transform: scale(.67); }
}

/* Flèches Slick : icône maison manquante -> remplacée par un rond bordé + chevron CSS */
.slick-prev, .slick-next {
  background: var(--c-blanc) !important;
  border: 2px solid var(--c-bleu) !important;
  border-radius: 50%;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  /* flex plutot que le centrage par line-height de slick : le glyphe de la fleche a des
     metriques verticales asymetriques et se retrouvait decale dans le cercle */
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%) !important;
}
.slick-prev:before, .slick-next:before {
  color: var(--c-bleu) !important;
  font-family: inherit !important;
  opacity: 1 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  display: block;
  /* l'encre du glyphe fleche est 0.09em sous le centre de sa boite de ligne : on la recale */
  transform: translateY(-0.09em);
}
/* !important necessaire ici (contrairement au reste du bloc ci-dessus qui l'a deja) : slick-theme.css,
   charge APRES site.css dans _Layout.cshtml, impose ses propres .slick-prev{left:-60px}/.slick-next{right:-60px}
   sans aucune media query - a specificite egale et sans !important, ces regles gagnent TOUJOURS par ordre
   de cascade, y compris sur la regle mobile ci-dessous. Verifie en pratique : sans !important, les fleches
   restaient a -60px sur mobile malgre cette regle, largement hors du viewport. */
.slick-prev { left: -50px !important; }
.slick-next { right: -50px !important; }
@media (max-width: 770px) {
  /* -50px suppose une marge desktop autour du carrousel ; sur mobile le conteneur touche
     quasiment les bords du viewport, les fleches debordaient donc hors ecran. */
  .slick-prev { left: 4px !important; }
  .slick-next { right: 4px !important; }
}

/* Carrousel "Ces projets pourraient aussi vous interesser" (etudes de cas, _ProjetsSimilaires.cshtml) :
   vraie icone SVG du site source (arrow-right-circle.svg, cercle+fleche bleu), pas de bordure/fond blanc.
   Pas de fleche "precedent" : le site en ligne n'a qu'une navigation a sens unique (bouton "Suivant" seul,
   inset 20px du bord droit du conteneur) - ne pas generaliser cette absence de bouton "precedent" a
   d'autres carrousels sans verification individuelle. */
.cas-grid.slick-carousel .slick-prev { display: none !important; }
.cas-grid.slick-carousel .slick-next {
  background: url('../img/illustrations/arrow-right-circle.svg') no-repeat center / 50px 50px !important;
  border: none !important;
  width: 50px !important;
  height: 50px !important;
  right: 20px !important;
}
.cas-grid.slick-carousel .slick-next:before { content: none !important; }

/* ---------- Formulaire de contact ---------- */
.form-row { display: flex; gap: 20px; }
.form-group { flex: 1; margin-bottom: 18px; }
.form-group label { display: block; font-family: var(--font-titres); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; color: var(--c-bleu); margin-bottom: 6px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-gris-clair); border-radius: var(--radius-bouton);
  font-family: var(--font-texte); font-size: .95rem;
}
.form-group textarea { min-height: 140px; resize: vertical; }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 0; } }

.radio-group { display: grid; grid-auto-flow: column; gap: 10px 32px; }
.radio-option { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.radio-option input[type="radio"] { accent-color: var(--c-rouge); width: 16px; height: 16px; }