/*
 * Refonte Aerogestion — couche d'override par-dessus theme.css.
 * Fichier isole (non compile via Gulp/LESS) : voir CLAUDE.md pour le contexte.
 * La page d'accueil (maquette v8) est en fin de fichier.
 */

:root {
  --ag-navy: #073B51;
  --ag-navy-dark: #052A3B;
  --ag-navy-tint: #1F497D;
  --ag-red: #E5192C;
  --ag-red-dark: #B8101F;
  --ag-grey-bg: #F2F2F2;
  --ag-grey-border: #DDDDDD;
  --ag-text: #191B1D;
  --ag-text-muted: #5A6672;
}

/* ==========================================================================
   Contour de focus : au clavier oui, a la souris non

   bundle.css (Bootstrap) pose « a:focus { outline: 5px auto ...; outline-offset:
   -2px } » sans distinguer d'ou vient le focus. Consequence : tout bouton ou
   lien clique a la souris gardait un lisere autour de lui jusqu'au clic
   suivant, dans l'en-tete, le pied de page comme dans le corps des pages.

   Le contour n'est pas supprime, il est reserve au clavier : :focus-visible ne
   se declenche qu'a la tabulation, jamais au clic. Un visiteur a la souris ne
   voit donc plus rien ; un visiteur qui navigue au clavier continue de voir ou
   il se trouve, sans quoi le site deviendrait impraticable sans souris.
   ========================================================================== */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* Au clavier, le lisere systeme se lit mal sur les aplats rouges et bleus du
   site : on reprend le rouge de la charte, pose a l'exterieur de l'element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ag-red);
  outline-offset: 2px;
}

/* ==========================================================================
   EN-TETE ET PIED DE PAGE — port de la maquette v8 (29/08/2026)

   L'en-tete et le pied de page du theme Comet (#topnav, #footer-widgets,
   #footer) ne sont plus rendus : header.php et footer.php sortent desormais
   #ag-header et #ag-footer. Les identifiants sont volontairement differents
   des anciens, pour que les ~115 regles que theme.css consacre a #topnav ne
   s'appliquent plus du tout : on ecrit une mise en forme, on n'en corrige pas
   une autre.
   ========================================================================== */

/* --- Ossature commune : meme conteneur que les sections de contenu.
       .container vient de Bootstrap, qui lui fixe une largeur par palier :
       il faut width:100% pour que max-width reprenne la main. Seules les
       marges laterales sont posees ici : la barre d'en-tete porte aussi cette
       classe et gere sa hauteur elle-meme, un raccourci "padding" ecraserait
       sa respiration verticale. --- */
#ag-header .container,
#ag-footer .container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Le theme reservait 60 px en haut de page pour son en-tete, qui etait fixe
   par-dessus le contenu (main.js pose .top-padding sur le body). Le notre est
   dans le flux : cette reserve laisserait une bande blanche sous le bandeau. */
body.top-padding { padding-top: 0; }

/* Le theme fixe html et body a height:100%. Une barre position:sticky ne peut
   pas depasser la boite de son parent : le bandeau serait donc reste colle sur
   la hauteur d'un ecran, puis serait parti avec le contenu. On rend leur
   hauteur au contenu, en gardant le plancher d'un ecran complet.
   #loader, seul element qui exploitait cette hauteur, est en position:fixed et
   ne depend pas de celle du body. */
html, body { height: auto; min-height: 100%; }


/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */

#ag-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--ag-grey-border);
  transition: box-shadow 0.25s ease;
}
#ag-header.ag-scrolled { box-shadow: 0 2px 18px rgba(7, 59, 81, 0.08); }

/* La barre d'administration de WordPress est fixee en haut de l'ecran : sans
   ce decalage, l'en-tete collant passerait dessous pour les utilisateurs
   connectes. Les deux hauteurs (32 px / 46 px) sont celles de WordPress. */
body.admin-bar #ag-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #ag-header { top: 46px; }
}

.ag-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Hauteurs en proprietes separees : le raccourci remettrait a zero les
     marges laterales posees juste au-dessus sur .container. */
  padding-top: 18px;
  padding-bottom: 18px;
  transition: padding 0.25s ease;
}
#ag-header.ag-scrolled .ag-header-inner { padding-top: 10px; padding-bottom: 10px; }
/* Bootstrap pose deux pseudo-elements de nettoyage de flottants sur
   .container. Dans un conteneur flex ils comptent comme deux enfants de plus
   et faussent la repartition : le logo et le bouton menu ne seraient plus
   colles aux bords. */
.ag-header-inner::before,
.ag-header-inner::after { content: none; }

/* --- Logo et nom du cabinet --- */
.ag-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ag-logo:hover, .ag-logo:focus { text-decoration: none; }
.ag-logo img { display: block; height: 38px; width: auto; transition: height 0.25s ease; }
#ag-header.ag-scrolled .ag-logo img { height: 28px; }

/* Nom du cabinet a cote du logo (demande en reunion du 10/08), separe par un
   filet pour rester lisible sans surcharger le bandeau. */
.ag-logo-wordmark {
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ag-navy);
  line-height: 1;
  padding-left: 12px;
  border-left: 1px solid var(--ag-grey-border);
  transition: font-size 0.25s ease;
}
#ag-header.ag-scrolled .ag-logo-wordmark { font-size: 14px; }
/* Tant qu'aucun logo n'est charge dans les options du theme, le nom est seul :
   le filet de separation n'aurait rien a separer. */
.ag-logo-wordmark:first-child { padding-left: 0; border-left: 0; }
/* Sur tres petit ecran le logo se suffit a lui-meme. */
@media (max-width: 520px) { .ag-logo-wordmark { display: none; } }

/* --- Navigation --- */
.ag-nav { display: flex; align-items: center; gap: 2px; }

ul.ag-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.ag-menu > li { position: relative; }
ul.ag-menu > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ag-navy);
  border-radius: 6px;
  text-decoration: none;
}
ul.ag-menu > li > a:hover,
ul.ag-menu > li > a:focus,
ul.ag-menu > li.current-menu-item > a,
ul.ag-menu > li.current-menu-parent > a,
ul.ag-menu > li.current-menu-ancestor > a {
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  text-decoration: none;
}

/* Chevron des entrees a sous-menu (le petit triangle de la maquette, trace en
   CSS pour rester net a toutes les tailles et suivre la couleur du texte). */
ul.ag-menu > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 2px 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Panneau deroulant. Il s'ouvre au survol et au clavier (:focus-within) :
   une entree de sous-menu atteinte a la tabulation doit rester visible. */
ul.ag-menu ul.sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(7, 59, 81, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
ul.ag-menu > li:hover > ul.sub-menu,
ul.ag-menu > li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
ul.ag-menu ul.sub-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ag-navy);
  border-radius: 6px;
  text-decoration: none;
}
ul.ag-menu ul.sub-menu a:hover,
ul.ag-menu ul.sub-menu a:focus { background: var(--ag-grey-bg); text-decoration: none; }

/* Bouton "Nous contacter" : l'entree de menu porte la classe CSS ag-cta,
   saisie dans Apparence > Menus (champ "Classes CSS supplementaires").
   Le script la pose aussi d'office sur l'entree qui pointe vers /contact/,
   pour que le bouton existe meme si personne n'a rempli ce champ. */
ul.ag-menu > li.ag-cta { margin-left: 6px; }
ul.ag-menu > li.ag-cta > a,
ul.ag-menu > li.ag-cta.current-menu-item > a {
  background: var(--ag-red);
  color: #fff;
  border-radius: 100px;
  padding: 11px 20px;
  font-weight: 700;
}
ul.ag-menu > li.ag-cta > a:hover,
ul.ag-menu > li.ag-cta > a:focus { background: var(--ag-red-dark); color: #fff; }

/* Message d'amorcage, visible des seuls administrateurs tant qu'aucun menu
   n'est rattache a l'emplacement "Header Navigation". */
.ag-menu-empty {
  font-size: 13px;
  font-weight: 700;
  color: var(--ag-red);
  border: 1px dashed var(--ag-red);
  border-radius: 6px;
  padding: 8px 14px;
}

/* --- Selecteur de langue (WPML) --- */
.ag-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--ag-grey-border);
}
.ag-lang a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ag-text-muted);
  padding: 5px 7px;
  border-radius: 5px;
  text-decoration: none;
}
.ag-lang a:hover, .ag-lang a:focus { color: var(--ag-navy); text-decoration: none; }
.ag-lang a.is-active { color: var(--ag-navy); background: var(--ag-grey-bg); }

/* --- Bouton menu (mobile) --- */
.ag-burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.ag-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: var(--ag-navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ag-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ag-burger.is-open span:nth-child(2) { opacity: 0; }
.ag-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .ag-burger { display: block; }

  /* Le menu devient un panneau sous le bandeau. Il se positionne par rapport
     a #ag-header, seul ancetre positionne (position:sticky). */
  .ag-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 18px;
    background: #fff;
    border-bottom: 1px solid var(--ag-grey-border);
    box-shadow: 0 12px 24px rgba(7, 59, 81, 0.10);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  .ag-nav.is-open { display: flex; }

  ul.ag-menu { flex-direction: column; align-items: stretch; width: 100%; }
  ul.ag-menu > li.ag-cta { margin: 8px 0 0; }
  ul.ag-menu > li.ag-cta > a { text-align: center; }

  /* Les sous-menus se deplient sous leur parent : au doigt il n'y a pas de
     survol, un panneau flottant serait inatteignable. */
  ul.ag-menu ul.sub-menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 4px 14px;
    border: 0;
    box-shadow: none;
    background: none;
  }
  ul.ag-menu > li.menu-item-has-children > a::after { display: none; }

  .ag-lang {
    margin: 8px 0 0;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--ag-grey-border);
  }
}

/* --- Bulle de contact flottante, mobile uniquement (en desktop le bouton est
       dans la barre de navigation). Elle apparait passe le premier ecran. --- */
.ag-fab-contact {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ag-red);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(229, 25, 44, 0.4);
  font-size: 22px;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ag-fab-contact:hover, .ag-fab-contact:focus { color: #fff; text-decoration: none; }
@media (max-width: 900px) {
  .ag-fab-contact { display: flex; }
  .ag-fab-contact.is-visible { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-fab-contact { transition: none; }
}


/* --------------------------------------------------------------------------
   Pied de page

   Les trois colonnes de liens et le texte de presentation sont des zones de
   widgets deja declarees par le theme (Apparence > Widgets) : on y pose un
   widget "Menu de navigation" ou "Texte", et son titre fait le chapeau de
   colonne. La ligne de liens legaux du bas, elle, n'a pas de chapeau : c'est
   un emplacement de menu a part (ag_footer_legal).
   -------------------------------------------------------------------------- */

#ag-footer {
  background: #03202D;
  color: rgba(255, 255, 255, 0.5);
  padding: 44px 0 22px;
  font-size: 13.5px;
}

.ag-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 26px;
}
@media (max-width: 800px) { .ag-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ag-footer-grid { grid-template-columns: 1fr; } }

.ag-footer-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ag-footer-logo { display: block; height: 30px; width: auto; }
.ag-footer-wordmark {
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.ag-footer-wordmark:first-child { padding-left: 0; border-left: 0; }
.ag-footer-brand p { max-width: 280px; }

#ag-footer p { color: rgba(255, 255, 255, 0.55); margin: 0 0 1em; }
#ag-footer p:last-child { margin-bottom: 0; }
#ag-footer a { color: rgba(255, 255, 255, 0.48); text-decoration: none; }
#ag-footer a:hover, #ag-footer a:focus { color: rgba(255, 255, 255, 0.9); text-decoration: none; }

#ag-footer .widget { margin: 0 0 22px; }
#ag-footer .widget:last-child { margin-bottom: 0; }
/* Le titre du widget fait le chapeau de colonne. Les widgets de WordPress et
   des extensions n'emploient pas tous la meme balise : on les couvre toutes. */
#ag-footer .widget-title,
#ag-footer .widget h1,
#ag-footer .widget h2,
#ag-footer .widget h3,
#ag-footer .widget h4,
#ag-footer .widget h5,
#ag-footer .widget h6 {
  font-family: 'Raleway', sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 12px;
}
#ag-footer .widget-title:after,
#ag-footer .widget h6:after { content: none; }
#ag-footer .widget ul { list-style: none; margin: 0; padding: 0; }
#ag-footer .widget li { margin: 0; border: 0; }
/* Le theme met les liens de widget en capitales espacees : dans un pied de
   page de navigation, la maquette les veut en casse normale. */
#ag-footer .widget li a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
}

/* Message d'amorcage, visible des seuls administrateurs. */
.ag-footer-hint {
  grid-column: 1 / -1;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.75);
}

.ag-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}
.ag-footer-bottom p { margin: 0; color: rgba(255, 255, 255, 0.38); }

.ag-footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-footer-legal a { display: inline-block; }

.ag-footer-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-footer-social a { font-size: 15px; }



/* ==========================================================================
   Composants partages entre les pages interieures (challenges, R'Optim,
   references, missions, a propos, publications, contact)
   ========================================================================== */

/* --- En-tete de page avec image de fond --- */
.ag-page-hero {
  position: relative;
  /* Fond sous le voile : sans photo (pages legales, Recrutement), le voile
     semi-transparent laissait voir le blanc et le bandeau paraissait delave. */
  background-color: var(--ag-navy);
  background-size: cover;
  background-position: center;
  /* L'en-tete n'est plus fixe par-dessus le contenu : ce bloc n'a plus a
     reserver la place de la barre de navigation, il reprend les valeurs de
     la maquette. */
  padding: 64px 0 56px;
  color: #fff;
}
.ag-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Au-dessus de la photo (z-index 1) mais sous le texte (z-index 2). */
  z-index: 1;
  background: linear-gradient(120deg, rgba(7,59,81,.92) 0%, rgba(7,59,81,.72) 60%, rgba(7,59,81,.55) 100%);
}

/* Photo du bandeau en balise <img> plutot qu'en image de fond CSS : une image
   de fond ignore srcset, un telephone chargerait donc le fichier prevu pour un
   grand ecran. Les gabarits qui posent encore un background-image continuent de
   fonctionner : ils n'ont simplement pas d'.ag-hero-img a placer. */
/* La photo est enveloppee d'un <picture> (recadrage telephone / ordinateur,
   framework/inc/images.php). L'enveloppe prend toute la surface du bandeau,
   pour que la photo, dimensionnee en 100 %, la remplisse toujours. */
.ag-picture { position: absolute; inset: 0; display: block; }
.ag-page-hero .ag-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ag-page-hero .container { position: relative; z-index: 2; }
.ag-page-hero .ag-eyebrow {
  display: inline-block;
  color: #FF6B78;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.ag-page-hero h1 { color: #fff; font-family: 'Montserrat', sans-serif; margin-bottom: 14px; }
.ag-page-hero p { color: #E7EEF2; max-width: 640px; font-size: 16px; }
.ag-page-hero .ag-photo-credit {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
@media (max-width: 768px) {
  .ag-page-hero { padding: 48px 0 40px; }
}

/* --- Grilles de cartes generiques (challenges, missions, publications, equipe) --- */
.ag-grid { display: grid; gap: 24px; margin: 30px 0; }
.ag-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ag-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ag-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .ag-grid-2, .ag-grid-3, .ag-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ag-grid-2, .ag-grid-3, .ag-grid-4 { grid-template-columns: 1fr; }
}

.ag-tile {
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.ag-tile img { width: 100%; height: 170px; object-fit: cover; display: block; }
.ag-tile-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ag-tile h4, .ag-tile h3 { color: var(--ag-navy); margin: 0 0 8px; }
.ag-tile p { color: var(--ag-text-muted); font-size: 14px; margin: 0 0 12px; }
.ag-tile-meta { font-size: 12px; color: var(--ag-text-muted); margin-top: auto; }
.ag-tile-tag {
  display: inline-block;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  margin-bottom: 10px;
}

/* --- Icones numerotees (methode, benefices) --- */
.ag-step-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ag-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-bottom: 14px;
}

/* --- Chiffres cles (stat tiles) --- */
.ag-stat-tile { text-align: center; padding: 20px; }
.ag-stat-num { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 700; color: var(--ag-navy); }
.ag-stat-num.ag-tbd { color: var(--ag-grey-border); }
.ag-stat-label { color: var(--ag-text-muted); font-size: 13px; margin-top: 4px; }

/* --- Etiquette "a confirmer / a valider" --- */
.ag-tag-draft {
  display: inline-block;
  background: #FFF3CD;
  color: #7A5B00;
  border: 1px solid #FFE39B;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Filtres (missions, publications) --- */
.ag-filters { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 10px; }
.ag-filter-group { display: flex; flex-direction: column; gap: 8px; }
.ag-filter-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ag-text-muted); font-weight: 700; }
.ag-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-pill {
  border: 1px solid var(--ag-grey-border);
  background: #fff;
  color: var(--ag-text);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
}
.ag-pill.ag-active { background: var(--ag-navy); border-color: var(--ag-navy); color: #fff; }
.ag-filterable[hidden] { display: none; }

/* --- Gabarit challenge : sommaire lateral --- */
.ag-challenge-layout { display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: start; }
.ag-challenge-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; }
/* :not(.ag-btn) : cette regle visait les liens de navigation de la colonne ;
   sans l'exclusion elle emportait aussi le bouton "Contacter l'equipe", dont le
   texte se retrouvait en gris sur le fond rouge. */
.ag-challenge-side a:not(.ag-btn) { color: var(--ag-text-muted); font-size: 14px; text-decoration: none; }
.ag-challenge-side a:not(.ag-btn):hover { color: var(--ag-red); }
.ag-challenge-block { padding: 34px 0; border-bottom: 1px solid var(--ag-grey-border); }
.ag-challenge-block:last-child { border-bottom: none; }
.ag-block-kicker { font-size: 12px; text-transform: uppercase; color: var(--ag-red); font-weight: 700; }
@media (max-width: 900px) {
  .ag-challenge-layout { grid-template-columns: 1fr; }
  .ag-challenge-side { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* --- Equipe --- */
.ag-team-card { text-align: center; padding: 20px; }
.ag-team-card img, .ag-avatar-placeholder {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px;
}
.ag-avatar-placeholder {
  background: var(--ag-grey-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--ag-text-muted); font-size: 12px;
}

/* --- Section grise generique --- */
.ag-section-grey { background: var(--ag-grey-bg); padding: 60px 0; }
.ag-section { padding: 60px 0; }
.ag-section-head { margin-bottom: 30px; }
.ag-section-head.ag-center { text-align: center; }
.ag-section-head h2 { color: var(--ag-navy); }

/* --- Boutons (harmonises sur le rayon le plus arrondi - point T9) --- */
.ag-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}
.ag-btn-primary { background: var(--ag-red); color: #fff; }
.ag-btn-primary:hover { background: var(--ag-red-dark); color: #fff; }
.ag-btn-outline { background: transparent; border-color: var(--ag-navy); color: var(--ag-navy); }
.ag-btn-outline:hover { background: var(--ag-navy); color: #fff; }

/* ==========================================================================
   Home (port maquette v4)
   ========================================================================== */

/* --- Home : carrousel temoignages avec navigation par logos (point R4) --- */
.ag-testimonial-panel { display: none; }
.ag-testimonial-panel.is-active { display: block; }
.ag-testimonial-panel-logo { max-height: 40px; width: auto; margin: 0 auto 16px; display: block; }
.ag-testimonial-author { text-align: center; font-weight: 700; color: var(--ag-navy); }
.ag-testimonial-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}
.ag-testimonial-logos .client-image {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.ag-testimonial-logos .client-image.is-active,
.ag-testimonial-logos .client-image:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --- Message visible uniquement des editeurs, quand du contenu attendu manque --- */
.ag-admin-hint {
  background: #FFF3CD;
  color: #7A5B00;
  border: 1px solid #FFE39B;
  border-radius: 6px;
  padding: 12px 18px;
  font-size: 14px;
}

/* ==========================================================================
   Missions & Publications
   ========================================================================== */

/* --- Pastilles de filtre agrandies pour l'accessibilite (point M2 : le site
       sera consulte par un public parfois age, demande de Racha le 10/08) --- */
.ag-pill { font-size: 15px; padding: 8px 20px; }

/* --- Fiche mission/publication : reutilise .ag-challenge-layout / .ag-page-hero --- */
.page-single .ag-page-hero + .ag-section { padding-top: 60px; }


/* ==========================================================================
   NOS MISSIONS — port de la maquette v8 (03/09/2026)

   Deux ecrans : la page de liste (/nos-missions/, gabarit page-nos-missions.php)
   et la fiche d'une mission (single-mission.php). Les deux reprennent des
   composants deja poses plus haut — .ag-page-hero, .ag-grid, .ag-filters,
   .ag-challenge-layout — et n'ajoutent ici que ce qui leur est propre.
   ========================================================================== */

/* --- Barre de filtres : un peu d'air avant la grille, comme dans la maquette --- */
.ag-missions-index .ag-filters { margin-bottom: 36px; }
.ag-filters-empty {
  color: var(--ag-text-muted);
  font-size: 15px;
  text-align: center;
  padding: 40px 0 10px;
}

/* --- Carte d'une mission ---------------------------------------------------
   La vignette du secteur ouvre la carte ; le logo du client est pose dessus
   dans une pastille blanche, ou il reste lisible quelle que soit la photo. */
.ag-mission-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ag-mission-card:hover,
.ag-mission-card:focus-visible {
  border-color: var(--ag-navy);
  box-shadow: 0 12px 30px rgba(7,59,81,.08);
  transform: translateY(-2px);
}

.ag-mc-media {
  position: relative;
  display: block;
  height: 126px;
  background: var(--ag-navy);
  overflow: hidden;
}
.ag-mc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.ag-mission-card:hover .ag-mc-media img { transform: scale(1.06); }
/* Voile de couleur : il unifie des photos de provenances differentes et fait
   ressortir la pastille du logo. */
.ag-mc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(7,59,81,.55) 0%, rgba(31,73,125,.28) 55%, rgba(229,25,44,.16) 100%);
  mix-blend-mode: multiply;
}

.ag-mc-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  background: #fff;
  border-radius: 9px;
  padding: 7px 11px;
  box-shadow: 0 6px 18px rgba(5,42,59,.28);
  display: flex;
  align-items: center;
}
.ag-mc-badge img { height: 22px; width: auto; max-width: 110px; object-fit: contain; display: block; }

.ag-mc-year {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background: rgba(5,42,59,.55);
  border-radius: 100px;
  padding: 4px 11px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ag-mc-inner {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  flex: 1;
}
.ag-mc-title { font-size: 16px; color: var(--ag-navy); margin: 0 0 8px; }
.ag-mc-client { font-size: 13px; color: var(--ag-text-muted); }
.ag-mc-desc { font-size: 14px; color: var(--ag-text-muted); margin-top: 8px; }

/* Etiquettes agrandies (point M2). Partagees avec la fiche mission, ou elles
   servent au meme usage juste sous le logo du client. */
.ag-mc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ag-mc-inner .ag-mc-tags { margin-top: auto; padding-top: 14px; }
.ag-mc-tag {
  font-size: 12.5px;
  font-weight: 700;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  padding: 6px 12px;
  border-radius: 7px;
}

/* --- Fiche mission ---------------------------------------------------------
   Variante de .ag-challenge-layout : les interlocuteurs passent a DROITE. Les
   pages challenge gardent leur colonne a gauche — les deux gabarits se
   distinguent ainsi au premier coup d'oeil, ce qui etait la demande du 10/08
   (la fiche mission ne doit pas etre une page challenge de plus). */
.ag-challenge-layout.ag-layout-right { grid-template-columns: 1fr 250px; }
.ag-challenge-layout.ag-layout-right .ag-challenge-side { order: 2; }

.ag-mission-head {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ag-mission-logo { height: 42px; width: auto; max-width: 170px; object-fit: contain; }

/* Le contexte, en ouverture de fiche : plus grand que le reste, adosse a une
   barre rouge. C'est le seul endroit du site ou le texte courant est agrandi. */
.ag-mission-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ag-text);
  font-weight: 500;
  padding-left: 22px;
  border-left: 3px solid var(--ag-red);
  margin-bottom: 40px;
}
.ag-mission-lead p:last-child { margin-bottom: 0; }

.ag-mission-bloc { margin-bottom: 40px; }
.ag-mission-bloc-titre {
  font-size: 12px;
  font-weight: 700;
  color: var(--ag-navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px;
}

.ag-mission-result {
  background: var(--ag-grey-bg);
  border-radius: 18px;
  padding: 30px;
}
.ag-mission-result p { font-size: 16px; color: var(--ag-text); }
.ag-mission-result p:last-child { margin-bottom: 0; }

.ag-mission-cta { margin-top: 28px; }

/* --- Maillage interne : de la mission vers son challenge -------------------
   L'audit releve que le contenu existant n'est pas interconnecte. Ce bloc est
   le passage d'une rubrique a l'autre : discret, mais present a chaque fin de
   lecture. */
.ag-cross-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--ag-grey-border);
  border-left: 3px solid var(--ag-red);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ag-cross-link:hover,
.ag-cross-link:focus-visible {
  border-color: var(--ag-red);
  box-shadow: 0 8px 22px rgba(7,59,81,.08);
  transform: translateY(-1px);
}
/* Le libelle occupe sa propre ligne : les noms de challenge sont longs, sans
   cela c'est le lien d'action qui se retrouve renvoye seul a la ligne. */
.ag-cross-link-label {
  flex: 0 0 100%;
  font-size: 12.5px;
  color: var(--ag-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ag-cross-link strong { font-size: 16px; color: var(--ag-navy); font-weight: 600; }
.ag-cross-link-go { margin-left: auto; font-size: 13.5px; color: var(--ag-red); font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .ag-challenge-layout.ag-layout-right { grid-template-columns: 1fr; }
  /* L'encart passe sous le texte : on lui redonne un fond pour qu'il ne se
     confonde pas avec la fin de la fiche. */
  .ag-challenge-layout.ag-layout-right .ag-challenge-side {
    margin-top: 28px;
    padding: 22px;
    background: var(--ag-grey-bg);
    border-radius: 16px;
  }
}
@media (max-width: 700px) {
  .ag-cross-link-go { margin-left: 0; }
  .ag-mission-lead { font-size: 17px; }
  .ag-mission-result { padding: 24px; }
}



/* ==========================================================================
   PUBLICATIONS — port de la maquette v8 (03/09/2026)

   Deux ecrans : la page de liste (/publications/, gabarit
   page-publications.php) et l'article (single-publication.php). Les deux
   reprennent des composants deja poses plus haut — .ag-page-hero, .ag-grid,
   .ag-filters, .ag-cross-link — et n'ajoutent ici que ce qui leur est propre.
   ========================================================================== */

.ag-publications-index .ag-filters { margin-bottom: 36px; }

/* --- Vignette d'un article -------------------------------------------------
   Meme signature que la carte d'une mission : photo voilee, coins arrondis,
   la carte se souleve au survol. Elle s'en distingue par ce qu'elle porte —
   une pastille de theme, la date et le temps de lecture, pas de logo client. */
.ag-pub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ag-pub-card:hover,
.ag-pub-card:focus-visible {
  border-color: var(--ag-navy);
  box-shadow: 0 14px 34px rgba(7,59,81,.1);
  transform: translateY(-2px);
}

.ag-pub-media {
  position: relative;
  display: block;
  height: 150px;
  background: var(--ag-navy);
  overflow: hidden;
}
.ag-pub-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.ag-pub-card:hover .ag-pub-media img { transform: scale(1.06); }
/* Voile de couleur : les vignettes d'article etaient, dans la maquette v7, les
   seules images du site a ne recevoir aucun traitement. Il unifie des photos de
   provenances differentes. */
.ag-pub-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(7,59,81,.42) 0%, rgba(31,73,125,.16) 55%, rgba(229,25,44,.14) 100%);
  mix-blend-mode: multiply;
}

.ag-pub-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 22px 22px;
  flex: 1;
}
/* Pastille arrondie, et non le rectangle des etiquettes de mission : c'est ce
   qui distingue un theme de publication d'un secteur d'activite. */
.ag-pub-tag {
  font-size: 12.5px;
  font-weight: 700;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  padding: 5px 13px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.ag-pub-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ag-text-muted);
  margin-bottom: 8px;
}
.ag-pub-title { font-size: 16px; color: var(--ag-navy); margin: 0; }

/* --- L'article -------------------------------------------------------------
   Une seule colonne, bornee a la largeur de lecture de la maquette. Sur un
   texte long, la largeur de ligne est ce qui compte le plus : au-dela d'une
   soixantaine de caracteres, l'oeil perd la ligne suivante. */
.ag-pub-article { max-width: 760px; }

/* Les selecteurs de ce bloc sont prefixes par .ag-publication : les regles
   generales des pages interieures (« .ag-section h2 », « .ag-section p »)
   posent des titres de 36 px et un texte gris clair, qui conviennent a une page
   de presentation faite de sections courtes. Un article, lui, est un texte
   suivi : ses intertitres doivent rester des intertitres, et son corps se lire
   en gris fonce. Sans ce prefixe, les deux jeux de regles ont la meme
   specificite et c'est le dernier ecrit qui l'emporte. */
.ag-publication .ag-pub-chapo {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ag-text);
  font-weight: 500;
  padding-left: 22px;
  border-left: 3px solid var(--ag-red);
  margin-bottom: 32px;
}

.ag-publication .ag-pub-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ag-text);
  font-weight: 400;
}
/* Les intertitres des articles repris de l'ancien site etaient enfermes dans
   des listes a puces — une mise en forme faite a la main dans l'editeur de
   2017. La correction n'est pas ici mais dans le contenu lui-meme
   (scripts/publications-v8.php, ag_delister_titres) : la puce appartient a
   l'element de liste, qu'aucun selecteur CSS ne sait atteindre depuis le titre
   qu'il contient. */
.ag-publication .ag-pub-content h2 {
  font-size: 22px;
  color: var(--ag-navy);
  margin: 36px 0 14px;
}
.ag-publication .ag-pub-content h3 { font-size: 18px; color: var(--ag-navy); margin: 28px 0 12px; }
.ag-publication .ag-pub-content li { color: var(--ag-text); line-height: 1.7; }
.ag-publication .ag-pub-content img { max-width: 100%; height: auto; border-radius: 14px; }
.ag-publication .ag-pub-content a { color: var(--ag-red); text-decoration: underline; }

.ag-pub-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ag-grey-border);
}

@media (max-width: 700px) {
  .ag-pub-chapo { font-size: 17px; }
  .ag-pub-footer .ag-btn { width: 100%; text-align: center; }
}




/* ==========================================================================
   RECRUTEMENT — port de la maquette v8 (07/09/2026)

   Deux ecrans : la page de liste (/recrutement/, gabarit page-recrutement.php)
   et l'offre (single-job-posting.php). Les deux reprennent des composants deja
   poses plus haut — .ag-page-hero, .ag-grid, .ag-formulaire — et n'ajoutent ici
   que ce qui leur est propre.
   ========================================================================== */

/* --- Carte d'une offre -----------------------------------------------------
   Un encadre de texte, sans photo : ce qui compte dans une offre est
   l'intitule du poste, le lieu et le contrat. Deux colonnes et non trois, les
   titres de poste etant longs. */
.ag-job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 14px;
  padding: 26px;
  text-decoration: none;
  color: var(--ag-text);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ag-job-card:hover,
.ag-job-card:focus-visible {
  border-color: var(--ag-navy);
  box-shadow: 0 14px 34px rgba(7,59,81,.1);
  transform: translateY(-4px);
}
.ag-job-title { font-size: 20px; color: var(--ag-navy); margin: 0 0 6px; }
.ag-job-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-text-muted);
  margin-bottom: 12px;
}
.ag-job-resume { font-size: 14px; color: var(--ag-text-muted); margin-bottom: 16px; }
/* Le lien d'action colle au bas de la carte : deux offres aux resumes de
   longueurs differentes gardent leurs fleches alignees. */
.ag-job-go { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--ag-red); }

/* Une seule offre : pleine largeur, plutot qu'une demi-grille vide. */
.ag-job-grid--une { grid-template-columns: 1fr; }
.ag-job-grid--une .ag-job-resume { max-width: 760px; }

/* --- Candidature spontanee -------------------------------------------------
   La section du constructeur (classe ag-spontanee) devient l'encadre centre de
   la maquette, sous les offres et dans la meme section blanche, au lieu d'une
   bande grise de plus. */
.ag-recrutement-index .ag-section.ag-spontanee { padding-top: 0; }
/* Le theme trace un filet gris sous chaque section : entre les offres et
   l'encadre, il coupait ce qui doit se lire comme un seul bloc. */
.ag-recrutement-index .ag-section:has(+ .ag-spontanee) { padding-bottom: 36px; border-bottom: 0; }
.ag-spontanee .wpb_wrapper {
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
}
.ag-spontanee .ag-section-head { margin-bottom: 20px; }
.ag-spontanee .ag-section-head h2 { font-size: 24px; margin-bottom: 10px; }
.ag-spontanee .ag-section-head p { margin: 0 auto; max-width: 560px; }

/* Aucune offre ouverte : un message pour le VISITEUR, pas un encart d'erreur.
   C'est l'etat normal de la rubrique une bonne partie de l'annee. */
.ag-jobs-vide {
  max-width: 560px;
  font-size: 16px;
  color: var(--ag-text-muted);
}

/* --- L'offre ---------------------------------------------------------------
   Deux colonnes : le texte, et l'encart de candidature qui suit le defilement.
   Sur une offre, le moyen de postuler doit rester sous les yeux du candidat
   pendant qu'il lit — c'est la difference avec un article, qui est en une
   seule colonne. */
.ag-job-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.ag-job-body { max-width: 720px; }

/* Prefixe .ag-job pour les memes raisons que .ag-publication : les regles
   generales des pages interieures (« .ag-section h2 », « .ag-section p »)
   posent des titres de 36 px et un texte gris clair, faits pour des sections
   courtes. Le texte d'une offre est un texte suivi. */
.ag-job .ag-job-chapo {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ag-text);
  font-weight: 500;
  padding-left: 22px;
  border-left: 3px solid var(--ag-red);
  margin-bottom: 32px;
}
.ag-job .ag-job-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ag-text);
  font-weight: 400;
}
.ag-job .ag-job-content h2 { font-size: 22px; color: var(--ag-navy); margin: 34px 0 12px; }
.ag-job .ag-job-content h3 { font-size: 19px; color: var(--ag-navy); margin: 30px 0 12px; }
.ag-job .ag-job-content li { color: var(--ag-text); line-height: 1.7; }

.ag-job-retour { margin-top: 36px; }

/* L'encart de candidature reprend l'encadre blanc du formulaire de contact
   (.ag-formulaire) : meme mise en forme des champs, meme ombre. On ne redefinit
   ici que ce que sa position en colonne change. */
.ag-job-side { position: sticky; top: 96px; }
.ag-formulaire.ag-job-apply {
  max-width: none;
  margin: 0;
  padding: 28px;
}
.ag-job-apply h2.ag-formulaire-titre { font-size: 19px; }
.ag-job-apply .ag-formulaire-texte { font-size: 13.5px; }
/* Le selecteur de fichier du CV : le theme met tout champ en pleine largeur et
   sans bordure, ce qui le rend invisible au milieu des autres. */
.ag-job-apply input[type="file"] {
  width: 100%;
  font-size: 12.5px;
  padding: 12px;
  border: 1.5px dashed var(--ag-grey-border);
  border-radius: 10px;
  background: #fff;
}
/* La case a cocher du consentement garde sa taille propre. */
.ag-job-apply input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  margin: 3px 0 0;
  flex: 0 0 auto;
}
/* Intitule du CV et texte du consentement, comme dans la maquette : petits,
   gris, en casse normale. Le theme Comet leur imposait majuscules et
   espacement des lettres (constate le 17/09). */
.ag-job-apply .form-group > label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ag-text-muted);
  text-transform: none;
  letter-spacing: normal;
}
.ag-job-apply .wpcf7-list-item { margin: 0; }
/* .ag-formulaire.ag-job-apply : la regle generale .ag-formulaire .wpcf7-acceptance
   label, plus bas dans ce fichier, l'emporterait sinon. */
.ag-formulaire.ag-job-apply .wpcf7-acceptance label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ag-text-muted);
  margin: 0;
}
.ag-job-apply .wpcf7-form p,
.ag-job-apply .form-group { margin: 0 0 12px; }
.ag-job-apply textarea { min-height: 110px; }

@media (max-width: 900px) {
  .ag-job-layout { grid-template-columns: 1fr; gap: 36px; }
  /* L'encart passe sous le texte : il ne suit plus le defilement, sinon il
     recouvrirait l'offre pendant la lecture. */
  .ag-job-side { position: static; }
}
@media (max-width: 700px) {
  .ag-job .ag-job-chapo { font-size: 17px; }
}

/* ==========================================================================
   PAGE D'ACCUEIL — port de la maquette v8 (29/08/2026)

   Chaque bloc de l'accueil est un element WPBakery (voir
   framework/inc/vc-elements.php) qui sort sa propre <section class="ag-section">.
   Les regles ci-dessous portent la mise en forme : l'editrice saisit du texte,
   des images et des liens, jamais de mise en page.

   Ce bloc est place en fin de fichier a dessein : il redefinit quelques regles
   posees plus haut pour les pages interieures (encadres de chiffres notamment),
   qui datent du port de la v4.
   ========================================================================== */

/* --- Ossature : le constructeur enveloppe chaque bloc dans une ligne a laquelle
       le theme applique padding:50px 0 100px. On la neutralise : nos sections
       gerent elles-memes leur respiration. --- */
.ag-row { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.ag-row > .wpb_column > .vc_column-inner,
.ag-row .vc_column-inner { padding: 0 !important; }
.ag-row .wpb_wrapper { margin: 0; }
.ag-row .wpb_wrapper > .ag-section:first-child { margin-top: 0; }

/* theme-less.css pose background-color:#fff sur toute balise <section> (regle
   « section ») — et le gabarit de ligne du theme
   (vc_templates/vc_row.php) sort justement des <section>. Une ligne posee dans
   une section grise venait donc peindre un rectangle blanc par-dessus le gris :
   il ne restait visible que la respiration haute et basse de la section, sous
   forme de deux bandes grises. Les lignes n'ont pas de fond propre, ce sont les
   sections qui portent la couleur. */
.ag-row,
.ag-row-side { background-color: transparent; }

.ag-section { position: relative; padding: 96px 0; }
.ag-section--tight { padding: 56px 0; }
.ag-section--grey { background: var(--ag-grey-bg); }

.ag-section > .container,
.ag-section .container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.ag-section h2 {
  font-family: 'dolce', 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.12;
  font-size: 36px;
  color: var(--ag-navy);
  margin: 0 0 0.5em;
}
.ag-section p { color: var(--ag-text-muted); font-weight: 500; }

.ag-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-red);
  margin-bottom: 14px;
}

.ag-section-head { max-width: 640px; margin-bottom: 48px; }
.ag-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Bouton de la charte --- */
.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ag-btn-red { background: var(--ag-red); color: #fff; }
.ag-btn-red:hover,
.ag-btn-red:focus { background: var(--ag-red-dark); color: #fff; text-decoration: none; }

/* --- Apparition au defilement --- */
.ag-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--ag-delay, 0s); }
.ag-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ag-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   1 · Bandeau
   ========================================================================== */

.ag-hero {
  color: #fff;
  overflow: hidden;
  padding: clamp(72px, 7vw, 96px) 0 clamp(72px, 7vw, 92px);
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(31, 73, 125, 0.85) 0%, rgba(31, 73, 125, 0) 62%),
    linear-gradient(135deg, #0A4763 0%, #073B51 45%, #052A3B 100%);
}
/* Bandeau agrandi le 29/09 (« qu'on voie mieux les gens ») : sur ordinateur il
   suit la largeur de l'ecran. Reduit d'un quart le meme jour : 31,5 vw, soit
   environ 450 px sur un portable et 510 px au plus, et le texte est centre dans la hauteur. La photo importee
   est une bande de 2000 x 960 (seance n° 2, lignes 40 a 1000) : visages des
   personnes debout vers 7 %, des personnes assises vers 40 % de sa hauteur.
   Calee a 12 %, aucune tete n'est coupee, du portable au grand ecran. */
@media (min-width: 769px) {
  /* Grille plutot que flex : le conteneur garde sa largeur et son centrage. */
  .ag-hero {
    display: grid;
    align-content: center;
    min-height: clamp(360px, 31.5vw, 510px);
  }
}
.ag-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ag-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
/* Le voile bleu de la charte : WPBakery ne sait poser qu'une couleur unie,
   ce degrade est donc porte par le theme (releve §3 du changelog v8). */
.ag-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 42, 59, 0.40) 0%, rgba(7, 59, 81, 0.26) 45%, rgba(7, 59, 81, 0.12) 100%),
    radial-gradient(700px 420px at 88% 10%, rgba(229, 25, 44, 0.14), rgba(229, 25, 44, 0) 70%);
}
/* Voile allege le 25/09 (« qu'on voie davantage l'image »), puis presque
   uniforme le 29/09 : la personne assise a gauche disparaissait sous le bleu.
   La lisibilite du texte ne repose donc plus sur le voile mais sur le texte
   lui-meme (ombre portee, pastilles sur fond sombre translucide, plus bas). */
/* Motif de courbes de montee en charge : evoque le metier sans designer un secteur. */
.ag-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='2'%3E%3Cpath d='M0 400 C 260 396 430 340 600 250 S 940 70 1200 40'/%3E%3Cpath d='M0 418 C 300 414 470 380 640 306 S 960 150 1200 118'/%3E%3Cpath d='M0 434 C 340 430 520 408 700 356 S 980 232 1200 200'/%3E%3C/g%3E%3C/svg%3E") right bottom/100% auto no-repeat;
}
.ag-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  z-index: 1;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 25, 44, 0.16) 0%, rgba(229, 25, 44, 0) 70%);
}
.ag-hero-inner { position: relative; z-index: 2; }

/* Bandeaux « un quart bleu, trois quarts photo » — essai du 28/09 sur
   Publications et Recrutement. Essaye aussi sur l'accueil, puis retire a la
   demande : son bandeau garde la photo pleine largeur. Le bandeau est une bande tres allongee : etiree
   sur toute sa largeur, la photo est fortement agrandie et on n'en voit qu'une
   tranche, les tetes sont coupees. Reduite aux trois quarts droits, elle est
   moins agrandie et la bande importee (2000 x 520 ou 600, recadree sur les
   visages) tient presque entiere. Le quart gauche garde le fond bleu du bandeau,
   la photo s'y fond par un masque en degrade plutot que par un bord net.
   Hauteur du bandeau inchangee. Pour l'etendre a une autre page, ajouter sa
   classe de gabarit aux selecteurs .ag-page-hero ci-dessous.
   Sur telephone et tablette (768 px et moins), la photo reprend toute la
   largeur : le bandeau y est proportionnellement haut, la coupe ne se pose pas. */
@media (min-width: 769px) {
  .page-template-page-publications .ag-page-hero .ag-picture,
  .page-template-page-recrutement .ag-page-hero .ag-picture {
    left: 25%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  /* Voile allege : le debut du texte est sur le bleu, la photo n'a plus besoin
     d'etre assombrie sur toute sa largeur. Il reste soutenu a gauche, la ou le
     titre deborde sur la photo. */
  .page-template-page-publications .ag-page-hero::before,
  .page-template-page-recrutement .ag-page-hero::before {
    background: linear-gradient(90deg, rgba(7,59,81,.92) 0%, rgba(7,59,81,.80) 25%, rgba(7,59,81,.50) 55%, rgba(7,59,81,.28) 100%);
  }
}

.ag-hero-title {
  font-family: 'dolce', 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(38px, 11vw, 96px);
  line-height: 0.94;
  letter-spacing: 0;
  margin: 0 0 20px;
}
@media (min-width: 1100px) { .ag-hero-title { font-size: min(11.2vw, 142px); } }
/* Seconde moitie du nom detouree : le mot tient toute la largeur sans ecraser
   le reste de la page. */
.ag-hero-title b.ag-hollow {
  font-weight: inherit;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.66);
  color: transparent;
}
@supports not ((-webkit-text-stroke: 1px #000)) {
  .ag-hero-title b.ag-hollow { color: rgba(255, 255, 255, 0.5); }
}

.ag-hero .ag-lead {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(3, 25, 36, 0.6), 0 2px 18px rgba(3, 25, 36, 0.55);
  max-width: 620px;
  margin: 0 0 30px;
}
.ag-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Cinq pastilles courtes tiennent sur une ligne ; au-dela elles passent a la
   ligne — degradation prevue, signalee a l'editrice dans le constructeur. */
.ag-hero-sectors {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.ag-hero-sectors span {
  background: rgba(5, 42, 59, 0.5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100px;
  padding: 7px 15px;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 1000px) { .ag-hero-sectors { flex-wrap: wrap; } }

/* ==========================================================================
   2 · Les challenges
   ========================================================================== */

.ag-offer { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
.ag-offer-intro h2 { margin-bottom: 20px; }

/* Numerotation par compteur CSS : ajouter, retirer ou reordonner une ligne ne
   demande jamais de corriger un numero (releve §3 du changelog v8). */
.ag-offer-list { border-top: 1px solid var(--ag-grey-border); counter-reset: ag-offer; }
.ag-offer-item {
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  gap: 14px;
  align-items: center;
  padding: 17px 12px 17px 4px;
  border-bottom: 1px solid var(--ag-grey-border);
  text-decoration: none;
  transition: background 0.25s ease, padding-left 0.25s ease;
}
a.ag-offer-item:hover,
a.ag-offer-item:focus { background: rgba(7, 59, 81, 0.045); padding-left: 12px; text-decoration: none; }
.ag-offer-num {
  counter-increment: ag-offer;
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ag-navy);
  opacity: 0.34;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.ag-offer-num::before { content: counter(ag-offer, decimal-leading-zero); }
a.ag-offer-item:hover .ag-offer-num { color: var(--ag-red); opacity: 1; }
.ag-offer-title { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ag-navy); }
.ag-offer-go {
  font-size: 16px;
  color: var(--ag-red);
  text-align: right;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
a.ag-offer-item:hover .ag-offer-go { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) {
  .ag-offer { grid-template-columns: 1fr; gap: 34px; }
  .ag-offer-item { grid-template-columns: 44px 1fr 20px; padding: 15px 4px; }
  .ag-offer-num { font-size: 25px; }
  .ag-offer-title { font-size: 16px; }
  /* Sans survol au doigt, la fleche reste visible en permanence sur mobile. */
  .ag-offer-go { opacity: 0.7; transform: none; }
}

/* ==========================================================================
   3 · Panneau texte + photo (R'Optim)
   ========================================================================== */

.ag-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ag-navy);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.ag-panel-body { padding: clamp(30px, 4vw, 50px); position: relative; z-index: 2; }
.ag-panel-title {
  color: #fff;
  font-family: 'dolce', 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
.ag-panel p { color: rgba(255, 255, 255, 0.78); max-width: 50ch; margin-bottom: 26px; }
.ag-panel-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F1808B;
  border: 1px solid rgba(229, 25, 44, 0.55);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.ag-panel-visual { position: relative; align-self: stretch; min-height: 280px; }
.ag-panel-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le degrade part du bleu plein : c'est lui qui fait tenir le panneau comme un
   seul objet, sans bord franc entre la photo et l'aplat. */
.ag-panel-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ag-navy) 0%, rgba(7, 59, 81, 0.78) 34%, rgba(7, 59, 81, 0.18) 100%);
}
.ag-panel--image-left { grid-template-columns: 0.9fr 1.1fr; }
.ag-panel--image-left .ag-panel-body { order: 2; }
.ag-panel--image-left .ag-panel-visual { order: 1; }
.ag-panel--image-left .ag-panel-visual::after {
  background: linear-gradient(270deg, var(--ag-navy) 0%, rgba(7, 59, 81, 0.78) 34%, rgba(7, 59, 81, 0.18) 100%);
}
@media (max-width: 900px) {
  .ag-panel,
  .ag-panel--image-left { grid-template-columns: 1fr; }
  .ag-panel-visual { min-height: 180px; order: -1; }
  .ag-panel-visual::after,
  .ag-panel--image-left .ag-panel-visual::after {
    background: linear-gradient(0deg, var(--ag-navy) 0%, rgba(7, 59, 81, 0.35) 100%);
  }
  .ag-panel--image-left .ag-panel-body { order: 0; }
  /* Une video garde son format : 180 px de haut la reduirait a un timbre. */
  .ag-panel-visual.ag-video { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   4 · Chiffres cles
   ========================================================================== */

.ag-stats { background: var(--ag-navy); color: #fff; overflow: hidden; }
.ag-stats-bg { position: absolute; inset: 0; z-index: 0; }
.ag-stats-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Assez dense pour que les chiffres restent parfaitement lisibles, assez clair
   pour qu'on voie qu'il y a une photo et pas un aplat. */
.ag-stats-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(5, 42, 59, 0.88) 0%, rgba(7, 59, 81, 0.78) 52%, rgba(31, 73, 125, 0.68) 100%),
    radial-gradient(760px 460px at 90% 0%, rgba(229, 25, 44, 0.26), rgba(229, 25, 44, 0) 70%);
}

/* Encadres « hublot » (idee d'Aurelie, reunion du 10/08) : rectangle a bords
   tres arrondis dont le lisere s'anime a l'arrivee du bloc. */
.ag-stat-tile {
  text-align: center;
  padding: 30px 22px;
  position: relative;
  border: 1.5px solid var(--ag-grey-border);
  border-radius: 80px / 56px;
  background: #fff;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.ag-stat-tile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 72px / 50px;
  border: 1px solid transparent;
  transition: border-color 0.5s ease 0.15s;
  pointer-events: none;
}
.ag-stat-tile.is-in { border-color: var(--ag-navy-tint); box-shadow: 0 10px 30px rgba(7, 59, 81, 0.07); }
.ag-stat-tile.is-in::before { border-color: rgba(229, 25, 44, 0.28); }
.ag-stat-tile:hover { transform: translateY(-3px); }
.ag-stat-num {
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--ag-navy);
  margin-bottom: 8px;
}
.ag-stat-label { font-size: 14px; font-weight: 600; color: var(--ag-text-muted); margin-top: 0; }
.ag-stat-num.ag-tbd { color: var(--ag-grey-border); }

.ag-stats .ag-stat-tile { background: transparent; border-color: rgba(255, 255, 255, 0.22); }
.ag-stats .ag-stat-tile.is-in { border-color: rgba(255, 255, 255, 0.55); box-shadow: none; }
/* Rouge appuye (demande du 28/09) : a 0.55 et 1 px, le lisere rouge se perdait
   dans le bleu de la photo. Plein et en 2 px, il se lit comme un hublot. */
.ag-stats .ag-stat-tile.is-in::before { border-width: 2px; border-color: var(--ag-red, #e5192c); }
.ag-stats .ag-stat-num { color: #fff; }
/* Le tiret d'un chiffre non encore fourni doit rester lisible : a 0.32 il
   disparaissait sur une photo claire, et l'encadre semblait vide plutot qu'en
   attente (constate le 03/09 sur la page References). */
.ag-stats .ag-stat-num.ag-tbd { color: rgba(255, 255, 255, 0.7); }
.ag-stats .ag-stat-label { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) { .ag-stat-tile { border-radius: 60px / 48px; } }

/* ==========================================================================
   5 · Citations clients
   ========================================================================== */

/* Toutes les citations occupent la meme case de grille : le bloc prend la
   hauteur de la plus longue, donc une citation rallongee ne peut pas etre
   coupee (§7.1 du changelog v8). */
.ag-testi-stage { display: grid; max-width: 780px; margin: 0 auto; }
.ag-testi-slide {
  grid-area: 1 / 1;
  margin: 0;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 16px;
  padding: 32px 40px 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  display: flex;
  flex-direction: column;
  /* Le pied (auteur, lien) suit directement la citation (retour du 09/10) :
     une citation plus courte que la plus longue laisse sa place libre en bas
     de la carte. */
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.ag-testi-slide.is-active { opacity: 1; visibility: visible; }
/* Guillemet en filigrane */
.ag-testi-slide::before {
  content: "\201C";
  position: absolute;
  right: 18px;
  top: -26px;
  z-index: 0;
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 150px;
  line-height: 1;
  color: rgba(229, 25, 44, 0.10);
  pointer-events: none;
}
.ag-testi-slide > * { position: relative; z-index: 1; }
.ag-testi-quote {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ag-text);
  margin: 0 0 14px;
  padding: 0;
  border: none;
  font-style: normal;
  background: none;
}
/* Pied de carte sur une rangee : logo et auteur a gauche, le lien a droite.
   Sur un ecran etroit, le lien passe dessous. */
.ag-testi-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ag-grey-border);
}
.ag-testi-name { font-weight: 700; font-size: 14px; color: var(--ag-navy); }
.ag-testi-meta { font-size: 12.5px; color: var(--ag-text-muted); }
/* Annee(s) de la mission, a la suite de la fonction (demande du 29/09, valeurs du 01/10). */
.ag-testi-annee { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ag-red); white-space: nowrap; }
.ag-testi-role + .ag-testi-annee::before { content: "·"; margin: 0 8px; color: var(--ag-text-muted); font-weight: 400; }
.ag-testi-logo { height: 38px; width: auto; max-width: 120px; flex: 0 0 auto; object-fit: contain; }
.ag-testi-link { display: inline-block; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ag-red); white-space: nowrap; }
.ag-testi-link:hover { color: var(--ag-red-dark); text-decoration: underline; }

/* Navigation par logo client plutot que par pastilles : tous les logos sont
   grises sauf celui de la citation affichee (retenu en reunion du 10/08, R4).
   Pas de defilement automatique — la navigation est entierement manuelle. */
.ag-testi-nav { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.ag-testi-tab {
  border: 1.5px solid transparent;
  background: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ag-testi-tab img {
  height: 26px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.ag-testi-tab:hover img { opacity: 0.7; }
.ag-testi-tab.is-active { border-color: var(--ag-grey-border); background: #fff; }
.ag-testi-tab.is-active img { filter: none; opacity: 1; }
.ag-testi-tab:focus-visible { outline: 2px solid var(--ag-red); outline-offset: 2px; }
.ag-testi-tab-text { font-size: 13px; font-weight: 700; color: var(--ag-navy); }
@media (max-width: 700px) { .ag-testi-slide { padding: 26px; } }

/* ==========================================================================
   6 · Bande de logos clients
   ========================================================================== */

.ag-logos { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: center; }
.ag-logo-item { display: block; flex: 0 0 auto; line-height: 0; }
/* Logos en couleur, sans griser ni attendre le survol : c'est le traitement de
   la maquette (.logo-strip), sur les trois bandes — accueil, R'Optim et les
   bandes par secteur de Ils travaillent avec nous. Un logo grise se lit mal, et
   au survol seul il n'est de toute facon jamais vu sur telephone.
   Les vignettes de navigation des temoignages, elles, restent grisees hors
   selection : la maquette les grise aussi, c'est ce qui designe l'onglet actif. */
.ag-logos img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
/* Accueil : tous les logos sur une seule ligne (demande d'Aurelie, 10/08).
   Ils se reduisent au besoin plutot que de passer a la ligne ; le retour a la
   ligne reste autorise sous 900 px, ou une ligne unique serait illisible. */
.ag-logos--one-line { flex-wrap: nowrap; gap: 26px; }
.ag-logos--one-line .ag-logo-item { flex: 0 1 auto; min-width: 0; }
.ag-logos--one-line img { height: 30px; max-width: 120px; }
.ag-logos--small img { height: 26px; max-width: 104px; }
@media (max-width: 900px) {
  .ag-logos--one-line { flex-wrap: wrap; }
  .ag-logos--one-line .ag-logo-item { flex: 0 0 auto; }
}

/* ==========================================================================
   7 · Bloc contact
   ========================================================================== */

/* Nom volontairement different de la classe .ag-cta portee par l'entree de menu
   "Nous contacter" (voir plus haut, ul.ag-menu > li.ag-cta) : les deux existaient
   sous le meme nom, et cette regle-ci, qui vient plus loin dans le fichier,
   transformait le bouton du bandeau en pave rouge de 154 px de haut. */
.ag-contact-block { background: var(--ag-red); color: #fff; border-radius: 24px; padding: 56px; }
.ag-contact-block h2 { color: #fff; }
.ag-contact-block p { color: rgba(255, 255, 255, 0.85); }
.ag-contact-block--photo { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ag-cta-photo { position: relative; min-height: 340px; }
.ag-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* Le rouge monte progressivement sur toute la largeur de la photo : pas de
   raccord net entre l'image et l'aplat (meme principe que R'Optim, point O2). */
.ag-cta-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(229, 25, 44, 0.10) 0%, rgba(229, 25, 44, 0.45) 45%, rgba(229, 25, 44, 0.88) 82%, rgba(229, 25, 44, 1) 100%),
    linear-gradient(180deg, rgba(7, 59, 81, 0.34), rgba(7, 59, 81, 0.12));
}
.ag-contact-block--photo .ag-cta-body { padding: 48px 52px; }
.ag-cta-text { margin-bottom: 24px; }

/* Formulaire Contact Form 7 remis a plat dans le bloc rouge. */
.ag-cta-form .wpcf7-form-control-wrap { display: block; }
.ag-cta-form p { margin: 0 0 14px; }
.ag-cta-form input[type="text"],
.ag-cta-form input[type="email"],
.ag-cta-form input[type="tel"],
.ag-cta-form input[type="url"],
.ag-cta-form input[type="number"],
.ag-cta-form input[type="date"],
.ag-cta-form select,
.ag-cta-form textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: none;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ag-text);
}
/* Le theme met tous les champs Contact Form 7 en transparent
   (.wpcf7-form-control:not(.wpcf7-submit), specificite 0-2-0) : on repasse
   par le meme selecteur pour que le textarea suive les autres champs.
   Les cases a cocher (consentement RGPD) et les groupes de choix sont exclus :
   ce ne sont pas des zones de saisie, les habiller en blanc les transformerait
   en pave blanc derriere le texte. */
.ag-cta-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--ag-text);
}
.ag-cta-form .wpcf7-acceptance,
.ag-cta-form .wpcf7-checkbox,
.ag-cta-form .wpcf7-radio { background: none; border: none; padding: 0; }
.ag-cta-form .wpcf7-list-item { margin: 0; }
.ag-cta-form .wpcf7-list-item-label,
.ag-cta-form .wpcf7-acceptance label { color: rgba(255, 255, 255, 0.9); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.ag-cta-form .wpcf7-acceptance a { color: #fff; text-decoration: underline; }
.ag-cta-form input[type="checkbox"],
.ag-cta-form input[type="radio"] { width: auto; padding: 0; margin-right: 8px; background: none; }

.ag-cta-form input::placeholder,
.ag-cta-form textarea::placeholder { color: var(--ag-text-muted); opacity: 1; }
.ag-cta-form input:focus,
.ag-cta-form textarea:focus,
.ag-cta-form select:focus { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 1px; }
.ag-cta-form label { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.ag-cta-form textarea { resize: vertical; min-height: 90px; }
/* Le bouton .btn du theme Comet impose majuscules, hauteur fixe et interligne
   de 53 px : le texte tombait en bas d'un bouton trop haut. On revient au
   bouton de la maquette (.btn : 15 px / 30 px, texte en casse normale). */
.ag-cta-form input.wpcf7-submit {
  opacity: 1;
  height: auto;
  line-height: 1.4;
  text-transform: none;
  width: auto;
  background: #fff;
  color: var(--ag-red);
  border: none;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 15px 30px;
  cursor: pointer;
}
.ag-cta-form input.wpcf7-submit:hover { background: rgba(255, 255, 255, 0.9); }
/* Mise en page compacte, pour tenir la hauteur de la maquette (17/09) : Nom et
   Entreprise cote a cote (.ag-demi), le bouton a gauche de la mention
   (.ag-envoi passe devant par order). Les classes sont posees dans le code du
   formulaire, voir scripts/formulaires-contact-2026-09-17.php. */
.ag-cta-form .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ag-cta-form .wpcf7-form > * { flex: 1 1 100%; margin: 0; }
.ag-cta-form .wpcf7-form > .ag-demi { flex: 1 1 calc(50% - 6px); }
.ag-cta-form .wpcf7-form > .ag-envoi { flex: 0 0 auto; order: 1; }
.ag-cta-form .wpcf7-form > .ag-form-mention { flex: 1 1 0; order: 2; }
.ag-cta-form .wpcf7-form > .wpcf7-response-output { order: 3; }
@media (max-width: 480px) {
  .ag-cta-form .wpcf7-form > .ag-demi,
  .ag-cta-form .wpcf7-form > .ag-form-mention { flex: 1 1 100%; }
}
.ag-cta-form .ag-form-mention { color: rgba(255, 255, 255, 0.85); }
.ag-cta-form .ag-form-mention a { color: #fff; }
.ag-cta-form .wpcf7-not-valid-tip { color: #fff; font-size: 12px; font-weight: 700; }
.ag-cta-form .wpcf7-response-output { color: #fff; border-color: rgba(255, 255, 255, 0.6); margin: 12px 0 0; }
@media (max-width: 820px) {
  .ag-contact-block { padding: 32px 26px 38px; }
  .ag-contact-block--photo { grid-template-columns: 1fr; padding: 0; }
  .ag-cta-photo { min-height: 180px; }
  .ag-cta-photo::after {
    background: linear-gradient(180deg, rgba(229, 25, 44, 0) 30%, rgba(229, 25, 44, 0.92) 100%);
  }
  .ag-contact-block--photo .ag-cta-body { padding: 32px 26px 38px; }
}

/* --- La charte reserve Dolce Vita aux titres ; use-any-font l'applique a tous
       les niveaux de titre, on rend h3/h4 a Raleway SemiBold dans nos blocs. --- */
.ag-section h3:not(.ag-panel-title),
.ag-section h4 {
  font-family: 'Raleway', sans-serif !important;
  font-weight: 600;
  text-transform: none;
  color: var(--ag-navy);
}

/* ==========================================================================
   8 · Challenges — page de liste et pages de challenge (port maquette v8,
   02/09/2026)

   Deux gabarits : page-challenges.php (la liste) et single-challenge.php (une
   page challenge). Le corps d'une page challenge est compose dans le
   constructeur ; chaque sous-problematique y est un bloc .ag-cblock produit par
   l'element WPBakery "Challenge — Sous-problematique".
   ========================================================================== */

/* --- Cartes de la page de liste ------------------------------------------ */

/* La numerotation suit l'ordre d'affichage : ajouter, retirer ou reordonner un
   challenge n'oblige jamais a corriger un numero a la main. */
.ag-challenge-cards { counter-reset: agcard; }

.ag-challenge-card {
  counter-increment: agcard;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ag-challenge-card:hover,
.ag-challenge-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(7, 59, 81, 0.10);
  text-decoration: none;
}

/* Le bandeau de la carte tient sans photo : le fond bleu de la charte prend le
   relais tant que la cliente n'a pas charge d'image mise en avant. */
.ag-challenge-card .ag-cc-media {
  position: relative;
  display: block;
  height: 172px;
  background: var(--ag-navy);
  overflow: hidden;
}
.ag-challenge-card .ag-cc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ag-challenge-card:hover .ag-cc-media img { transform: scale(1.06); }

/* Le degrade doit deja etre dense a mi-hauteur : sinon un titre sur deux lignes
   se pose sur la partie claire de la photo et devient illisible. */
.ag-challenge-card .ag-cc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,59,81,.22) 0%, rgba(5,42,59,.62) 42%, rgba(5,42,59,.90) 72%, rgba(5,42,59,.96) 100%);
}
.ag-challenge-card .ag-cc-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: block;
  padding: 20px 24px;
  text-shadow: 0 1px 10px rgba(3, 24, 34, 0.7);
}
.ag-challenge-card .ag-cc-num::before {
  content: counter(agcard, decimal-leading-zero);
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #FFA7B0;
  letter-spacing: 0.1em;
}
.ag-challenge-card .ag-cc-title {
  display: block;
  margin-top: 6px;
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.ag-challenge-card .ag-tile-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 26px 26px;
  flex: 1;
}
.ag-challenge-card .ag-cc-desc { font-size: 13.5px; line-height: 1.55; color: var(--ag-text-muted); }
.ag-challenge-card .ag-cc-go { margin-top: auto; font-weight: 700; font-size: 13.5px; color: var(--ag-red); }

/* La liste des cartes suit directement le bandeau : la respiration complete de
   .ag-section y ferait un trou. */
.ag-challenges-index .ag-page-hero + .ag-section { padding-top: 56px; }

@media (max-width: 900px) { .ag-challenge-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ag-challenge-cards { grid-template-columns: 1fr; } }

/* --- Page d'un challenge : les deux colonnes ----------------------------- */

/* Reprend .ag-challenge-layout (partage avec les fiches mission) et l'ajuste aux
   valeurs de la maquette v8. min-width:0 : sans lui, le sommaire a defilement
   horizontal du mobile elargit sa colonne et fait deborder la page entiere. */
/* theme.css pose overflow:hidden sur toute balise <section> (regle "section",
   ligne 204). Un ancetre a overflow cache devient le repere d'un element
   position:sticky : la colonne de gauche etait donc decalee de 100 px des
   l'ouverture de la page, et ne se decollait jamais au defilement. On rend
   l'overflow visible sur les sections de ces deux gabarits, qui n'ont rien a
   rogner. */
.ag-challenge .ag-section,
.ag-challenges-index .ag-section { overflow: visible; }

/* Colonne a droite et non a gauche, et sans sommaire : c'est la variante 3 des
   trois presentees le 10/08, retenue a l'unanimite, que la maquette v8 applique
   aux cinq challenges. Le texte est premier dans le code, donc premier a la
   lecture et en haut de la pile sur telephone. */
.ag-challenge .ag-challenge-layout { grid-template-columns: 1fr 250px; gap: 56px; }
.ag-challenge .ag-challenge-layout > * { min-width: 0; }
.ag-challenge .ag-page-hero + .ag-section { padding-top: 56px; }

.ag-side-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-text-muted);
}

/* Interlocuteurs : l'encart suit la lecture. Pas de filet ni de retrait en
   haut, il est seul dans sa colonne. */
.ag-side-people {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ag-person { display: flex; align-items: flex-start; gap: 12px; }
.ag-person-photo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Initiales tant qu'aucune photo n'a ete chargee : le manque se voit, sans
   qu'une silhouette generique ne s'installe dans la page. */
.ag-person-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.ag-person-id { display: block; }
.ag-person-name { display: block; font-weight: 700; font-size: 14px; color: var(--ag-navy); }
.ag-person-role { display: block; font-size: 12.5px; color: var(--ag-text-muted); }
/* Description courte des interlocuteurs (classeur client du 19/09). */
.ag-person-bio { display: block; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ag-text-muted); }
.ag-side-btn { width: 100%; justify-content: center; margin-top: 20px; }

.ag-challenge-intro .ag-block-kicker { display: block; margin-bottom: 10px; }
.ag-challenge-intro h2 { margin-bottom: 18px; }
.ag-challenge-content p { color: var(--ag-text-muted); }

/* Le constructeur enveloppe le corps dans une ligne et une colonne dont les
   marges negatives sont prevues pour une pleine largeur : dans la colonne de
   droite, elles deborderaient. */
.ag-challenge-content .vc_row { margin-left: 0; margin-right: 0; }
.ag-challenge-content .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }

/* --- Une sous-problematique --------------------------------------------- */

/* Le numero est un compteur : le corps de la page n'en contient aucun. */
.ag-challenge-content { counter-reset: agcb; }

/* theme.css habille toute balise <section> : 1 px de filet gris en bas, fond
   blanc et overflow cache (regle "section", ligne 204). Ici les trois genent :
   la maquette separe les sous-problematiques par l'alternance blanc / gris et
   non par un filet, le fond blanc masquerait cette alternance, et l'overflow
   cache empecherait le numero de suivre la lecture. */
.ag-challenge-content .vc_row,
.ag-challenge-content .wpb_row { border-bottom: none; }

/* Le constructeur enveloppe le corps de la page dans une balise <section>, et
   theme.css rogne toute <section> (« overflow: hidden », regle "section" ligne
   204). Le fond gris d'une sous-problematique, qui deborde de 30 px de part et
   d'autre de la colonne de texte, etait donc coupe net a l'aplomb du texte :
   ses angles arrondis disparaissaient et il ne restait qu'un aplat rectangulaire
   colle au texte, la ou la maquette pose un pave detache aux bords adoucis. */
.ag-challenge-content .vc_row,
.ag-challenge-content .wpb_row,
.ag-challenge-content .vc_column_container { overflow: visible; }

.ag-cblock {
  border-bottom: none;
  overflow: visible;
  background: transparent;
  counter-increment: agcb;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 26px;
  align-items: start;
  padding: 34px 0;
  /* Le bandeau est colle en haut : sans cette reserve, un saut depuis le
     sommaire poserait le titre de la section dessous. */
  scroll-margin-top: 110px;
}
.ag-cblock .ag-cb-num {
  position: sticky;
  top: 110px;
  padding-right: 22px;
  border-right: 2px solid var(--ag-grey-border);
  font-family: 'dolce', 'Montserrat', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: var(--ag-red);
}
.ag-cblock .ag-cb-num::before { content: counter(agcb, decimal-leading-zero); }

/* Une bande grise sur deux, pour casser l'enchainement titre / paragraphe /
   titre / paragraphe releve en reunion (suggestion de Racha, 10/08). La marge
   negative compense le retrait : le texte des blocs gris reste aligne sur celui
   des blocs blancs, seul le fond deborde.

   Le debordement est dose selon la largeur de l'ecran. Le contenu est centre
   dans une colonne de 1180 px bordee de 24 px de marge : au-dela de 1192 px de
   large, il reste assez de place pour les 30 px de la maquette ; en dessous, un
   debordement de 30 px sortirait de l'ecran et le coin arrondi de gauche serait
   coupe. On se contente alors de 12 px, qui suffisent a detacher le pave. */
.ag-cblock:nth-of-type(even) {
  background: var(--ag-grey-bg);
  border-radius: 18px;
  padding: 34px 12px;
  margin: 10px -12px;
}
@media (min-width: 1192px) {
  .ag-cblock:nth-of-type(even) { padding: 34px 30px; margin: 10px -30px; }
}
.ag-cblock:nth-of-type(even) .ag-cb-num { border-right-color: #CBD3D8; }

/* Le titre est un h3 : .ag-section h3 lui donne deja Raleway et la casse
   normale (voir la regle en fin de section 7), il ne reste que la taille. */
.ag-cblock .ag-cb-title {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.ag-cblock .ag-cb-text p { color: var(--ag-text-muted); }
.ag-cblock .ag-cb-text p:last-child { margin-bottom: 0; }

.ag-expertises-title {
  display: block;
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-navy);
}
.ag-expertises-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}
.ag-expertises-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ag-text-muted);
}
.ag-expertises-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-red);
}

@media (max-width: 860px) {
  .ag-challenge .ag-challenge-layout { grid-template-columns: 1fr; gap: 30px; }
  /* En une colonne l'encart passe sous le texte : il n'a plus de bord de page
     pour se detacher, un fond gris le distingue. */
  .ag-challenge .ag-challenge-side {
    position: static;
    padding: 22px;
    background: var(--ag-grey-bg);
    border-radius: 16px;
  }
  /* En une colonne, le texte occupe toute la largeur utile : le fond gris n'a
     plus de place ou deborder, il s'aligne sur le texte et se contente de son
     propre retrait. Sans cela il passerait sous le bord de l'ecran et ferait
     apparaitre une barre de defilement horizontale. */
  .ag-cblock:nth-of-type(even) { padding: 26px 20px; margin: 10px 0; }
}
@media (max-width: 700px) {
  .ag-cblock { grid-template-columns: 1fr; gap: 8px; }
  .ag-cblock .ag-cb-num {
    position: static;
    width: 56px;
    padding: 0 0 8px;
    border-right: none;
    border-bottom: 2px solid var(--ag-grey-border);
  }
  .ag-expertises-list { grid-template-columns: 1fr; }
}

/* --- Image d'illustration ------------------------------------------------ */

/* Le voile est ce qui unifie des photos d'origines differentes : sans lui, une
   photo de bureau et une photo d'aeroport n'ont ni la meme lumiere ni la meme
   dominante. Version legere quand la photo est le sujet, appuyee quand elle
   n'est qu'un decor. */
.ag-media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ag-navy);
  isolation: isolate;
  margin: 26px 0;
}
.ag-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video (bloc « Image d'illustration » en mode video) : format 16/9, la
   hauteur saisie couperait l'image du lecteur. */
.ag-media--video { aspect-ratio: 16 / 9; }
.ag-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(7,59,81,.60) 0%, rgba(31,73,125,.28) 48%, rgba(229,25,44,.16) 100%);
  mix-blend-mode: multiply;
}
.ag-media--light::after {
  background: linear-gradient(145deg, rgba(7,59,81,.26) 0%, rgba(31,73,125,.10) 55%, rgba(229,25,44,.10) 100%);
}
/* Sans voile : capture d'ecran ou schema, dont les couleurs sont l'information.
   Un filet gris remplace le fond bleu, qui ferait un liseré sombre autour. */
.ag-media--plain { background: #fff; box-shadow: 0 0 0 1px rgba(7, 59, 81, 0.12); }
.ag-media--plain::after { display: none; }

/* Cadre rouge decale derriere la photo — option « Cadre rouge decale » du bloc
   Photo, reprise du .media-accent de la maquette. Il casse le rectangle net et
   pose la couleur de la charte la ou il n'y a que du texte. */
.ag-media-accent { position: relative; margin: 26px 0; }
.ag-media-accent > .ag-media { position: relative; z-index: 1; margin: 0; }
.ag-media-accent::before {
  content: "";
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 76%;
  height: 74%;
  border: 3px solid var(--ag-red);
  border-radius: 22px;
  z-index: 0;
}
/* Sous 700 px, le cadre mordrait sur le bord de l'ecran. */
@media (max-width: 700px) { .ag-media-accent::before { display: none; } }

/* --- « Notre méthode » ---------------------------------------------------- */

.ag-methode {
  background: var(--ag-navy);
  border-radius: 18px;
  padding: 34px 30px;
  color: #fff;
  margin: 34px 0;
}
.ag-methode .ag-block-kicker { color: #F1808B; }
.ag-methode h3 { color: #fff !important; margin-bottom: 24px; }
.ag-methode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ag-methode-item h4 { color: #fff !important; font-size: 15px; margin: 0 0 8px; }
/* Petit trait rouge au-dessus de chaque pilier : il tient lieu de puce. */
.ag-methode-item h4::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ag-red);
  margin-bottom: 12px;
}
.ag-methode-item p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0; }
@media (max-width: 820px) {
  .ag-methode-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Témoignage en fin de page ------------------------------------------- */

.ag-temoignage {
  border-left: 3px solid var(--ag-red);
  padding-left: 26px;
  margin: 34px 0;
}
.ag-temoignage-logo { height: 30px; width: auto; margin-bottom: 16px; display: block; }
.ag-temoignage blockquote {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ag-navy);
  font-style: italic;
}
.ag-temoignage-auteur { display: flex; flex-direction: column; gap: 2px; }
.ag-temoignage-auteur strong { font-family: 'Raleway', sans-serif; font-size: 15px; color: var(--ag-navy); }
.ag-temoignage-auteur span { font-size: 13px; color: var(--ag-text-muted); }
.ag-temoignage-auteur .ag-temoignage-annee { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ag-red); }

/* ==========================================================================
   9 · Page R'Optim et blocs communs (port maquette v8, 03/09/2026)

   Le gabarit page-roptim.php ne pose que le bandeau : tout le reste de la page
   est compose dans le constructeur avec les elements de la categorie
   Aerogestion. Les regles ci-dessous habillent ces elements, qui sont tous
   reutilisables ailleurs — c'est le sens de leurs noms, « texte + visuel »,
   « points forts », « titre de section », « boutons », « vos interlocuteurs »,
   et non « bloc R'Optim 1 », « bloc R'Optim 2 ».
   ========================================================================== */

/* --- Texte + visuel (ag_duo) --------------------------------------------- */

.ag-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.ag-duo-body > *:last-child { margin-bottom: 0; }
.ag-duo-body p { margin-bottom: 26px; max-width: 52ch; }
.ag-duo--visuel-gauche .ag-duo-body { order: 2; }
.ag-duo--visuel-gauche .ag-duo-visual { order: 1; }

.ag-duo-visual {
  position: relative;
  align-self: stretch;
  min-height: 300px;
  border-radius: 18px;
  overflow: hidden;
}
.ag-duo-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Capture d'ecran (voir duo.php) : montree entiere, jamais recadree, mais avec
   l'allure des photos du bloc. Elle deborde du conteneur vers le bord de la
   page pour etre lisible, et se fond dans le fond cote texte, comme le fondu
   des photos. Pas de fondu haut et bas : il effacerait les menus de l'outil. */
.ag-section--capture { overflow: hidden; }
/* La capture passe sous le texte, fondue : le texte reste au-dessus. */
.ag-section--capture .ag-duo-body { position: relative; z-index: 1; }
.ag-duo-visual--capture {
  --ag-fondu: #ffffff;
  --ag-fondu-0: rgba(255, 255, 255, 0);
  overflow: visible;
  align-self: center;
  min-height: 0;
  border-radius: 0;
}
.ag-section--grey .ag-duo-visual--capture {
  --ag-fondu: var(--ag-grey-bg);
  --ag-fondu-0: rgba(242, 242, 242, 0);
}
.ag-capture-scene {
  position: relative;
  overflow: hidden;
  width: 142%;
  margin-left: -36%;
}
.ag-duo--visuel-gauche .ag-capture-scene { margin-left: -6%; }
.ag-duo-visual--capture .ag-capture-scene img {
  position: static;
  display: block;
  /* Le bord cote texte (menu lateral de l'outil) passe sous le fondu : on en
     rogne une partie pour que la courbe prenne la place. */
  width: 112%;
  max-width: none;
  margin-left: -12%;
  height: auto;
  object-fit: contain;
}
.ag-capture-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ag-fondu) 0%, var(--ag-fondu) 24%, var(--ag-fondu-0) 50%);
}
.ag-duo--visuel-gauche .ag-capture-scene::after {
  background: linear-gradient(270deg, var(--ag-fondu) 0%, var(--ag-fondu) 24%, var(--ag-fondu-0) 50%);
}
@media (max-width: 900px) {
  .ag-capture-scene,
  .ag-duo--visuel-gauche .ag-capture-scene { width: 100%; margin-left: 0; }
  .ag-duo-visual--capture .ag-capture-scene img { width: 100%; margin-left: 0; }
  .ag-capture-scene::after { display: none; }
}

/* Le visuel se fond dans le fond de page au lieu de s'arreter sur un bord net
   (reunion du 10/08). Le degrade part de la couleur du fond : deux variables
   plutot qu'une, parce qu'un degrade qui finit sur du blanc transparent laisse
   un voile laiteux quand il court sur du gris. Les sections grises redefinissent
   donc les deux. */
.ag-fondu {
  --ag-fondu: #ffffff;
  --ag-fondu-0: rgba(255, 255, 255, 0);
}
.ag-section--grey .ag-fondu {
  --ag-fondu: var(--ag-grey-bg);
  --ag-fondu-0: rgba(242, 242, 242, 0);
}
.ag-fondu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ag-fondu) 0%, var(--ag-fondu-0) 55%),
    linear-gradient(0deg, var(--ag-fondu) 0%, var(--ag-fondu-0) 28%, var(--ag-fondu-0) 72%, var(--ag-fondu) 100%);
}
/* Visuel a gauche : le fondu part du bord gauche, cote texte. */
.ag-duo--visuel-gauche .ag-fondu::after {
  background:
    linear-gradient(270deg, var(--ag-fondu) 0%, var(--ag-fondu-0) 55%),
    linear-gradient(0deg, var(--ag-fondu) 0%, var(--ag-fondu-0) 28%, var(--ag-fondu-0) 72%, var(--ag-fondu) 100%);
}

@media (max-width: 900px) {
  .ag-duo { grid-template-columns: 1fr; }
  .ag-duo-visual { min-height: 220px; }
  .ag-duo--visuel-gauche .ag-duo-body { order: 0; }
  .ag-duo--visuel-gauche .ag-duo-visual { order: 0; }
  /* Empile : le fondu passe du haut et du bas, plus des cotes. */
  .ag-fondu::after,
  .ag-duo--visuel-gauche .ag-fondu::after {
    background: linear-gradient(0deg, var(--ag-fondu) 0%, var(--ag-fondu-0) 34%, var(--ag-fondu-0) 66%, var(--ag-fondu) 100%);
  }
}

/* --- Video : le lecteur n'arrive qu'au clic ------------------------------ */

/* Tant que le visiteur n'a pas clique, il n'y a dans la page qu'une image et un
   bouton. C'est le seul moyen qu'une page qui porte une video s'ouvre aussi
   vite qu'une page qui n'en porte pas : une video YouTube posee en dur coûte
   pres d'un mega-octet de scripts avant meme le premier defilement. */
.ag-video .ag-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 3;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(229, 25, 44, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(7, 59, 81, 0.28);
  transition: transform 0.18s ease, background 0.18s ease;
}
.ag-video .ag-video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.ag-video .ag-video-play:hover { background: var(--ag-red); transform: scale(1.06); }
.ag-video .ag-video-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Lecture lancee : le voile de fondu et l'image d'attente laissent la place au
   lecteur, qui occupe tout le cadre. */
.ag-video.is-playing::after { content: none; }
.ag-video.is-playing img,
.ag-video.is-playing .ag-video-play { display: none; }
.ag-video iframe,
.ag-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* Intitule du bouton de lecture : lu par les lecteurs d'ecran, invisible a
   l'ecran. Le theme ne fournit pas cette classe. */
.ag-roptim .screen-reader-text,
.ag-video .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Points forts (ag_atouts) -------------------------------------------- */

.ag-atouts .ag-section-head { margin-bottom: 30px; }
.ag-atouts .ag-grid { margin: 0; }
/* Respiration avant le bloc suivant : sans elle, le titre de la section
   d'apres se colle au bas des cartes. */
.ag-atouts { margin-bottom: 56px; }

.ag-carte {
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 14px;
  padding: 26px;
}
.ag-carte h3 { font-size: 17px; margin: 0 0 8px; }
.ag-carte p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--ag-text-muted); }

/* Pastille du pictogramme. Rouge pale plutot que bleu : demande d'Aurelie,
   reunion du 10/08 (« les pictos, tu peux les mettre rouges, ca alterne un peu,
   ca fait un peu de couleur »). Le trace prend la couleur du texte de la
   pastille, il n'y a donc rien a redessiner pour changer de teinte. */
.ag-icone {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: rgba(229, 25, 44, 0.10);
  color: var(--ag-red);
}
.ag-icone svg { width: 22px; height: 22px; display: block; }

/* --- Boutons en fin de section (ag_boutons) ------------------------------ */

.ag-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- Section a deux colonnes : contenu + encart interlocuteurs ------------ */

/* La ligne du constructeur porte la classe ag-row-side (champ « Extra class
   name » de ses reglages) et devient une grille : la colonne large a gauche,
   l'encart etroit a droite. Memes proportions que les pages challenge, ou la
   variante « colonne a droite, interlocuteurs seuls » a ete retenue a
   l'unanimite le 10/08.

   Ce sont deux vraies colonnes du constructeur : la cliente y depose, deplace
   ou retire des blocs comme partout ailleurs. Les reglages ci-dessous ne font
   qu'annuler la grille Bootstrap de WPBakery, qui poserait des colonnes
   flottantes de largeur fixe. */
/* Le gabarit de ligne du theme (vc_templates/vc_row.php) sort une balise
   <section> qui enveloppe ses colonnes dans un .container Bootstrap : c'est ce
   conteneur, et non la ligne elle-meme, qui porte les deux colonnes. */
/* Marges laterales negatives de WPBakery neutralisees : sans cela la ligne
   depasse de 15 px de chaque cote et la page se met a defiler horizontalement. */
.ag-row-side { padding: 0; margin-left: 0; margin-right: 0; }

/* Bootstrap pose deux pseudo-elements de nettoyage de flottants sur .container.
   Dans une grille, ces pseudo-elements comptent comme des cases : ils prenaient
   la premiere colonne et decalaient les deux vraies colonnes d'un cran. */
.ag-row-side > .container::before,
.ag-row-side > .container::after { content: none; }

.ag-row-side > .container {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 56px;
  align-items: start;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.ag-row-side > .container > .wpb_column {
  width: auto;
  float: none;
  min-width: 0;
  padding: 0;
}
.ag-row-side .vc_column-inner { padding: 0 !important; }

/* La colonne de l'encart prend toute la hauteur de la ligne : sans cela elle
   s'arrete a la hauteur de l'encart, et un element colle (sticky) n'a aucune
   place pour suivre le defilement. */
.ag-row-side > .container > .wpb_column:last-child { align-self: stretch; }
.ag-row-side > .container > .wpb_column:last-child > .vc_column-inner,
.ag-row-side > .container > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper { height: 100%; }
.ag-row-side .wpb_wrapper { margin: 0; }
.ag-row-side .wpb_wrapper > *:last-child { margin-bottom: 0; }

/* theme.css pose overflow:hidden sur toute balise <section> (regle « section »,
   ligne 204) — et la section comme la ligne en sont. Un ancetre a debordement
   cache devient le repere d'un element position:sticky : l'encart resterait
   fige en haut de sa colonne au lieu de suivre la lecture. Meme correctif que
   sur les pages challenge. */
.vc_section.ag-section,
.ag-row-side { overflow: visible; }

/* Bouton a contour bleu — action secondaire de la charte, celle de la maquette
   (« Decouvrir le cabinet », « Decouvrez le detail de nos interventions »). Le
   theme n'apportait jusqu'ici que la version rouge pleine. */
.ag-btn-outline-navy {
  background: transparent;
  border-color: var(--ag-navy);
  color: var(--ag-navy);
}
.ag-btn-outline-navy:hover,
.ag-btn-outline-navy:focus { background: var(--ag-navy); color: #fff; text-decoration: none; }

/* La section qui l'enveloppe est une « Section » du constructeur a laquelle on
   a donne les classes ag-section / ag-section--grey : elle apporte le fond gris
   pleine largeur et la respiration verticale. Reste a lui retirer les marges
   laterales de WPBakery, qui doubleraient celles de la ligne. */
.vc_section.ag-section {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* L'encart suit la lecture, comme sur les pages challenge. Il ne peut coller
   que si aucun ancetre ne cache son debordement : le gabarit de cette page
   n'emboite rien dans une balise <section>, a laquelle theme.css pose
   overflow:hidden (regle « section », ligne 204). */
.ag-side-standalone {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .ag-row-side > .container { grid-template-columns: 1fr; gap: 34px; }
  /* Sur telephone l'encart passe sous le texte et redevient une ligne : colle
     en haut, il masquerait le contenu qu'il accompagne. */
  .ag-side-standalone { position: static; }
  .ag-side-standalone .ag-side-people { flex-direction: row; flex-wrap: wrap; gap: 20px 26px; }
  .ag-side-standalone .ag-side-eyebrow { flex: 0 0 100%; margin-bottom: 0; }
  .ag-side-standalone .ag-side-btn { width: auto; align-self: flex-start; }
}

/* ==========================================================================
   PAGES « ILS TRAVAILLENT AVEC NOUS », « LE CABINET » ET « NOUS CONTACTER »
   — port de la maquette v8 (03/09/2026)

   Six blocs nouveaux, tous poses par des elements du constructeur (voir
   framework/inc/vc-elements.php). Ils reprennent les composants deja definis
   plus haut — .ag-section, .ag-grid, .ag-logos, .ag-btn — et n'ajoutent que ce
   qui leur est propre.
   ========================================================================== */

/* --- Texte de section, sur une ou deux colonnes (ag_texte) ---------------- */

.ag-texte-corps { color: var(--ag-text-muted); font-weight: 500; }
.ag-texte-corps > *:last-child { margin-bottom: 0; }

/* Colonnes typographiques et non grille : le texte se repartit tout seul, un
   paragraphe rallonge n'oblige a rien rééquilibrer a la main. break-inside
   empeche un paragraphe d'etre coupe en deux d'une colonne a l'autre. */
.ag-texte-corps--2col { column-count: 2; column-gap: clamp(30px, 5vw, 64px); }
.ag-texte-corps--2col > * { break-inside: avoid; }
@media (max-width: 700px) {
  .ag-texte-corps--2col { column-count: 1; }
}

/* --- Mosaique de photos (ag_mosaique) ------------------------------------ */

/* Quatre colonnes de cases carrees ; une photo « large » en occupe deux de
   front, une photo « haute » deux en hauteur. C'est ce qui donne le rythme
   irregulier de la maquette sans avoir a placer quoi que ce soit a la main :
   les cases se rangent d'elles-memes. */
.ag-mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: 24px;
}
.ag-mosaique-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ag-grey-bg);
}
.ag-mosaique-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-mosaique-item--large { grid-column: span 2; }
.ag-mosaique-item--haute { grid-row: span 2; }
/* Deux cases sur deux : la photo de groupe, en paysage, qui ne tiendrait ni
   dans une case haute ni dans une case large sans perdre des visages. */
.ag-mosaique-item--grande { grid-column: span 2; grid-row: span 2; }

/* Le meme voile de charte que les autres illustrations du site : c'est lui qui
   fait tenir ensemble des photos prises a des moments differents. */
.ag-mosaique-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 59, 81, 0) 45%, rgba(7, 59, 81, 0.22) 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .ag-mosaique { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
}
@media (max-width: 700px) {
  .ag-mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 16px; }
  /* Sur telephone une case large tiendrait toute la largeur et casserait la
     mosaique : elle redevient une case simple. */
  .ag-mosaique-item--large { grid-column: span 1; }
}

/* --- Portraits : fondateurs et equipe (ag_portraits) --------------------- */

.ag-portraits { margin-top: 0; }
.ag-portrait { text-align: center; }
.ag-portrait-nom {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  color: var(--ag-navy);
  margin: 0 0 4px;
}
.ag-portrait-role { font-size: 13px; color: var(--ag-red); font-weight: 700; margin-bottom: 10px; }
.ag-portrait-bio { font-size: 14px; line-height: 1.6; color: var(--ag-text-muted); margin: 0; }
.ag-portrait-linkedin {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ag-navy);
  text-decoration: none;
}
.ag-portrait-linkedin::before { content: "in · "; opacity: 0.6; }
.ag-portrait-linkedin:hover { color: var(--ag-red); text-decoration: underline; }

/* Initiales tant qu'aucune photo n'a ete chargee : le manque se voit, sans
   qu'une silhouette generique ne s'installe. Meme parti pris que l'encart
   « Vos interlocuteurs ». */
.ag-portrait-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Presentation « equipe » : vignette ronde, pour une liste longue. */
.ag-portraits--equipe .ag-portrait-photo {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ag-grey-bg);
}
.ag-portraits--equipe .ag-portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-portraits--equipe .ag-portrait-initials { font-size: 26px; }

/* Presentation « fondateur » : grand portrait, voile de charte allege et cadre
   rouge decale (traitement retenu au point V6-10). Le cadre est un
   pseudo-element : il ne touche pas au fichier image, et suit la photo quelle
   que soit sa taille. */
.ag-portraits--fondateur .ag-portrait-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 26px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ag-grey-bg);
}
.ag-portraits--fondateur .ag-portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-portraits--fondateur .ag-portrait-initials { font-size: 42px; }
.ag-portraits--fondateur .ag-portrait-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 59, 81, 0.14) 0%, rgba(7, 59, 81, 0) 55%);
  pointer-events: none;
}
/* Le cadre decale est pose sur le conteneur du portrait, pas sur la photo :
   une bordure posee sur la photo elle-meme serait rognee par l'overflow qui
   arrondit ses angles. */
.ag-portraits--fondateur .ag-portrait { position: relative; text-align: left; }
/* Le cadre depasse en bas a droite de la photo, qui le recouvre partout
   ailleurs. Il est donc pose SOUS la photo dans le meme contexte
   d'empilement — et non en z-index negatif, qui le faisait passer derriere le
   fond de la section et disparaitre completement (constate le 03/09). */
.ag-portraits--fondateur .ag-portrait::before {
  content: "";
  position: absolute;
  /* Meme taille que la photo, decale de 16 px vers le bas a droite : le cadre
     depasse donc de 16 px de ces deux cotes et se voit, la photo le recouvrant
     partout ailleurs. Un cadre plus petit que la photo, comme dans une premiere
     version, etait entierement masque par elle. Les 16 px de debordement
     tiennent dans la gouttiere de 24 px de la grille. */
  left: 16px;
  top: 16px;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 2px solid var(--ag-red);
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
}
/* La photo repasse devant le cadre : sans cela, le cadre la traverserait. */
.ag-portraits--fondateur .ag-portrait-photo { z-index: 1; }
@media (max-width: 600px) {
  .ag-portraits--fondateur .ag-portrait::before { display: none; }
}
/* Des portraits plus petits que la pleine largeur (demande du 25/09) : la
   grille est resserree au centre, chaque portrait y perd un bon quart. */
.ag-portraits--fondateur {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Presentation « survol » : la photo d'abord. Nom et fonction sous la photo,
   parcours par-dessus la photo, sur un voile de charte, au passage de la
   souris, au clavier (la carte prend le focus) ou d'un toucher (.is-open,
   pose par site-2026.js). */
.ag-portraits--survol .ag-portrait { text-align: left; outline: none; }
.ag-portraits--survol .ag-portrait-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ag-grey-bg);
}
.ag-portraits--survol .ag-portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.5s ease;
}
.ag-portraits--survol .ag-portrait-initials { font-size: 42px; }
.ag-portraits--survol .ag-portrait-bio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  background: linear-gradient(180deg, rgba(7, 59, 81, 0.55) 0%, rgba(5, 42, 59, 0.94) 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Signe discret qu'il y a quelque chose sous la photo : un « + » en coin, qui
   s'efface quand le parcours est ouvert. */
.ag-portraits--survol .ag-portrait[tabindex] .ag-portrait-photo { cursor: pointer; }
.ag-portraits--survol .ag-portrait[tabindex] .ag-portrait-photo::after {
  content: "+";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--ag-red);
  font: 700 20px/32px 'Montserrat', sans-serif;
  text-align: center;
  box-shadow: 0 2px 8px rgba(5, 42, 59, 0.25);
  transition: opacity 0.3s ease;
}
.ag-portraits--survol .ag-portrait:hover .ag-portrait-bio,
.ag-portraits--survol .ag-portrait:focus-within .ag-portrait-bio,
.ag-portraits--survol .ag-portrait.is-open .ag-portrait-bio { opacity: 1; }
.ag-portraits--survol .ag-portrait:hover .ag-portrait-photo::after,
.ag-portraits--survol .ag-portrait:focus-within .ag-portrait-photo::after,
.ag-portraits--survol .ag-portrait.is-open .ag-portrait-photo::after { opacity: 0; }
.ag-portraits--survol .ag-portrait:hover .ag-portrait-photo img { transform: scale(1.03); }
.ag-portraits--survol .ag-portrait:focus-visible .ag-portrait-photo {
  box-shadow: 0 0 0 3px var(--ag-red);
}
/* Quatre consultants par ligne, au format des portraits des associes
   (demande du 01/10/2026) : meme grille resserree au centre. La photo est plus
   petite, le parcours qui la recouvre au survol passe donc en plus petit. */
.ag-portraits--survol.ag-grid-4 {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.ag-portraits--survol.ag-grid-4 .ag-portrait-bio { padding: 14px; font-size: 12px; line-height: 1.45; }
.ag-portraits--survol.ag-grid-4 .ag-portrait-nom { font-size: 15px; }
.ag-portraits--survol.ag-grid-4 .ag-portrait[tabindex] .ag-portrait-photo::after { right: 8px; bottom: 8px; width: 26px; height: 26px; font-size: 17px; line-height: 26px; }
@media (max-width: 600px) {
  /* Deux photos de front sur telephone. Un parcours ne tiendrait pas sur une
     photo de 150 px : la carte touchee passe en pleine largeur, le temps de le
     lire (dense : les autres cartes comblent la place qu'elle laisse). */
  .ag-portraits--survol.ag-grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; }
  .ag-portraits--survol .ag-portrait.is-open { grid-column: 1 / -1; }
  .ag-portraits--survol .ag-portrait-bio { padding: 18px; font-size: 13px; line-height: 1.5; }
  .ag-portraits--survol .ag-portrait-nom { font-size: 15px; }
}

/* Presentation « fiche au clic » (01/10) : la grille ne montre que photo, nom
   et fonction ; le parcours s'ouvre dans une fenetre, en taille de lecture.
   A 4 par ligne, meme largeur que les portraits des associes. */
.ag-portraits--fiche { row-gap: 44px; }
.ag-portraits--fiche.ag-grid-4 { max-width: 860px; margin-left: auto; margin-right: auto; }
.ag-portraits--fiche .ag-portrait { text-align: left; }
.ag-portraits--fiche .ag-portrait.has-fiche { cursor: pointer; }
.ag-portraits--fiche .ag-portrait-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ag-grey-bg);
}
.ag-portraits--fiche .ag-portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.5s ease;
}
.ag-portraits--fiche .ag-portrait-initials { font-size: 42px; }
.ag-portraits--fiche .ag-portrait-nom { font-size: 16px; transition: color 0.2s ease; }
.ag-portraits--fiche .ag-portrait.has-fiche:hover .ag-portrait-photo img { transform: scale(1.04); }
.ag-portraits--fiche .ag-portrait.has-fiche:hover .ag-portrait-nom { color: var(--ag-red); }
/* Le bouton couvre la photo : c'est lui qui prend le focus au clavier. */
.ag-portrait-ouvrir {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
.ag-portrait-ouvrir:focus-visible { box-shadow: inset 0 0 0 3px var(--ag-red); outline: none; }
.ag-portraits--fiche .ag-portrait.has-fiche .ag-portrait-photo::after {
  content: "+";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--ag-red);
  font: 700 18px/28px 'Montserrat', sans-serif;
  text-align: center;
  box-shadow: 0 2px 8px rgba(5, 42, 59, 0.25);
  pointer-events: none;
  transition: right 0.35s ease, bottom 0.35s ease, width 0.35s ease, height 0.35s ease,
              font-size 0.35s ease, line-height 0.35s ease;
}
/* Au survol (ou au clavier) : voile bleu de la charte sur la photo, et le « + »
   glisse du coin vers le centre en grossissant (demande du 01/10). Sur un
   ecran tactile, sans survol, il reste dans le coin. */
.ag-portraits--fiche .ag-portrait.has-fiche .ag-portrait-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(7, 59, 81, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ag-portraits--fiche .ag-portrait.has-fiche:hover .ag-portrait-photo::before,
.ag-portraits--fiche .ag-portrait.has-fiche:has(.ag-portrait-ouvrir:focus-visible) .ag-portrait-photo::before { opacity: 1; }
.ag-portraits--fiche .ag-portrait.has-fiche:hover .ag-portrait-photo::after,
.ag-portraits--fiche .ag-portrait.has-fiche:has(.ag-portrait-ouvrir:focus-visible) .ag-portrait-photo::after {
  right: calc(50% - 26px);
  bottom: calc(50% - 26px);
  width: 52px;
  height: 52px;
  font-size: 30px;
  line-height: 52px;
}

/* La fenetre du parcours. */
.ag-fiche {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: var(--ag-text);
  box-shadow: 0 24px 60px rgba(5, 42, 59, 0.35);
  overflow: auto;
}
.ag-fiche[open] { display: grid; grid-template-columns: 300px 1fr; }
.ag-fiche::backdrop { background: rgba(5, 42, 59, 0.6); }
html.ag-fiche-ouverte { overflow: hidden; }
.ag-fiche-photo { position: relative; min-height: 100%; background: var(--ag-grey-bg); }
.ag-fiche-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.ag-fiche-photo .ag-portrait-initials { font-size: 56px; }
.ag-fiche-texte { padding: 40px 40px 36px; align-self: center; }
.ag-fiche-nom {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ag-navy);
  margin: 0 0 6px;
}
.ag-fiche .ag-portrait-role { margin-bottom: 14px; }
.ag-fiche-bio { font-size: 16px; line-height: 1.7; color: var(--ag-text); margin: 18px 0 20px; }
.ag-fiche-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--ag-grey-bg);
  color: var(--ag-navy);
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}
.ag-fiche-fermer:hover { background: var(--ag-red); color: #fff; }
@media (max-width: 700px) {
  .ag-fiche[open] { grid-template-columns: 1fr; }
  .ag-fiche-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .ag-fiche-texte { padding: 24px 22px 28px; }
  .ag-fiche-nom { font-size: 20px; }
  .ag-fiche-bio { font-size: 15px; }
}
@media (max-width: 600px) {
  .ag-portraits--fiche.ag-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .ag-portraits--fiche .ag-portrait-nom { font-size: 15px; }
}

/* --- Carte des pays d'intervention (ag_carte_pays) ----------------------- */

.ag-map { display: grid; gap: 24px; justify-items: center; }
.ag-map-canvas { width: 100%; max-width: 860px; }
.ag-map-canvas img { width: 100%; height: auto; display: block; border-radius: 12px; }

.ag-map-pays { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ag-map-pays span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ag-navy);
  background: var(--ag-grey-bg);
  border-radius: 100px;
  padding: 5px 13px;
}
/* La pastille en pointilles dit que la liste n'est pas close, sans avancer de
   pays non confirme. Elle disparait quand son champ est vide. */
.ag-map-pays .ag-map-pays-attente {
  background: transparent;
  border: 1px dashed var(--ag-grey-border);
  color: var(--ag-text-muted);
  font-style: italic;
  font-weight: 500;
}

/* Rappel « Nos missions » place sous la carte : c'est la seconde option
   retenue en reunion du 10/08, la variante flottante recouvrait le contenu sur
   un ecran de largeur courante. */
.ag-map-cta {
  display: block;
  margin-top: 8px;
  background: var(--ag-red);
  color: #fff;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 14px 34px rgba(229, 25, 44, 0.28);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ag-map-cta-titre {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.ag-map-cta-sous { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.ag-map-cta:hover,
.ag-map-cta:focus { background: var(--ag-red-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }

/* --- Logos clients par secteur (ag_logos_secteurs) ----------------------- */

/* Bandeau illustre en ouverture du bloc. */
.ag-bandeau {
  position: relative;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 34px;
}
.ag-bandeau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 59, 81, 0.88) 0%, rgba(7, 59, 81, 0.35) 70%, rgba(7, 59, 81, 0.15) 100%);
}
.ag-bandeau-legende {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 34px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 19px;
  font-weight: 700;
}
.ag-bandeau-legende small {
  display: block;
  margin-top: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 700px) {
  .ag-bandeau { height: 150px; }
  .ag-bandeau-legende { font-size: 16px; padding: 18px 20px; }
}

.ag-secteurs { display: flex; flex-direction: column; }
.ag-secteur {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--ag-grey-border);
}
.ag-secteur:last-child { border-bottom: 1px solid var(--ag-grey-border); }
.ag-secteur-nom {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ag-navy);
  position: relative;
  padding-left: 16px;
}
/* Petit trait rouge en guise de puce, comme les piliers de « Notre methode ». */
.ag-secteur-nom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 2px;
  background: var(--ag-red);
}
/* Les logos d'une bande partent du bord gauche : centres, ils ne s'aligneraient
   pas d'une bande a l'autre. */
.ag-secteur .ag-logos { justify-content: flex-start; gap: 26px 40px; margin: 0; }
/* Logos plus petits que les 38 px par defaut (reunion du 23/09) : ils etaient
   plus imposants ici que dans la bande de l'accueil. */
.ag-secteur .ag-logos img { height: 28px; max-width: 110px; }

@media (max-width: 700px) {
  .ag-secteur { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; text-align: center; }
  .ag-secteur-nom { padding-left: 0; }
  .ag-secteur-nom::before { display: none; }
  .ag-secteur .ag-logos { justify-content: center; }
}

/* --- Formulaires Contact Form 7 : mention RGPD et champ piege (17/09) ---- */

/* Une ligne d'information sous les champs, a la place de la case a cocher de
   consentement : une demande de contact n'a pas besoin du consentement, il
   suffit d'informer (recommandation CNIL). */
.ag-form-mention {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ag-text-muted);
  margin: 0 0 16px;
}
.ag-form-mention a { color: inherit; text-decoration: underline; }

/* Champ piege anti-robots (framework/inc/anti-spam.php) : hors de l'ecran, pas
   en display:none, que certains robots savent reconnaitre. */
.ag-piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Formulaire dans un encadre (ag_formulaire) -------------------------- */

.ag-formulaire {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ag-grey-border);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 18px 46px rgba(7, 59, 81, 0.06);
}
.ag-section--grey .ag-formulaire { box-shadow: 0 18px 46px rgba(7, 59, 81, 0.08); }
/* .ag-section h2 (36 px) l'emporterait sur une classe seule : on nomme la
   balise pour reprendre la main sans recourir a !important. */
.ag-formulaire h2.ag-formulaire-titre { font-size: 22px; margin: 0 0 10px; }
.ag-formulaire-texte { margin: 0 0 24px; }

/* Contact Form 7 remis a plat, comme dans le bloc contact rouge de l'accueil,
   mais sur fond blanc : le theme met tous ses champs en transparent avec un
   texte clair, illisible ici. */
.ag-formulaire .wpcf7-form p { margin: 0 0 16px; }
.ag-formulaire input[type="text"],
.ag-formulaire input[type="email"],
.ag-formulaire input[type="tel"],
.ag-formulaire textarea,
.ag-formulaire select {
  width: 100%;
  background: var(--ag-grey-bg);
  border: 1px solid var(--ag-grey-border);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: var(--ag-text);
  box-shadow: none;
}
.ag-formulaire textarea { min-height: 150px; resize: vertical; }
/* Le theme passe le champ message en transparent (.wpcf7-form-control, plus
   precis que les regles ci-dessus) et espace les lettres de tous les champs :
   le message sortait en blanc au milieu de champs gris (constate le 17/09). */
.ag-formulaire .wpcf7-form-control.wpcf7-textarea { background: var(--ag-grey-bg); border: 1px solid var(--ag-grey-border); border-radius: 10px; padding: 13px 16px; }
.ag-formulaire .wpcf7-form-control,
.ag-formulaire input::placeholder,
.ag-formulaire textarea::placeholder { letter-spacing: normal; }

/* Intitules du formulaire — celui du code de securite notamment, que Contact
   Form 7 sort en texte brut au milieu des champs. */
.ag-formulaire label,
.ag-formulaire .wpcf7-form p > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ag-navy);
  margin-bottom: 6px;
}
/* La case a cocher du consentement garde son intitule sur la meme ligne. */
.ag-formulaire .wpcf7-acceptance label { display: inline; font-weight: 500; font-size: inherit; color: inherit; }
.ag-formulaire input::placeholder,
.ag-formulaire textarea::placeholder { color: var(--ag-text-muted); opacity: 1; }
.ag-formulaire input:focus,
.ag-formulaire textarea:focus,
.ag-formulaire select:focus {
  border-color: var(--ag-navy);
  background: #fff;
  outline: none;
}
/* Le theme pose .btn { opacity: .65 } sur tout bouton : le rouge de la charte
   en ressortait delave (constate le 03/09). */
.ag-formulaire input[type="submit"],
.ag-formulaire .wpcf7-submit {
  opacity: 1;
  height: auto;
  line-height: 1.4;
  text-transform: none;
  width: auto;
  background: var(--ag-red);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 100px;
  padding: 15px 30px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ag-formulaire input[type="submit"]:hover,
.ag-formulaire .wpcf7-submit:hover { background: var(--ag-red-dark); }

/* Messages de Contact Form 7 : le theme les laisse en blanc sur blanc. */
.ag-formulaire .wpcf7-not-valid-tip { color: var(--ag-red); font-size: 13px; margin-top: 6px; }
.ag-formulaire .wpcf7-response-output {
  border-radius: 10px;
  border-width: 1px;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--ag-text);
  margin: 18px 0 0;
}

/* --- Reglages ajoutes a deux blocs existants ----------------------------- */

/* « Points forts » posant sa propre section : la respiration verticale vient
   alors de la section, pas du bloc. */
.ag-atouts--section { margin-bottom: 0; }

/* Titre centre, comme « Ce qui nous distingue » dans la maquette v8. La regle
   .ag-section-head--center est deja definie plus haut ; il n'y a rien a
   ajouter ici, le gabarit pose simplement la classe. */

/* Boutons centres, pour la rangee qui suit un titre lui-meme centre
   (« Nous recrutons », page Le cabinet). */
.ag-boutons--centre { justify-content: center; }

/* ==========================================================================
   Pages legales — gabarit « Texte simple » (page-texte.php, 17/09/2026)

   Un texte long, saisi dans l'editeur classique : toute la mise en forme est
   ici, rien n'est regle dans la page. Les intertitres sont en Raleway et non
   en Dolce Vita : la police de la charte n'a pas les guillemets « », que ces
   textes emploient partout (« ci-apres le site »), et une capitale fantaisie
   se lit mal sur un titre de trois lignes.
   ========================================================================== */
.ag-texte-corps { max-width: 760px; }
.ag-texte-corps p,
.ag-texte-corps li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ag-text);
  text-align: left;
}
.ag-texte-corps p { margin: 0 0 14px; }
.ag-texte-corps ul,
.ag-texte-corps ol { margin: 0 0 18px; padding-left: 22px; }
.ag-texte-corps li { margin-bottom: 6px; }
.ag-texte-corps h2,
.ag-texte-corps h3,
.ag-texte-corps h4 {
  font-family: 'Raleway', sans-serif !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ag-navy);
  text-align: left;
}
.ag-texte-corps h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 48px 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--ag-grey-border);
}
.ag-texte-corps > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ag-texte-corps h3,
.ag-texte-corps h4 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.ag-texte-corps a { color: var(--ag-red); text-decoration: underline; word-break: break-word; }
@media (max-width: 600px) {
  .ag-texte-corps h2 { font-size: 20px; margin-top: 36px; padding-top: 22px; }
  .ag-texte-corps p,
  .ag-texte-corps li { font-size: 15px; }
}
/* Le titre officiel des mentions legales fait douze mots : a la taille des
   autres bandeaux, il prenait cinq lignes sur telephone. */
.ag-texte .ag-page-hero h1 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; }