/* Montserrat hébergée localement : aucune dépendance à Google Fonts.
Sous-ensemble latin étendu, quatre graisses réellement utilisées.
Futura n'est ni incluse ni distribuée : elle est réservée à la tagline du logo. */
@font-face{
font-family:'Montserrat';
src:url('../fonts/montserrat-400.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Montserrat';
src:url('../fonts/montserrat-500.woff2') format('woff2');
font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Montserrat';
src:url('../fonts/montserrat-600.woff2') format('woff2');
font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Montserrat';
src:url('../fonts/montserrat-700.woff2') format('woff2');
font-weight:700;font-style:normal;font-display:swap;
}
/* ============================================================
AITEK — Design system haute fidélité v1
Charte BRAND2026. Blanc dominant, Noir Obsidienne pour l'impact,
AITEK Red en accent. Géométrie dérivée : 30,9° (angle des jambages du A).
============================================================ */
/* ---------- 1. Jetons ---------- */
:root{
/* Marque */
--red:#A31E25;
--red-deep:#87181E;
--noir:#141518;
--white:#FFFFFF;
--grey:#828382;
/* Service — dérivés pour atteindre WCAG AA */
--ink:#33353A;
--ink-2:#54565B;
--line:#E1E1E3;
--line-2:#CFCFD2;
--surface:#F6F6F7;
--surface-2:#EDEDEF;
--d-surface:#1B1D21;
--d-surface-2:#25272C;
--d-line:#34363B;
--d-muted:#B2B3B6;
/* Typographie */
--font:'Montserrat', Arial, Helvetica, sans-serif;
--fs-micro:.6875rem;
--fs-small:.8125rem;
--fs-base:1rem;
--fs-lead:clamp(1.0625rem, 1.15vw, 1.1875rem);
--fs-h3:clamp(1.0625rem, 1.3vw, 1.25rem);
--fs-h2:clamp(1.75rem, 3.4vw, 2.875rem);
--fs-h1:clamp(2.125rem, 4.9vw, 3.875rem);
--fs-numeral:clamp(2.25rem, 4.2vw, 3.5rem);
/* Grille éditoriale */
--max:81.25rem;
--gutter:clamp(1.25rem, 4.5vw, 3.5rem);
--col-gap:clamp(1.25rem, 2.4vw, 2.25rem);
--band:clamp(1.9rem, 3.8vw, 3.5rem);
--ease:cubic-bezier(.22,.68,.28,1);
--angle:30.9deg;
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7.5rem}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.62;
color:var(--noir);background:var(--white);-webkit-font-smoothing:antialiased;
font-feature-settings:"kern" 1}
img,svg,figure{display:block;max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;font-weight:700;letter-spacing:-.022em}
p,ul,ol,dl{margin:0}
[id]{scroll-margin-top:7.5rem}
:where(a,button,input,select,textarea,summary):focus-visible{
outline:3px solid var(--red);outline-offset:3px;border-radius:1px;
/* Second anneau clair : sur Noir Obsidienne, le rouge seul plafonne à 2,41:1. */
box-shadow:0 0 0 6px rgba(255,255,255,.92)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;max-width:100vw;z-index:300;background:var(--red);color:#fff;
padding:.9rem 1.35rem;font-weight:600;font-size:.875rem}
.skip:focus{left:0}
/* ---------- 3. Structure ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band--tight{padding-block:calc(var(--band) * .62)}
.band--surface{background:var(--surface)}
.band--dark{background:var(--noir);color:var(--white)}
.band--dark h1,.band--dark h2,.band--dark h3{color:#fff}
/* Grille éditoriale 12 colonnes */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
.c-1-5{grid-column:1 / 6}
.c-1-6{grid-column:1 / 7}
.c-1-7{grid-column:1 / 8}
.c-6-12{grid-column:6 / -1}
.c-7-12{grid-column:7 / -1}
.c-8-12{grid-column:8 / -1}
.c-full{grid-column:1 / -1}
/* ---------- 4. Signalétique de section ---------- */
.eyebrow{display:flex;align-items:baseline;gap:.85rem;font-size:var(--fs-micro);
font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
margin:0 0 .9rem}
.eyebrow::before{content:"";width:2.25rem;height:2px;background:var(--red);
transform:translateY(-.28em);flex:none}
.band--dark .eyebrow,
.hero .eyebrow,
.kpis .eyebrow{color:var(--d-muted)}
.h2{font-size:var(--fs-h2);max-width:20ch;text-wrap:balance}
.h2--wide{max-width:30ch}
.lead{margin-top:.95rem;max-width:58ch;font-size:var(--fs-lead);color:var(--ink);
line-height:1.58}
.band--dark .lead{color:var(--d-muted)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.band--dark .rule{background:var(--d-line)}
/* ---------- 5. Actions ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
min-height:3rem;padding:.8rem 1.5rem;font-family:inherit;font-size:.875rem;
font-weight:600;letter-spacing:.01em;border:2px solid var(--red);background:var(--red);
color:#fff;cursor:pointer;transition:background .22s var(--ease),border-color .22s var(--ease),
transform .22s var(--ease)}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--line-2);border-color:var(--line-2);
color:var(--ink-2);cursor:not-allowed}
.btn--line{background:transparent;color:var(--noir);border-color:var(--noir)}
.btn--line:hover{background:var(--noir);color:#fff}
.band--dark .btn--line,.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.55)}
.band--dark .btn--line:hover,.hero .btn--line:hover{background:#fff;color:var(--noir);border-color:#fff}
.lnk{display:inline-flex;align-items:center;gap:.55rem;min-height:2.25rem;padding-block:.4rem;
font-size:.875rem;font-weight:600;color:var(--noir);
border-bottom:2px solid var(--red);transition:gap .22s var(--ease),color .22s var(--ease)}
.lnk::after{content:"\2192"}
.lnk:hover{gap:.95rem;color:var(--red)}
.band--dark .lnk{color:#fff}
.band--dark .lnk:hover{color:#fff;border-bottom-color:#fff}
/* ---------- 6. En-tête ---------- */
.hdr{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--line)}
.hdr__util{border-bottom:1px solid var(--d-line);background:#0F1013}
.hdr__util-in{display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;min-height:2.6rem}
.hdr__util a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.1rem;
font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;color:var(--d-muted)}
.hdr__util a:hover{color:#fff}
.lang{display:flex;align-items:center;gap:.3rem;color:var(--d-muted);font-size:var(--fs-micro)}
.lang a{padding-inline:.3rem}
.lang [aria-current]{color:#fff;border-bottom:2px solid var(--red)}
.ext::after{content:"\2197";font-size:.9em}
.hdr__main{display:flex;align-items:center;gap:1.75rem;min-height:4.75rem}
.logo{flex:none;display:block}
.logo img{width:177px;height:auto} /* minimum digital imposé par la charte */
.nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.nav__list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav__list > li > a,.nav__btn{display:inline-flex;align-items:center;gap:.4rem;
min-height:2.6rem;padding:.5rem .7rem;font-family:inherit;font-size:.8125rem;font-weight:500;
color:var(--noir);background:none;border:0;cursor:pointer;position:relative}
.nav__list > li > a::after,.nav__btn::after{content:"";position:absolute;left:.7rem;right:.7rem;
bottom:.35rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;
transition:transform .24s var(--ease)}
.nav__list > li > a:hover::after,.nav__btn:hover::after,
.nav__btn[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__list > li > a:hover,.nav__btn:hover{color:var(--red)}
.nav__caret{width:.55rem;height:.55rem;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
transition:transform .24s var(--ease)}
.nav__btn[aria-expanded="true"] .nav__caret{transform:rotate(-135deg) translate(-2px,-2px)}
/* Méga-menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--noir);
border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);z-index:190}
.mega__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
gap:clamp(1.5rem,4vw,4rem);padding-block:2.25rem}
.mega__intro h3{font-size:1.25rem}
.mega__intro p{margin-top:.7rem;font-size:.875rem;color:var(--d-muted);max-width:34ch}
.mega__list{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.15rem 1.5rem}
.mega__list a{display:block;padding:.7rem 0;font-size:.9375rem;font-weight:600;color:#fff;
border-bottom:1px solid var(--d-line)}
.mega__list a:hover{color:var(--red)}
.mega__list span{display:block;font-size:.75rem;font-weight:400;color:var(--d-muted);
margin-top:.15rem}
/* Sans JavaScript le panneau reste fermé : la navigation passe par les pages index. */
.mega[hidden]{display:none}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--noir);padding:.7rem;
cursor:pointer;min-height:3rem;min-width:3rem}
/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--noir);color:#fff;overflow:hidden;
padding-block:clamp(2.5rem,5vw,4.25rem)}
.hero__in{position:relative;max-width:56rem}
.hero h1{font-size:var(--fs-h1);letter-spacing:-.03em;max-width:19ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:#fff;
background:linear-gradient(transparent 62%,rgba(163,30,37,.85) 62%)}
.hero__text{margin-top:1.25rem;max-width:54ch;font-size:var(--fs-lead);color:var(--d-muted)}
.hero__act{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:1.75rem}
.hero__meta{margin-top:1.9rem;padding-top:1.1rem;border-top:1px solid var(--d-line);
display:flex;flex-wrap:wrap;gap:.5rem 2.25rem;font-size:var(--fs-small);color:var(--d-muted)}
/* Variante B — motif dérivé de l'angle du A. Lignes ouvertes, opacité 1.
Ce n'est ni le logo, ni le wordmark, ni l'icône officielle. */
.hero__motif{position:absolute;right:-2%;bottom:-16%;width:min(34%,24rem);
pointer-events:none;fill:none;stroke:var(--d-line);stroke-width:2.5;stroke-linecap:square}
.hero__motif .accent{stroke:var(--red)}
/* Variante C — composition photographique */
.hero--photo .hero__in{max-width:none}
.hero--photo .grid12{align-items:center}
.hero__visual{position:relative;min-height:clamp(17rem,32vw,26rem);
background:linear-gradient(150deg,var(--d-surface-2),var(--d-surface));
clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.hero__visual::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--noir) 0%,rgba(20,21,24,.72) 22%,rgba(20,21,24,0) 62%)}
/* ---------- 8. Barre de preuves ---------- */
.kpis{background:var(--d-surface);color:#fff;border-top:1px solid var(--d-line)}
.kpis__list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.kpi{padding:1.6rem 1.5rem 1.6rem 0;border-right:1px solid var(--d-line);position:relative}
.kpi:last-child{border-right:0}
.kpi__n{display:block;font-size:clamp(1.6rem,2.7vw,2.25rem);font-weight:700;letter-spacing:-.035em;
line-height:1}
.kpi__l{display:block;margin-top:.5rem;font-size:var(--fs-small);color:var(--d-muted);line-height:1.4}
/* ---------- 9. Chaîne de valeur ---------- */
.chain{margin-top:2rem;position:relative}
.chain__track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.chain__track::before{content:"";position:absolute;left:0;right:0;top:2.35rem;height:2px;
background:var(--line)}
.chain__step{position:relative;padding:0 1.35rem 0 0}
.chain__dot{position:relative;z-index:2;width:1.1rem;height:1.1rem;background:var(--white);
border:3px solid var(--line-2);border-radius:50%;margin-top:1.8rem}
.chain__step--hub .chain__dot{border-color:var(--red);background:var(--red);
width:1.4rem;height:1.4rem;margin-top:1.65rem}
.chain__i{margin-top:1.4rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-2)}
.chain__t{margin-top:.55rem;font-size:var(--fs-h3);font-weight:700}
.chain__step--hub .chain__t{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--red)}
.chain__d{margin-top:.6rem;font-size:var(--fs-small);color:var(--ink);line-height:1.55;
max-width:26ch}
.chain__note{margin-top:2.25rem;padding-left:1.35rem;border-left:3px solid var(--red);
font-size:var(--fs-lead);max-width:64ch;line-height:1.55}
/* ---------- 10. Routeur d'audiences ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
border-block:1px solid var(--line);margin-top:2rem}
.route{background:var(--white);padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;
position:relative;transition:background .24s var(--ease)}
.route::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.route:hover::before,.route:focus-within::before{transform:scaleX(1)}
.route:hover{background:var(--surface)}
.route__mark{width:2.5rem;height:2.5rem;margin-bottom:1.15rem}
.route__mark svg{width:100%;height:100%;fill:none;stroke:var(--red);stroke-width:1.6}
.route__who{font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-2)}
.route__q{margin-top:.75rem;font-size:var(--fs-h3);font-weight:700;line-height:1.3;max-width:22ch}
.route__p{margin-top:.85rem;font-size:.875rem;color:var(--ink);line-height:1.6}
.route__cta{margin-top:auto;padding-top:1.5rem}
/* ---------- 11. Capacités — liste éditoriale, pas des cartes ---------- */
.caps{margin-top:2rem;border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:4.5rem minmax(0,15rem) minmax(0,1fr);
gap:1.5rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line);
transition:background .2s var(--ease)}
.cap:hover{background:var(--surface)}
.cap__n{font-size:var(--fs-small);font-weight:700;color:var(--red);letter-spacing:.08em}
.cap__t{font-size:var(--fs-h3);font-weight:700}
.cap__d{font-size:.9375rem;color:var(--ink);line-height:1.6}
.cap__meta{display:block;margin-top:.4rem;font-size:var(--fs-micro);letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-2);font-weight:600}
/* ---------- 12. Expertises — rangées alternées ---------- */
.exps{margin-top:2rem}
.exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--col-gap);
padding:1rem 0;border-top:1px solid var(--line);align-items:start}
.exp:last-child{border-bottom:1px solid var(--line)}
.exp__h{display:flex;align-items:baseline;gap:1rem}
.exp__n{font-size:var(--fs-small);font-weight:700;color:var(--red)}
.exp__t{font-size:clamp(1.125rem,1.8vw,1.5rem);font-weight:700;max-width:16ch}
.exp__d{font-size:.9375rem;color:var(--ink);line-height:1.62;max-width:52ch}
.exp__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tag{font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;padding:.35rem .6rem;
border:1px solid var(--line-2);color:var(--ink-2)}
.band--dark .tag{border-color:var(--d-line);color:var(--d-muted)}
/* ---------- 13. Présence — composition cartographique ---------- */
.geo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(1.5rem,4vw,3rem);margin-top:2rem;align-items:start}
.geo__map{position:relative;background:var(--surface);padding:1.5rem}
.geo__map img{width:100%;height:auto;mix-blend-mode:multiply}
.geo__legend{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1rem;
padding-top:1rem;border-top:1px solid var(--line)}
.geo__key{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-micro);
letter-spacing:.06em;color:var(--ink-2);font-weight:600;text-transform:uppercase}
.geo__key i{width:.7rem;height:.7rem;border-radius:50%;flex:none;display:block}
.k-hq{background:var(--red)}
.k-reg{background:var(--noir)}
.k-hub{background:var(--white);border:2px solid var(--noir)}
.k-wh{background:var(--white);border:2px solid var(--red)}
.k-mkt{background:var(--line-2)}
.places{list-style:none;margin:0;padding:0}
.places__h{font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-2);margin:1.1rem 0 .5rem}
.places__h:first-child{margin-top:0}
.place{display:flex;align-items:baseline;gap:.85rem;padding:.45rem 0;
border-bottom:1px solid var(--line)}
.place__d{width:.6rem;height:.6rem;border-radius:50%;flex:none;transform:translateY(-.1em)}
.place__c{font-weight:700;font-size:.9375rem;min-width:8.5rem}
.place__x{font-size:var(--fs-small);color:var(--ink-2)}
.place__y{margin-left:auto;font-size:var(--fs-micro);font-weight:600;color:var(--ink-2);
letter-spacing:.08em}
.geo__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
gap:1.25rem;margin-top:1.25rem;padding-top:1.1rem;border-top:2px solid var(--noir)}
.geo__fact b{display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em}
.geo__fact span{display:block;margin-top:.3rem;font-size:var(--fs-small);color:var(--ink);
line-height:1.45}
/* ---------- 14. Preuves ---------- */
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:2rem}
.proof{padding-top:1.1rem;border-top:3px solid var(--red)}
.proof__s{font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-2)}
.proof__d{margin-top:.85rem;font-size:.9375rem;color:var(--ink);line-height:1.6}
.proof__o{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.proof__o span{font-size:var(--fs-small);font-weight:600;padding:.4rem .65rem;
background:var(--surface-2);color:var(--noir)}
.disclaimer{margin-top:2rem;font-size:var(--fs-small);color:var(--ink-2);max-width:78ch;
line-height:1.6}
/* ---------- 15. Partenaires ---------- */
.vendors{margin-top:2rem;border-top:1px solid var(--line)}
.vendor-row{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;gap:1.5rem;
align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.vendor-row__d{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--red)}
.vendor-row__n{display:flex;flex-wrap:wrap;gap:.45rem}
/* Emplacement prévu pour les logos constructeurs, occupé par les noms tant que
les droits d'usage ne sont pas confirmés. */
.vendor{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;
padding:.4rem .8rem;border:1px solid var(--line-2);font-size:.875rem;font-weight:600;
color:var(--noir);background:var(--white)}
.vendor-row__c{font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap}
/* ---------- 16. Impact — composition asymétrique ---------- */
.impacts{margin-top:2rem;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
.impact{grid-column:span 3;padding-top:.9rem;border-top:1px solid var(--d-line)}
.impact:nth-child(1){grid-column:span 4}
.impact:nth-child(4){grid-column:span 2}
.impact__d{font-size:.875rem}
.impact__t{font-size:var(--fs-h3);font-weight:700}
.impact__d{margin-top:.7rem;font-size:.9375rem;color:var(--d-muted);line-height:1.62;max-width:46ch}
/* ---------- 17. Perspectives ---------- */
.posts{list-style:none;margin:2rem 0 0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
.post{display:flex;flex-direction:column}
.post__k{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--red)}
.post__t{margin-top:.6rem;font-size:var(--fs-h3);font-weight:700;line-height:1.32}
.post__x{margin-top:.7rem;font-size:.875rem;color:var(--ink);line-height:1.6}
.post__l{margin-top:auto;padding-top:1.25rem}
/* ---------- 18. Visuel neutre (en attente des photographies) ---------- */
.visual{position:relative;overflow:hidden;background:
linear-gradient(155deg,var(--surface-2) 0%,var(--surface) 55%,var(--surface-2) 100%)}
.visual[data-ratio="16-9"]{aspect-ratio:16/9}
.visual[data-ratio="3-2"]{aspect-ratio:3/2}
.visual[data-ratio="4-5"]{aspect-ratio:4/5}
.visual--dark{background:linear-gradient(155deg,var(--d-surface-2),var(--d-surface))}
.visual--cut{clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.visual::after{content:"";position:absolute;right:-12%;bottom:-22%;width:56%;aspect-ratio:1;
border-right:2px solid rgba(163,30,37,.16);
transform:skewX(calc(-1 * var(--angle)))}
/* ---------- 19. Teaser carrières ---------- */
.careers{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(1.5rem,4vw,3rem);align-items:center}
.careers .visual{max-height:15rem}
/* ---------- 20. CTA final ---------- */
.final__opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--d-line);border:1px solid var(--d-line);margin-top:2.5rem}
.final__opt{background:var(--d-surface);padding:1.35rem 1.35rem;display:flex;flex-direction:column;
gap:.7rem;transition:background .22s var(--ease)}
.final__opt:hover{background:var(--d-surface-2)}
.final__opt b{font-size:1rem}
.final__opt span{font-size:var(--fs-small);color:var(--d-muted);line-height:1.55}
.final__opt .lnk{margin-top:auto;align-self:flex-start}
/* ---------- 21. Fil d'Ariane ---------- */
.crumb{padding-block:1rem;font-size:var(--fs-small);color:var(--ink-2)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
align-items:center;gap:.4rem}
.crumb li::after{content:"/";margin-left:.4rem;color:var(--line-2)}
.crumb li:last-child::after{content:""}
.crumb a{display:inline-flex;align-items:center;min-height:1.6rem;padding-block:.25rem;
border-bottom:1px solid var(--line-2)}
.crumb a:hover{color:var(--red);border-bottom-color:var(--red)}
/* ---------- 22. Étapes numérotées ---------- */
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--line);
border:1px solid var(--line)}
.step{background:var(--white);padding:1.5rem 1.4rem}
.step__n{font-size:var(--fs-numeral);font-weight:700;line-height:1;color:#86878B;
letter-spacing:-.05em}
.step__t{margin-top:.4rem;font-size:var(--fs-h3);font-weight:700}
.step__d{margin-top:.6rem;font-size:.875rem;color:var(--ink);line-height:1.55}
.band--dark .step{background:var(--d-surface)}
.band--dark .step__n{color:var(--d-surface-2)}
.band--dark .step__d{color:var(--d-muted)}
/* ---------- 23. Formulaire ---------- */
.form{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1 / -1}
.field label{font-size:var(--fs-small);font-weight:600}
.field .hint{font-size:var(--fs-micro);color:var(--ink-2);font-weight:400}
.field input,.field select,.field textarea{font-family:inherit;font-size:.9375rem;
padding:.75rem .85rem;border:1px solid #86878B;background:var(--white);color:var(--noir);
min-height:3rem}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline-offset:1px}
.field--error input,.field--error textarea{border-color:var(--red);border-width:2px}
.field .err{font-size:var(--fs-micro);color:var(--red-deep);font-weight:600}
.field--ok input{border-color:#2E7D4F}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-small);color:var(--ink)}
.consent input{min-height:auto;width:1.15rem;height:1.15rem;margin-top:.2rem;flex:none}
/* ---------- 24. Page stub ---------- */
.stub{max-width:44rem}
.stub__badge{display:inline-block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:.35rem .6rem}
/* ---------- 25. Pied de page ---------- */
.ftr{background:var(--noir);color:var(--d-muted);padding-block:3.25rem 1.5rem;
font-size:.875rem;border-top:1px solid var(--d-line)}
.ftr__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.25rem}
.ftr h3{color:#fff;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
margin-bottom:1rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li a{display:inline-block;padding-block:.38rem;min-height:1.6rem}
.ftr a:hover{color:#fff}
.ftr__about{margin-top:1.15rem;max-width:34ch;line-height:1.6}
.ftr__sign{margin-top:1.1rem;font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
color:var(--grey)}
.ftr__bot{margin-top:2.5rem;padding-top:1.35rem;border-top:1px solid var(--d-line);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--fs-small)}
.ftr__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem}
.ftr__legal a{display:inline-flex;align-items:center;min-height:1.8rem}
/* ---------- 26. Apparition — surcouche seulement ---------- */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;
transition:opacity .6s var(--ease),transform .6s var(--ease)}
html[data-qa="static"] .rv{opacity:1!important;transform:none!important;transition:none!important}
/* ---------- 27. Adaptatif ---------- */
@media(max-width:64rem){
.grid12{grid-template-columns:repeat(6,1fr)}
.c-1-5,.c-1-6,.c-1-7,.c-6-12,.c-7-12,.c-8-12{grid-column:1 / -1}
.kpis__list{grid-template-columns:repeat(2,1fr)}
.kpi{border-bottom:1px solid var(--d-line)}
.kpi:nth-child(2n){border-right:0}
.kpi:nth-last-child(-n+2){border-bottom:0}
.chain__track{grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
.chain__track::before{display:none}
.routes,.proofs,.posts,.final__opts{grid-template-columns:repeat(2,1fr)}
.geo,.careers,.hero--photo .grid12{grid-template-columns:1fr}
.exp{grid-template-columns:1fr;gap:.85rem}
.impact,.impacts .impact:nth-child(n){grid-column:span 6}
.ftr__grid{grid-template-columns:1fr 1fr}
.vendor-row{grid-template-columns:1fr;gap:.7rem}
.vendor-row__c{white-space:normal}
}
@media(max-width:56rem){
.burger{display:none}
.js .burger{display:block}
.js .nav{display:none}
.js .nav.open{display:flex;position:absolute;inset-inline:0;top:100%;background:var(--noir);
flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.25rem;
border-bottom:1px solid var(--d-line);max-height:75vh;overflow-y:auto;z-index:180}
.js .nav.open .nav__list > li > a,
.js .nav.open .nav__btn{color:#E6E6E7}
.js .nav.open .nav__list > li > a:hover,
.js .nav.open .nav__btn:hover{color:#fff}
/* Sans JavaScript, la navigation reste dépliée sous le logo. */
.nav{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:0;
border-top:1px solid var(--d-line);padding-top:.5rem}
.nav__list{flex-direction:column;align-items:stretch;gap:0}
.nav__list > li > a,.nav__btn{padding:.8rem 0;justify-content:space-between;width:100%}
.hdr__main{flex-wrap:wrap;row-gap:.5rem;min-height:4.25rem}
.hdr{position:relative}
html{scroll-padding-top:1rem}
[id]{scroll-margin-top:1rem}
.mega{position:static;border:0;background:transparent}
.mega__in{grid-template-columns:1fr;padding-block:.5rem 1rem;gap:1rem}
.mega__intro{display:none}
.mega__list a{font-size:.875rem;padding:.6rem 0}
.hdr__util-in{justify-content:space-between;gap:.6rem;flex-wrap:nowrap}
.hdr__util a{white-space:nowrap}
}
@media(max-width:34rem){
.routes,.proofs,.posts,.final__opts,.steps,.form{grid-template-columns:1fr}
.impacts .impact:nth-child(n){grid-column:span 12}
.impacts{grid-template-columns:repeat(12,1fr)}
.cap{grid-template-columns:2.5rem 1fr;gap:.75rem}
.cap__d{grid-column:2}
.ftr__grid{grid-template-columns:1fr}
.kpis__list{grid-template-columns:repeat(2,1fr)}
.kpi:nth-child(odd){padding-left:1rem}
.place{flex-wrap:wrap}
.place__y{margin-left:0}
}
/* ---------- 28. Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.js .rv{opacity:1;transform:none}
}
/* ---------- 29. Impression ---------- */
@media print{
.hdr,.burger,.skip,.final,.mega{display:none}
body{color:#000;background:#fff}
.js .rv,.rv{opacity:1!important;transform:none!important}
.band--dark,.kpis,.ftr{background:#fff!important;color:#000!important}
}
/* ---------- 30. Barre utilitaire sur mobile ----------
Seuls Recherche, FR/EN et AITEK Center y restent : Carrières et Contact
basculent dans le menu principal replié. */
.nav__mobile{display:none}
@media(max-width:56rem){
.hdr__util .u-sec{display:none}
.nav__mobile{display:block}
.hdr__util-in{gap:.5rem}
.hdr__util a{font-size:.625rem;letter-spacing:.04em}
}
/* ---------- 31. Repli des rubriques à méga-menu ----------
Sans JavaScript, le bouton reste masqué (attribut hidden) et ce lien prend le relais
vers la page index de la rubrique. Avec JavaScript, le bouton s'affiche et ce lien
devient inutile : il est retiré du flux. */
.nav__fallback{display:inline-flex;align-items:center;min-height:2.6rem;padding:.5rem .7rem;
font-size:.8125rem;font-weight:500;color:var(--noir)}
.nav__fallback:hover{color:var(--red)}
/* Avec JavaScript, le bouton prend le relais : le lien de repli sort du flux
ET de l ordre de tabulation, pour ne pas s intercaler entre le bouton et son panneau. */
.js .nav__fallback{display:none}
/* ---------- 32. Carte de couverture ---------- */
.map{width:100%;height:auto;display:block;max-height:19rem}
.mapbox{background:var(--white);border:1px solid var(--line);padding:1.25rem}
.maplegend{display:flex;flex-wrap:wrap;gap:.6rem 1.35rem;margin-top:1rem;padding-top:1rem;
border-top:1px solid var(--line);list-style:none}
.maplegend li{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-micro);
font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.maplegend i{width:.85rem;height:.85rem;flex:none;display:block;border-radius:50%}
.lg-hq{background:var(--red);box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--red)}
.lg-reg{background:var(--noir)}
.lg-wh{background:#fff;border:3px solid var(--red);border-radius:1px}
.lg-hub{background:#fff;border:0;border-radius:0;width:0;height:0;
border-top:.45rem solid transparent;border-bottom:.45rem solid transparent;
border-left:.7rem solid var(--noir)}
.lg-pays{background:#D0D1D4;border:1px solid #B4B5B9;border-radius:1px}
.mapnote{margin-top:.9rem;font-size:var(--fs-small);color:var(--ink-2)}
/* ---------- 33. Formulaires : états ---------- */
.req{color:var(--red);font-weight:700}
.optional{font-weight:400;color:var(--ink-2)}
.form__status{margin-top:1rem;padding:.9rem 1.1rem;border-left:3px solid var(--red);
background:var(--surface);font-size:.875rem}
.form__status[data-state="ok"]{border-left-color:#2E7D4F}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{
border-color:var(--red);border-width:2px}
/* ---------- 34. Leurre anti-spam ----------
Hors flux, hors tabulation, masque aux lecteurs d ecran par aria-hidden.
Ne pas utiliser display:none : certains robots l ignorent. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* ---------- 35. Lien dans un texte de consentement ---------- */
.lnk-inline{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.lnk-inline:hover{color:var(--red)}
/* ============================================================
36. V1.4 — Composants photographiques
Maquettes de cadrage. Le remplacement futur se fait par
substitution de fichier, sans reecriture du HTML.
============================================================ */
.ph{display:block;position:relative;overflow:hidden;background:var(--surface-2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ph--16-9{aspect-ratio:16/9}
.ph--3-2{aspect-ratio:3/2}
.ph--4-3{aspect-ratio:4/3}
.ph--4-5{aspect-ratio:4/5}
.ph--1-1{aspect-ratio:1/1}
/* 1. HeroSplitPhoto
L'image est sortie du flux : sans cela, sa hauteur intrinseque
dicterait celle du hero au lieu de suivre la colonne de texte. */
.hero--split{padding-block:0;overflow:hidden}
.hero--split .hero__grid{display:grid;grid-template-columns:44fr 56fr;align-items:stretch;
min-height:clamp(23rem,36vw,30rem)}
.hero--split .hero__txt{display:flex;flex-direction:column;justify-content:center;
padding:clamp(1.75rem,3.2vw,2.75rem) clamp(1.5rem,3vw,2.75rem) clamp(1.75rem,3.2vw,2.75rem) 0}
.hero--split .hero__img{position:relative;overflow:hidden;aspect-ratio:auto}
.hero--split .hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--split .hero__img--mob{display:none}
/* 2. EditorialPhotoWide */
.ph-wide{margin-top:1.35rem}
figure.ph-wide figcaption,figure.ph-cap figcaption,figure.ph-ops figcaption,
figure.ph-event figcaption,figure.ph-team figcaption{margin-top:.6rem;
font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}
/* La legende heritait de --ink-2, illisible sur Noir Obsidienne (2,48:1). */
.band--dark figure figcaption,.band--dark figcaption{color:var(--d-muted)}
/* 3. EditorialPhotoPortrait */
.ph-portrait{max-width:22rem}
/* 4. PhotoMosaic */
.ph-mosaic{display:grid;gap:var(--col-gap);margin-top:2rem;
grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
/* 5. ExpertisePhotoPanel */
.exp--photo{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) minmax(0,1.2fr);
gap:var(--col-gap);align-items:start;padding:1.25rem 0;border-top:1px solid var(--line)}
.exp--photo:last-of-type{border-bottom:1px solid var(--line)}
/* 6. GovernancePortrait — role generique, jamais de nom */
/* Grille stricte : 3 colonnes sur 2 lignes en desktop, jamais de carte isolee. */
.gov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.25rem,2.4vw,2rem);margin-top:2rem;list-style:none;padding:0}
.gov-card{display:flex;flex-direction:column}
/* Cadrage harmonise : meme ratio, meme hauteur apparente, meme ligne des yeux.
Le recadrage est purement CSS : les sources ne sont jamais modifiees. */
.gov-card .ph{aspect-ratio:4/5;width:100%}
.gov-card .ph img{object-position:50% 26%}
.gov-card__role{margin-top:.85rem;font-size:.9375rem;font-weight:700;line-height:1.35;
min-height:2.6em}
/* 7-10. TeamPhoto, EventPhoto, OperationalPhoto, PhotoWithCaption */
.ph-team,.ph-event,.ph-ops,.ph-cap{margin-top:1.35rem}
@media(max-width:64rem){
.hero--split .hero__grid{grid-template-columns:48fr 52fr;min-height:clamp(20rem,34vw,26rem)}
.exp--photo{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}
.exp--photo > *:last-child{grid-column:2}
.ph-mosaic{grid-template-columns:1fr}
.gov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:47.9375rem){
/* Sous 768 px : le texte d'abord, la photographie ensuite. */
.hero--split .hero__grid{grid-template-columns:1fr;min-height:0}
.hero--split .hero__txt{padding:clamp(1.5rem,6vw,2.25rem) 0 1.25rem}
.hero--split .hero__img--desk{display:none}
.hero--split .hero__img--mob{display:block;position:relative;aspect-ratio:4/5;
max-height:min(56vh,22rem);width:100%}
.exp--photo{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr)}
.ph-portrait{max-width:none}
/* Deux colonnes compactes : les libelles de fonction restent entierement lisibles. */
.gov-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.gov-card__role{font-size:.875rem;min-height:0}
}
/* Hero divise : la colonne de texte etant plus etroite, l'echelle du H1
est reduite pour eviter un hero qui deborde de l'ecran. */
.hero--split h1{font-size:clamp(1.75rem,2.75vw,2.6rem);max-width:15ch}
.hero--split .hero__text{font-size:1rem;max-width:44ch;margin-top:1rem}
.hero--split .hero__act{margin-top:1.35rem}
.hero--split .hero__meta{margin-top:1.35rem;padding-top:.9rem;font-size:var(--fs-micro);
gap:.35rem 1.25rem}
@media(max-width:47.9375rem){
.hero--split h1{max-width:18ch;font-size:clamp(1.75rem,6.4vw,2.4rem)}
}
/* Homepage : les visuels editoriaux sont contraints pour tenir le budget de
hauteur. Une photographie ne doit pas rallonger la page plus qu'elle
n'apporte de preuve. */
.band .ph-event,.band .ph-wide{max-width:20rem}
.ph-duo .ph-ops,.ph-duo .ph-cap{max-width:none}
.ph-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);
margin-top:1.35rem;align-items:start}
.ph-duo > figure{margin-top:0;max-width:none}
@media(max-width:47.9375rem){
.band .ph-ops,.band .ph-event,.band .ph-wide,.band .ph-cap{max-width:none}
.ph-duo{grid-template-columns:1fr}
}
/* Comite et gouvernance collective : composition 60/40, jamais deux images geantes. */
.gov-duo{display:grid;grid-template-columns:60fr 40fr;gap:var(--col-gap);
margin-top:2rem;align-items:start}
.gov-duo figure{margin-top:0;max-width:none}
@media(max-width:47.9375rem){ .gov-duo{grid-template-columns:1fr} }
/* Hero, photo 01 : le wordmark mural doit rester entierement visible avec une marge.
Le cadre se resserrant aux largeurs intermediaires, une valeur unique ne suffit pas.
Valeurs calibrees par appariement de gabarit sur le rendu reel. */
.hero--split .hero__img--desk img{object-position:74% 42%}
@media(max-width:78.75rem){ .hero--split .hero__img--desk img{object-position:80% 42%} }
@media(max-width:64rem){
/* Sous 1024 px, la colonne de texte impose une hauteur que l'image ne peut suivre
sans un rognage horizontal massif. Le cadre adopte donc le ratio de la source :
l'image est vue en entier, wordmark et personnes compris, sans etirement. */
.hero--split .hero__grid{align-items:center}
.hero--split .hero__img--desk{aspect-ratio:4/3;align-self:center}
.hero--split .hero__img--desk img{object-position:50% 50%}
}
/* Bandeau compact des quatre domaines : 4 colonnes desktop, 2 tablette, 2 mobile.
Volontairement resserre : ce n'est pas quatre sections supplementaires. */
.ph-quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);
margin-top:1.5rem;list-style:none;padding:0}
.ph-quad__t{margin-top:.6rem;font-size:var(--fs-small);font-weight:700}
@media(max-width:64rem){ .ph-quad{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:34rem){ .ph-quad{gap:.85rem} .ph-quad__t{font-size:var(--fs-micro)} }
/* Bandeau de revue interne : superpose, sans effet sur la mise en page. */
.review-bar{position:fixed;left:0;right:0;bottom:0;z-index:400;
background:var(--noir);color:#fff;border-top:3px solid var(--red);
padding:.6rem clamp(1rem,3vw,2rem);font-size:var(--fs-small);letter-spacing:.02em;
text-align:center}
.review-bar:focus-visible{outline:3px solid var(--red);outline-offset:-6px}
@media print{ .review-bar{display:none} }
/* Le numero de telephone ne doit jamais se couper sur deux lignes. */
a[href^="tel:"]{white-space:nowrap}
.place__x a[href^="tel:"]{display:inline-block}
/* Zone de transition entre le bouton et le panneau.
Elle est portee par le BOUTON, jamais par le : poser position:relative
sur le en ferait le bloc contenant du panneau absolu, dont la largeur
tomberait a celle du bouton. Le panneau doit rester positionne par rapport
au header sticky. */
.nav__list > li:has(.mega) .nav__btn::before{content:"";position:absolute;
left:0;right:0;top:100%;height:.75rem;pointer-events:auto;z-index:1}
.mega{z-index:210}
@media(max-width:56rem){ .nav__list > li:has(.mega) .nav__btn::before{display:none} }
/* Acces a la page complete du Groupe.
La colonne d'introduction etant masquee sous 56 rem, le lien y serait
inaccessible : une entree dediee est ajoutee en tete de liste, visible
uniquement en mobile. Jamais les deux a la fois. */
.mega__index--mobile{display:none}
.mega__index--desktop{display:block}
@media(max-width:56rem){
.mega__index--mobile{display:list-item}
.mega__index--desktop{display:none}
}
/* Recherche locale du prototype */
.srch{margin-top:1.75rem;max-width:44rem}
.srch input[type=search]{width:100%}
.srch__status{margin-top:1rem;font-size:var(--fs-small);color:var(--ink-2)}
.srch [data-search-results]{margin-top:1.25rem}
.srch mark{background:rgba(163,30,37,.16);color:inherit;padding:0 .12em;border-radius:2px}
/* Lisibilite du mega-menu.
Le panneau a un fond Noir Obsidienne, mais .mega__intro h3 n'avait pas de
couleur explicite et .lnk impose var(--noir) : le texte etait noir sur noir.
La correction est strictement limitee au mega-menu. */
.mega{color:var(--white)}
.mega__intro h3{color:var(--white)}
.mega__intro p{color:rgba(255,255,255,.82)}
.mega__index--desktop .lnk,.mega__index--mobile a{color:var(--white)}
.mega__index--desktop .lnk:hover,.mega__index--desktop .lnk:focus-visible{
color:var(--white);border-bottom-color:var(--white)}
/* Chain sur mobile : sous 34 rem, deux colonnes compriment les descriptions.
Une seule colonne rend la largeur utile a chaque etape. */
@media(max-width:34rem){
.chain__track{grid-template-columns:1fr;gap:1.75rem}
.chain__step{padding-right:0}
.chain__d{max-width:48ch}
}
/* Resultats de recherche : composant dedie, une seule colonne.
La grille .posts de Perspectives n'est pas reutilisee ici. */
.search-results{list-style:none;margin:1.5rem 0 0;padding:0;max-width:56rem}
.search-result{padding:1.35rem 0;border-top:1px solid var(--line)}
.search-result:first-child{border-top:0}
.search-result__type{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-2);font-weight:600}
.search-result__title{margin-top:.45rem;font-size:var(--fs-h3);font-weight:700;line-height:1.3}
.search-result__title a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.search-result__title a:hover,.search-result__title a:focus-visible{border-bottom-color:var(--red)}
.search-result__excerpt{margin-top:.5rem;font-size:.9375rem;color:var(--ink);line-height:1.6}
#rubriques:focus-visible{outline:3px solid var(--red);outline-offset:4px}
@media(max-width:47.9375rem){ .search-results{max-width:none} }
/* L'attribut hidden doit primer : sans cette regle, display:inline-flex du
bouton l'emporte et l'element reste visible malgre hidden. */
[hidden]{display:none !important}
/* --- V1.6-5 : logos partenaires ------------------------------------------ */
/* Grille a colonnes fixes : les logos ont des ratios tres differents — de
carre a tres horizontal. Une disposition en flux produirait un alignement
irregulier et ferait paraitre les logos carres minuscules. */
.vendor-row__n{display:grid;gap:.75rem;
grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.vendor{display:flex;flex-direction:column;align-items:center;gap:.5rem;
padding:.9rem .6rem .7rem;border:1px solid var(--line,#e5e5e5);
border-radius:.4rem;background:#fff}
/* Zone de logo constante : chaque marque occupe la meme surface visuelle. */
.vendor__logo{display:block;width:100%;height:2.25rem;object-fit:contain;
object-position:center}
.vendor__name{font-size:.75rem;line-height:1.25;text-align:center;
color:var(--muted,#555)}
@media (max-width:36rem){
.vendor-row__n{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
.vendor__logo{height:1.9rem}}
/* --- V1.6-6 : bloc Gouvernance nominatif --------------------------------- */
.gov-card__name{margin:.6rem 0 .1rem;font-weight:600;line-height:1.25}
.gov-card__role{margin:0;font-size:.875rem;color:var(--muted,#555);line-height:1.3}
/* --- V1.6-6 : compteurs de domaine sur mobile et tablette ---------------- */
/* En dessous de 60rem, .vendor-row passe en une colonne : le compteur se
retrouvait seul sous la grille de logos. Il rejoint l'intitule sur une meme
ligne, aligne a droite, la grille restant en dessous. L'ordre du DOM n'est
pas modifie : seul l'ordre visuel l'est. */
@media (max-width:60rem){
.vendor-row{display:grid;grid-template-columns:1fr auto;
grid-template-areas:"domaine compteur" "logos logos";
align-items:baseline;column-gap:1rem}
.vendor-row__d{grid-area:domaine;margin:0}
.vendor-row__c{grid-area:compteur;justify-self:end;white-space:nowrap;margin:0}
.vendor-row__n{grid-area:logos}
}
/* --- V1.6-6R : rendu des logos etroits ----------------------------------- */
/* Certains logos sont tres compacts — APC, Afristorm, HP — et paraissaient
minuscules dans une zone dimensionnee pour des logos horizontaux. La zone
accepte une largeur plus large sans jamais deformer : object-fit reste
contain. */
.vendor__logo{height:2.5rem;max-width:100%}
.vendor__logo[src*="apc"],.vendor__logo[src*="afristorm"],
.vendor__logo[src*="hp.png"]{height:3rem}
@media (max-width:36rem){
.vendor__logo{height:2.1rem}
.vendor__logo[src*="apc"],.vendor__logo[src*="afristorm"],
.vendor__logo[src*="hp.png"]{height:2.5rem}}
/* --- V1.6-6R : bloc collectif de gouvernance ----------------------------- */
/* .gov-duo definissait la largeur par sa grille. Le bloc solo la definit
lui-meme. On ne touche PAS au positionnement interne de .ph, qui gere deja
le ratio et le cadrage. */
.gov-solo{margin-top:1.25rem;max-width:60rem}
/* --- V1.7 : chronologie -------------------------------------------------- */
.chrono{list-style:none;margin:1.5rem 0 0;padding:0;
display:grid;gap:0;border-top:1px solid var(--line,#e5e5e5)}
.chrono__i{display:grid;grid-template-columns:6rem 1fr;gap:1rem;
padding:.85rem 0;border-bottom:1px solid var(--line,#e5e5e5);align-items:baseline}
.chrono__y{font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent,#b5121b)}
.chrono__p{color:var(--ink,#111)}
@media (max-width:36rem){.chrono__i{grid-template-columns:4.5rem 1fr;gap:.75rem}}
/* --- V1.8 : sequence culture --------------------------------------------- */
/* Composition editoriale : grand visuel, alternance image et texte. Aucune
grille de cartes identiques, aucune galerie. */
.cult__hero{margin-top:1.75rem}
.cult__split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem;
align-items:start}
.cult__split--media{align-items:center}
.cult__txt h3{margin:0 0 .5rem}
.cult__txt p{margin:0 0 .9rem}
.cult__vig{max-width:22rem;margin-top:1rem}
.cult__vig--wide{max-width:30rem;margin:2rem auto 0}
.cult__cta{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;
align-items:center}
@media (max-width:60rem){
/* Ordre de lecture conserve : texte puis image, jamais l'inverse. */
.cult__split{grid-template-columns:1fr;gap:1.5rem}
.cult__vig,.cult__vig--wide{max-width:none}
}
/* --- V1.8R : micro-bloc de la photographie de competition ---------------- */
.cult__proof{max-width:30rem;margin:2rem auto 0}
.cult__proof h3{margin:.9rem 0 .4rem;font-size:1.0625rem}
.cult__proof p{margin:0;font-size:.9375rem;color:var(--ink-2,#555)}
/* --- V1.8.2 : equilibre du pilier sport ---------------------------------- */
/* Le bloc « Bouger et progresser » n'a plus de vignette : sans compensation,
sa colonne paraitrait vide face au pilier « Le collectif ». */
.cult__split .cult__txt{align-self:start}
.cult__split .cult__txt p:last-child{margin-bottom:0}
/* UAT 07/09/2026 — §6B : debordement horizontal a 320 px sur les pages a
formulaire. Les items de grille ont min-width:auto par defaut : un contenu
insecable empeche la colonne de retrecir sous la largeur du viewport.
Correction minimale, sans effet au-dela de la contrainte. */
.form > .field,
.form > .field--full { min-width: 0 }
.field > .hint,
.field > label,
.field .req { overflow-wrap: anywhere }