/* Styles propres a a-propos.html.
   Sorti du <style> interne pour que la version anglaise partage
   exactement la meme feuille : un correctif ne se fait qu'une fois.
   Charge APRES jade.css, comme l'etait le bloc interne, donc
   l'ordre de cascade est inchange.
   Les url() portent ../ : dans une feuille CSS elles sont
   resolues depuis ce fichier, pas depuis la page. */
/* ---------- page À propos ---------- */
/* l'en-tête prend la couleur du hero de la page, pas l'or de l'accueil */
.header{background:#885BBC;color:#fff}

/* CTA : pastille blanche avec flèche, et bouton fantôme à côté */
.btn-blanc{background:#fff;color:var(--navy);box-shadow:0 8px 20px rgba(17,46,64,.14);padding:16px 28px}
.btn-blanc:hover{background:#fff;box-shadow:0 12px 26px rgba(17,46,64,.2)}
.btn .fleche{width:18px;height:18px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.btn-blanc:hover .fleche{transform:translateX(4px)}
.btn-fantome:hover .fleche{transform:translate(3px,-3px)}
.btn-fantome{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:var(--ink,var(--navy));padding:16px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn-fantome:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.8)}
.page-hero{background:var(--mauve);color:var(--navy);padding-block:clamp(54px,7vw,92px)}
.page-hero .eyebrow{color:currentColor;opacity:.75}
.page-hero h1 .mot{display:inline-block;white-space:nowrap;color:#fff;will-change:transform,opacity;transition:color .45s cubic-bezier(.2,.7,.3,1),opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.page-hero h1 .mot.out{opacity:.4;transform:translateY(8px)}
.page-hero .media::before{background:var(--navy)}
.hero-grille{display:grid;align-items:stretch}
.hero-grille .texte{display:flex;align-items:center;flex-direction:column;justify-content:center;
  padding-block:clamp(54px,7vw,92px);
  padding-left:max(clamp(16px,4vw,40px), calc(50vw - var(--wrap)/2));
  padding-right:clamp(24px,3.4vw,56px)}
.hero-grille .texte > div{width:100%}
@media (max-width:1100px){.hero-grille .texte{padding-inline:clamp(16px,4vw,40px);padding-block:clamp(40px,6vw,70px)}}
.page-hero h1{font-size:var(--t2);font-weight:900}
.page-hero p{font-size:18px;max-width:48ch;margin-top:20px}
.page-hero.studio .scene{display:none}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
/* hero studio : la photo EST le fond, la section reprend la couleur du plateau */
.page-hero.studio{--plateau:#885BBC;--plateau-figure:url("../images/figures/st-mauve.webp");--plateau-img:url("../images/hero-studio-mauve.webp");background:var(--plateau);color:#fff;padding:0;
  background-image:var(--plateau-img);background-repeat:no-repeat;background-position:right center;background-size:cover}
.page-hero.studio .hero-grille{grid-template-columns:minmax(0,1fr);min-height:clamp(460px,46vw,620px)}
.page-hero.studio .hero-grille .media{display:none}
.page-hero.studio .hero-grille .texte{max-width:none;padding-right:0;align-items:flex-start}
.page-hero.studio .hero-grille .texte > div{max-width:570px}
.page-hero.studio h1{font-size:var(--t2)}
.page-hero.studio .eyebrow{color:#fff;opacity:.78}
.page-hero.studio h1{color:#fff}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:var(--lemon)}
.page-hero.studio p{color:#fff;opacity:.88}
.page-hero.studio .btn-blanc{background:#fff;color:var(--navy)}
.page-hero.studio .btn-fantome{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(17,46,64,.3)}
.page-hero.studio .btn-fantome:hover{background:rgba(255,255,255,.32);border-color:#fff}
@media (max-width:1360px){
  .page-hero.studio{background-image:var(--plateau-figure);background-size:55% auto;background-position:right bottom;padding-bottom:50vw}
  .page-hero.studio .hero-grille .texte > div{max-width:none}
  .page-hero.studio h1{font-size:clamp(34px,4.3vw,56px)}
}
@media (max-width:640px){
  /* Deux boutons empiles de largeurs differentes, ca se voit tout de suite.
     Chaque groupe devient une colonne a la largeur du plus large, et toutes
     les rangees prennent la hauteur de la plus haute : meme reglage que
     l'en-tete de l'accueil, applique partout. */
  .ctas,.hero-ctas,.page-hero.studio .ctas,.service .ctas,.bande-fin .ctas{
    display:grid;grid-template-columns:minmax(0,max-content);grid-auto-rows:1fr;
    gap:12px;justify-content:start}
  .ctas .btn,.hero-ctas .btn,.page-hero.studio .ctas .btn,
  .service .ctas .btn,.bande-fin .ctas .btn{width:100%;justify-content:center}

  /* L'ordre demande au telephone : titre, photo, texte, bouton. La scene n'est
     plus un fond pose derriere la colonne de texte — a 375 px rien ne tient a
     cote de rien — elle prend sa propre bande entre le titre et le chapeau.
     Detouree, elle se pose sur l'aplat sans montrer son cadre, et la page
     retrouve la scene entiere, avec tout le monde dessus. */
  .page-hero.studio{padding-bottom:0;background-image:none}
  .page-hero.studio .hero-grille{min-height:0}
  .page-hero.studio .scene{display:block;width:100%;margin:26px 0 4px;
    aspect-ratio:1.26;
    background:var(--plateau-figure) center bottom/contain no-repeat}
  .page-hero.studio p:not(.eyebrow):not(.pastille){max-width:none}
}

section[id]{scroll-margin-top:92px}

/* histoire : deux colonnes de texte, le titre tient seul à gauche */
.histoire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start}
.histoire .titre{position:sticky;top:110px}
.histoire h2{font-size:var(--t3);font-weight:900;margin-top:14px}
.histoire h2 em{font-style:normal;color:var(--teal-txt)}
.histoire .depuis{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
/* 18 px, comme toutes les amorces du site : c'etait le seul 19 px de
   l'ensemble, et l'ecart avec le corps a 16 se lisait comme un changement
   de police. Le marine face au gris du corps reste, lui : c'est la
   convention qui separe partout l'amorce du texte courant. */
.histoire .amorce{font-size:18px;line-height:1.55;color:var(--navy);max-width:54ch}
.histoire .corps > p + p{margin-top:18px;color:var(--text);max-width:54ch}
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-weight:500}
.checks li::before{content:"";box-sizing:border-box;width:26px;height:26px;border-radius:50%;background:var(--teal);margin-top:1px;padding:6px;background-clip:content-box;border:2px solid var(--teal)}
@media (max-width:900px){.histoire{grid-template-columns:1fr;gap:28px}.histoire .titre{position:static}}

/* chiffres : même grille et même filet que la bande de logos */
.stats-band{padding-block:26px;border-bottom:1px solid var(--line)}
.stats-band .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;min-height:82px}
.stats-band p{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.stats{gap:72px}
.stat{display:flex;flex-direction:column;gap:8px;list-style:none;color:#5E6A6E;transition:color .25s cubic-bezier(.2,.7,.3,1)}
.track li.stat{color:#5E6A6E;opacity:1}
.track li.stat:hover{color:var(--navy)}
.stat:hover{color:var(--navy);opacity:1}
.stat b{font:800 38px/1 var(--display);color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small{font-size:.55em;font-weight:800;color:inherit}
.stat .lab{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:inherit;white-space:nowrap}
.stats.track{animation-name:chiffres;animation-duration:30s}
@keyframes chiffres{to{transform:translateX(calc(-50% - 36px))}}
@media (max-width:900px){.stats-band .wrap{grid-template-columns:1fr}}
@media (max-width:640px){.stats{gap:48px}.stat b{font-size:32px}}

/* écoresponsabilité : les cinq piliers dans le format de processus déjà utilisé
   sur l'accueil et sur Techniques. L'accréditation est ce à quoi ils aboutissent. */
.steps.piliers{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
.steps.piliers > li::after{content:var(--mot-pilier,"Pilier ") counter(s)}
.steps.piliers .ouvre{display:block;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.steps.piliers .titre{font:800 clamp(16px,1.35vw,19px)/1.1 var(--display);text-transform:uppercase;color:var(--navy)}
.steps.piliers .plus{display:inline-grid;vertical-align:-6px;margin-left:9px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  color:var(--c,var(--teal));place-items:center;font:700 15px/1 var(--body);
  transition:background-color .25s cubic-bezier(.2,.7,.3,1),border-color .25s cubic-bezier(.2,.7,.3,1),color .25s cubic-bezier(.2,.7,.3,1)}
.steps.piliers .ouvre:hover .plus,.steps.piliers .ouvre:focus-visible .plus{
  background:var(--c,var(--teal));border-color:var(--c,var(--teal));color:#fff}
.steps.piliers .ouvre:hover .titre{color:var(--c,var(--teal))}
.steps.piliers .ouvre:focus{outline:none}
.steps.piliers .ouvre:focus-visible{outline:3px solid var(--navy);outline-offset:5px}
@media (max-width:1000px){.steps.piliers{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .steps.piliers::before{display:none}}
@media (max-width:560px){.steps.piliers{grid-template-columns:1fr;gap:32px}
  /* Le fil est masque des 1000 px parce que les piliers passent a deux
     colonnes et qu'un trait vertical n'y relierait rien. En dessous de 560 ils
     reviennent sur une seule colonne : le fil reprend son role, comme dans les
     etapes de l'accueil et de Services. La geometrie vient de la feuille
     commune, on ne fait que le rallumer. */
  .steps.piliers::before{display:block}}

/* succursales */
.succ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.succ li{list-style:none;border-top:4px solid var(--c,var(--teal));padding-top:18px;display:grid;gap:8px;align-content:start}
.succ h3{font-size:clamp(20px,1.8vw,24px);font-weight:800}
.succ address{font-style:normal;font-size:15px;color:var(--text);line-height:1.5}
.succ .region{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy)}
@media (max-width:900px){.succ{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.succ{grid-template-columns:1fr}}


/* bande sombre : n'importe quelle section peut la porter.
   Toutes les inversions de couleur sont réglées ici, une fois. */
.bande-sombre{background:var(--navy);color:#fff}
.bande-sombre h2,.bande-sombre h3,.bande-sombre h4{color:#fff}
.bande-sombre p,.bande-sombre li,.bande-sombre address{color:rgba(255,255,255,.78)}
.bande-sombre .sur,.bande-sombre .region,.bande-sombre .lieu,.bande-sombre .marque,
.bande-sombre .eyebrow{color:var(--lemon)}
.bande-sombre .sec-head.solo > div{border-bottom:0;padding-bottom:0}
.bande-sombre .btn-line{border-color:#fff;color:#fff}
.bande-sombre .btn-line:hover{background:#fff;color:var(--navy)}
.bande-sombre a:not(.btn){color:var(--lemon)}
.bande-sombre .succ li{border-top-color:var(--c,var(--teal))}
.bande-sombre .steps::before{background:rgba(255,255,255,.3)}
.bande-sombre .steps > li::before{background:var(--navy);border-color:rgba(255,255,255,.55)}
/* Cette page redeclare les pastilles, donc la regle tactile de la feuille
   commune ne les atteint pas : meme specificite, mais plus haut. On la redit. */
@media (hover:none){
  .bande-sombre .steps > li::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
}
.bande-sombre .steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
.bande-sombre .steps > li::after{color:rgba(255,255,255,.6)}
/* dans une bande sombre, les cartes claires gardent leur encre d'origine */
.bande-sombre .carte-cv,.bande-sombre .carte-cv h3{color:var(--navy)}
.bande-sombre .carte-cv p,.bande-sombre .carte-cv label{color:var(--navy)}
/* les textes imbriqués doivent battre les règles de la page */
.bande-sombre .steps p,.bande-sombre .moment p,.bande-sombre .service p,
.bande-sombre .sec-head p,.bande-sombre .succ address{color:rgba(255,255,255,.78)}
.bande-sombre .steps h3,.bande-sombre .moment h3{color:#fff}


/* la colonnade vit dans une bande sombre : ces règles passent après le composant */
.bande-sombre .fronton{color:var(--navy)}
.bande-sombre .fronton .sur,.bande-sombre .fronton .titre,.bande-sombre .fronton .note{color:var(--navy)}
.bande-sombre .pilier h3{color:#fff}
.bande-sombre .pilier .n{color:var(--lemon)}
.bande-sombre .pilier .points li{color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.2)}
.bande-sombre .pilier .tuile{background:var(--c);color:#fff}

/* le processus des piliers dans une bande sombre : après le composant */
.bande-sombre .steps.piliers .titre{color:#fff}
.bande-sombre .steps.piliers > li::after{color:var(--lemon)}
.bande-sombre .steps.piliers .plus{color:#fff;border-color:rgba(255,255,255,.45)}
.bande-sombre .steps.piliers .ouvre:hover .plus{background:var(--c);border-color:var(--c);color:var(--navy)}
.bande-sombre .steps.piliers .ouvre:focus-visible{outline-color:var(--lemon)}

/* bulle de pilier : une petite note ancrée sous le point, pas un modal */
.steps.piliers > li{position:relative}
.bulle{position:absolute;top:calc(100% + 14px);left:-14px;z-index:20;width:300px;max-width:min(300px,86vw);
  background:#fff;color:var(--navy);border-radius:var(--r-m);padding:20px 20px 18px;
  box-shadow:0 22px 48px rgba(17,46,64,.32)}
.bulle[hidden]{display:none}
.bulle.a-droite{left:auto;right:-14px}
/* la pointe qui désigne le point de la ligne */
.bulle::before{content:"";position:absolute;top:-8px;left:24px;width:16px;height:16px;background:#fff;
  transform:rotate(45deg);border-radius:3px}
.bulle.a-droite::before{left:auto;right:24px}
.bulle .fermer{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:0;
  background:var(--off);color:var(--navy);font:400 18px/1 var(--body);cursor:pointer}
.bulle .fermer:hover{background:var(--navy);color:#fff}
.bulle .tuile{width:34px;height:34px;border-radius:10px;background:var(--c);color:#fff;
  display:grid;place-items:center;margin-bottom:12px}
.bulle .tuile .ico{width:18px;height:18px}
.bulle .sur{font:700 10.5px/1.3 var(--body);letter-spacing:1.7px;text-transform:uppercase;color:var(--navy);
  padding-top:9px;border-top:3px solid var(--c,var(--teal));display:inline-block;margin-bottom:6px}
.bulle-titre{font:900 17px/1.1 var(--display);text-transform:uppercase;color:var(--navy)}
.bulle .points{list-style:none;margin:12px 0 0;padding:0;display:grid}
.bulle .points li{font-size:13px;line-height:1.4;color:var(--text);padding:7px 0;border-top:1px solid var(--line)}
.bulle .points li:first-child{border-top:0;padding-top:0}
@media (max-width:620px){.bulle,.bulle.a-droite{left:0;right:auto;width:100%;max-width:none}}

/* la bulle est blanche même dans une bande sombre : ces règles passent après le composant */
.bande-sombre .bulle .sur,.bande-sombre .bulle .bulle-titre{color:var(--navy)}
.bande-sombre .bulle .points li{color:var(--text);border-top-color:var(--line)}
.bande-sombre .bulle .fermer{color:var(--navy)}

/* Cibles tactiles au doigt, suite : meme principe que dans jade.css.
   Calque invisible quand le voisinage le permet, rembourrage reel sinon. */
@media (pointer:coarse){
  .steps.piliers .ouvre{position:relative}
  .steps.piliers .ouvre::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}