/* ==========================================================================
   AD GEST 06
   Principe : le magenta est un accent, jamais un fond de lecture.
   Le texte se lit toujours en encre sombre sur papier clair, ou l'inverse.
   ========================================================================== */

/* --- Polices auto-hébergées (aucune requête vers un service tiers) -------- */
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}

/* --- Jetons -------------------------------------------------------------- */
:root{
  /* encre et papier */
  --encre:#150B13;          /* noir aubergine, dérivé du noir du logo */
  --encre-2:#463C46;        /* texte courant */
  --gris:#6E6472;
  --gris-2:#9C93A4;
  --papier:#FFFFFF;
  --voile:#F7F3F7;          /* voile lilas très pâle */
  --filet:#E8E2E9;

  /* accents de marque */
  --magenta:#FF00C0;        /* uniquement en aplat, jamais sous du texte */
  --encre-magenta:#96016F;  /* la même famille, lisible en texte (7,2:1) */
  --rose:#FF7FFF;
  --rose-voile:#FFF0FC;

  --titre:'Newsreader',Georgia,serif;
  --texte:'Inter',system-ui,-apple-system,sans-serif;

  --large:1120px;
  --etroit:720px;
  --gouttiere:clamp(22px,5vw,44px);
  --rythme:clamp(76px,9vw,124px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre-2);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%}
a{color:inherit}

.large{max-width:var(--large);margin:0 auto;padding-inline:var(--gouttiere)}
.section{padding-block:var(--rythme)}

/* --- Typographie --------------------------------------------------------- */
h1,h2,h3{font-family:var(--titre);color:var(--encre);font-weight:500;letter-spacing:-.018em}

h1{font-size:clamp(40px,5.4vw,64px);line-height:1.08;margin:0 0 24px}
h2{font-size:clamp(30px,3.7vw,44px);line-height:1.14;margin:0 0 18px}
h3{font-size:20px;line-height:1.3;font-weight:600;margin:0 0 8px}

h1 em,h2 em{font-style:italic;color:var(--encre-magenta)}

.surtitre{
  font-family:var(--texte);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-magenta);
  margin:0 0 20px;display:flex;align-items:center;gap:11px;
}
.surtitre::before{content:"";width:22px;height:6px;background:var(--magenta);border-radius:1.5px;flex:none}
.surtitre.pale{color:var(--rose)}
.surtitre.pale::before{background:var(--rose)}

.chapo{font-size:19px;line-height:1.62;color:var(--encre-2);max-width:56ch;margin:0}
.mesure{max-width:60ch}
.gris{color:var(--gris)}

/* --- Boutons ------------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--texte);font-size:15px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;padding:14px 26px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.bouton--plein{background:var(--encre-magenta);color:#fff}
.bouton--plein:hover{background:var(--encre);transform:translateY(-1px)}
.bouton--creux{border-color:var(--filet);color:var(--encre);background:#fff}
.bouton--creux:hover{border-color:var(--encre);transform:translateY(-1px)}
.bouton--clair{border-color:rgba(255,255,255,.3);color:#fff}
.bouton--clair:hover{background:#fff;color:var(--encre);border-color:#fff}

a:focus-visible,button:focus-visible{
  outline:2.5px solid var(--encre-magenta);outline-offset:3px;border-radius:3px;
}

/* --- En-tête : barre + rangée d'onglets --------------------------------- */
.barre{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--filet);
}
.barre__haut{display:flex;align-items:center;gap:22px;height:66px}
.barre__logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.barre__logo img{width:24px;height:auto;display:block}
.barre__nom{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--encre)}
.barre__nom em{font-style:normal;color:var(--magenta)}
.barre__tel{margin-left:auto;font-size:14.5px;font-weight:600;text-decoration:none;color:var(--encre);white-space:nowrap}
.barre__tel:hover{color:var(--encre-magenta)}
.bouton--petit{padding:10px 18px;font-size:14px}

/* Les onglets : l'onglet de la page courante porte un filet magenta (aplat, pas de texte). */
.onglets__rangee{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.onglets__rangee::-webkit-scrollbar{display:none}
.onglets a{
  position:relative;flex:none;padding:11px 16px 13px;font-size:14.5px;font-weight:500;
  color:var(--gris);text-decoration:none;white-space:nowrap;border-radius:10px 10px 0 0;
  transition:color .15s,background .15s;
}
.onglets a:first-child{margin-left:-16px}
.onglets a:hover{color:var(--encre);background:var(--voile)}
.onglets a[aria-current="page"]{color:var(--encre);font-weight:600;background:var(--voile)}
.onglets a[aria-current="page"]::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--magenta);border-radius:3px 3px 0 0;
}

@media(max-width:700px){
  .barre__haut{height:58px;gap:14px}
  .barre__tel{display:none}
  .barre__haut .bouton--petit{margin-left:auto;padding:9px 14px;font-size:13px}
  .onglets{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .onglets a{padding:10px 13px 12px;font-size:14px}
  .onglets a:first-child{margin-left:-13px}
  .onglets a[aria-current="page"]::after{left:13px;right:13px}
}

/* --- Accroche ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-block:clamp(60px,8vw,104px) clamp(60px,8vw,100px)}
.hero::before{
  content:"";position:absolute;top:-30%;right:-8%;width:58%;height:130%;
  background:radial-gradient(closest-side,rgba(255,0,192,.09),transparent 70%);
  pointer-events:none;
}
.hero__grille{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,6vw,72px);align-items:center;position:relative;z-index:1;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__visuel{display:flex;justify-content:center}
/* Apparition du cube : sur l'image entière, jamais tuile par tuile.
   Un logo ne doit pas pouvoir s'afficher incomplet si l'animation est coupée. */
.cube{
  width:min(100%,300px);height:auto;display:block;
  animation:leve .7s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes leve{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.cube{animation:none}}

@media(max-width:860px){
  .hero__grille{grid-template-columns:1fr;gap:40px}
  .hero__visuel{order:-1;justify-content:flex-start}
  .cube{width:min(52%,200px)}
}

/* --- Bandeau de repères -------------------------------------------------- */
.reperes{border-block:1px solid var(--filet)}
.reperes__grille{display:grid;grid-template-columns:repeat(3,1fr)}
.repere{padding:30px 34px 30px 0}
.repere + .repere{border-left:1px solid var(--filet);padding-left:34px}
.repere b{
  display:block;font-family:var(--titre);font-weight:600;font-size:19px;
  color:var(--encre);letter-spacing:-.015em;margin-bottom:5px;
}
.repere p{margin:0;font-size:14.5px;color:var(--gris);line-height:1.55}
@media(max-width:760px){
  .reperes__grille{grid-template-columns:1fr}
  .repere{padding:22px 0}
  .repere + .repere{border-left:0;border-top:1px solid var(--filet);padding-left:0}
}

/* --- Prestations : cartes claires, la couleur en repère ------------------ */
.entete{max-width:var(--etroit);margin-bottom:clamp(40px,5vw,60px)}

.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.carte{
  background:var(--papier);border:1px solid var(--filet);border-radius:16px;
  padding:32px 30px 30px;position:relative;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.carte::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--encre);
}
.carte--2::before{background:var(--magenta)}
.carte--3::before{background:var(--rose);height:4px}
.carte:hover{border-color:#D6CDD8;box-shadow:0 14px 40px -22px rgba(21,11,19,.28);transform:translateY(-3px)}
.carte__marque{width:34px;height:34px;display:block;margin-bottom:20px}
.carte h3{margin-bottom:4px}
.carte__sous{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-2);margin:0 0 24px;
}
.carte ul{list-style:none;margin:0;padding:0}
.carte li{padding:15px 0;border-top:1px solid var(--filet)}
.carte li strong{display:block;font-size:15.5px;font-weight:600;color:var(--encre);margin-bottom:2px}
.carte{display:flex;flex-direction:column}
.carte ul{flex:1}
.carte li:last-child{border-bottom:1px solid var(--filet)}
.carte__lien{margin-top:22px;font-size:15px;font-weight:600;color:var(--encre-magenta);text-decoration:none}
.carte__lien:hover{color:var(--encre)}
.carte li span{font-size:15px;line-height:1.55;color:var(--gris)}
@media(max-width:920px){.cartes{grid-template-columns:1fr}}

/* --- Formation : le seul bloc sombre du site ----------------------------- */
.formation{background:var(--encre);color:#D8D0D8}
.formation h2{color:#fff}
.formation h2 em{color:var(--rose)}
.formation .mesure{margin:0 0 20px;color:#BCB2BE}
.formation__grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:start}
.formation .bouton--clair{margin-top:12px}

.modalites{list-style:none;margin:0;padding:0}
.modalites li{padding:20px 0;border-top:1px solid rgba(255,255,255,.13)}
.modalites li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.modalites b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose);margin-bottom:6px;
}
.modalites span{font-size:15.5px;line-height:1.58;color:#BCB2BE}
@media(max-width:860px){.formation__grille{grid-template-columns:1fr;gap:36px}}

/* --- Méthode : une vraie séquence, donc numérotée ------------------------ */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,44px);counter-reset:e}
.etape{counter-increment:e;padding-top:22px;border-top:1px solid var(--filet);position:relative}
.etape::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--magenta)}
.etape__n{
  display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--gris-2);margin-bottom:12px;
}
.etape::before{content:counter(e,decimal-leading-zero);display:none}
.etape p{margin:0;font-size:15.5px;line-height:1.62;color:var(--gris)}
@media(max-width:860px){.etapes{grid-template-columns:1fr}}

/* --- Contact ------------------------------------------------------------- */
.contact{background:var(--voile);border-top:1px solid var(--filet)}
.contact__grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,72px);align-items:start}

.coordonnees{list-style:none;margin:30px 0 0;padding:0}
.coordonnees li{padding:15px 0;border-top:1px solid var(--filet);display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline}
.coordonnees li:last-child{border-bottom:1px solid var(--filet)}
.coordonnees b{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-2)}
.coordonnees a{font-size:16.5px;font-weight:600;color:var(--encre);text-decoration:none}
.coordonnees a:hover{color:var(--encre-magenta)}
.coordonnees span{font-size:16px;color:var(--encre-2)}

.appel{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:clamp(26px,3.2vw,34px);display:flex;flex-direction:column;gap:12px}
.appel__titre{font-family:var(--titre);font-size:26px;font-weight:500;color:var(--encre);margin:0}
.appel .gris{margin:0 0 10px;line-height:1.6}
.appel .bouton{width:100%;justify-content:center;text-align:center}
.rgpd{font-size:13px;line-height:1.55;color:var(--gris);margin:8px 0 0}
@media(max-width:860px){.contact__grille{grid-template-columns:1fr}}

/* --- Pied de page -------------------------------------------------------- */
.pied{background:var(--encre);color:#8E8494;padding-block:48px 28px;font-size:14px}
.pied__haut{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.pied__haut img{width:100px;height:auto;display:block}
.pied nav{display:flex;flex-wrap:wrap;gap:24px}
.pied a{color:#C4BAC6;text-decoration:none;font-size:14px}
.pied a:hover{color:var(--rose)}
.pied__legal{margin:22px 0 0;font-size:12.5px;line-height:1.7;max-width:78ch;color:#7E7484}

/* --- Pages intérieures -------------------------------------------------- */
.section--voile{background:var(--voile);border-block:1px solid var(--filet)}
.section--serre{padding-block:clamp(48px,6vw,80px) var(--rythme)}
.h1--moyen{font-size:clamp(34px,4.2vw,50px)}

/* En-tête de page : le filet reprend la face du cube correspondante */
.tete{position:relative;overflow:hidden;padding-block:clamp(52px,7vw,92px) clamp(8px,2vw,16px)}
.tete::before{
  content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%;
  background:radial-gradient(closest-side,rgba(255,0,192,.07),transparent 70%);pointer-events:none;
}
.tete .large{position:relative}
.tete--admin .surtitre::before{background:var(--encre)}
.tete--formation .surtitre::before{background:var(--rose)}

.volets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.volets--2{grid-template-columns:repeat(2,1fr)}
.volet{
  background:var(--papier);border:1px solid var(--filet);border-radius:16px;
  padding:30px 30px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.volet::before{content:"";position:absolute;top:0;left:0;width:48px;height:3px;background:var(--magenta)}
.volet__n{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gris-2);margin-bottom:14px}
.volet__titre{font-size:clamp(22px,2.2vw,26px);line-height:1.2;margin:0 0 10px}
.volet > p{margin:0;font-size:15.5px;line-height:1.6;color:var(--gris)}
.liste{list-style:none;margin:20px 0 0;padding:0}
.liste li{position:relative;padding:10px 0 10px 20px;border-top:1px solid var(--filet);font-size:15px;line-height:1.5;color:var(--encre-2)}
.liste li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:2px;background:var(--magenta)}
@media(max-width:920px){.volets,.volets--2{grid-template-columns:1fr}}

/* Lien vers un outil externe (RH-Facility, Opilot) */
.outil{
  margin-top:auto;display:grid;gap:2px;padding:16px 18px;border-radius:12px;
  background:var(--voile);border:1px solid var(--filet);text-decoration:none;
  transition:border-color .18s,transform .18s;
}
.volet .outil{margin-top:24px}
.outil:hover{border-color:var(--encre-magenta);transform:translateY(-2px)}
.outil__label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.outil__nom{font-family:var(--titre);font-size:21px;font-weight:600;color:var(--encre)}
.outil__url{font-size:14px;color:var(--encre-magenta)}

.catalogue{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);align-items:stretch}
.catalogue__vide{border:1.5px dashed #D6CDD8;border-radius:16px;padding:clamp(26px,3.4vw,40px)}
.catalogue__vide .gris{margin:0}
.outil--grand{margin-top:0;padding:26px;background:var(--papier);align-content:center}
.outil--grand .outil__nom{font-size:30px}
.declaration{grid-column:1/-1;margin:0;font-size:13px;line-height:1.55;color:var(--gris)}
@media(max-width:860px){.catalogue{grid-template-columns:1fr}}

/* Bandeau d'appel en bas de page */
.bande{background:var(--voile);border-top:1px solid var(--filet);padding-block:clamp(48px,6vw,76px)}
.bande__inner{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between}
.bande h2{margin:0 0 6px}
.bande .gris{margin:0}
.bande__cta{display:flex;flex-wrap:wrap;gap:12px}

/* Page texte (mentions légales) */
.page-texte{max-width:var(--etroit);padding-block:var(--rythme)}
.page-texte h1{font-size:clamp(34px,4.4vw,50px);margin-bottom:34px}
.page-texte h2{font-size:clamp(22px,2.6vw,28px);margin-top:44px}
.page-texte p{margin:0 0 16px}
.page-texte a:not(.bouton){color:var(--encre-magenta)}

/* --- Révélation au défilement -------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}