/* ============================================================
   DN Exposer LLC — pages.css v2
   Chargee sur toutes les pages, apres main.css.

   Couvre les pages qui n'ont pas de feuille propre :
   accueil, pages de service, a propos, contact, pages legales,
   page auteur, 404 et page de statut d'inscription.

   Aucun token redefini ici : tout vient du :root de main.css,
   qui doit donc etre charge avant. Meme palette, memes rayons,
   memes ombres, meme grammaire visuelle que le reste du site.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. ACCUEIL
   ══════════════════════════════════════════════════════════════ */

.home-hero{
  padding:80px 0 88px;
  background:var(--cream);
  position:relative;overflow:hidden;
}
/* Halo rose derriere le titre, repris du hero historique */
.home-hero::before{
  content:'';position:absolute;pointer-events:none;
  width:640px;height:640px;border-radius:50%;
  top:-280px;right:-180px;
  background:radial-gradient(circle,var(--rose-glow) 0%,transparent 70%);
}
.home-hero .container{position:relative;z-index:1}

.home-hero__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4rem);
  line-height:1.1;color:var(--slate);
  max-width:15ch;margin-bottom:26px;
}
.home-hero__lead{
  font-size:1.12rem;color:var(--muted);
  line-height:1.8;max-width:600px;margin-bottom:38px;
}
.home-hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ── Les trois portes d'entree ─────────────────────────────── */
.home-services{padding:88px 0;background:var(--cream-mid)}
.home-services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:40px;
}
.home-service{
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--r-xl);
  padding:40px 32px;position:relative;overflow:hidden;
  transition:box-shadow var(--tr-md),transform var(--tr-md);
}
.home-service:hover{box-shadow:var(--sh-md);transform:translateY(-5px)}
.home-service::after{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--rose),var(--teal));
  opacity:0;transition:opacity var(--tr-md);
}
.home-service:hover::after{opacity:1}
.home-service h3{margin-bottom:14px;font-size:1.3rem}
.home-service p{font-size:.92rem;color:var(--muted);line-height:1.75;margin-bottom:24px}
.home-service__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:600;color:var(--teal);
  transition:gap var(--tr),color var(--tr);
}
.home-service__link::after{
  content:'';width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
.home-service__link:hover{gap:12px;color:var(--teal-hover)}

/* ── Piliers ───────────────────────────────────────────────── */
.home-pillars{padding:88px 0}
.home-pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* ── Domaines disponibles ──────────────────────────────────── */
.home-domains{padding:88px 0;background:var(--cream-mid)}
.home-domains__more{margin-top:40px;text-align:center}

/* ── Derniers articles ─────────────────────────────────────── */
.home-latest{padding:88px 0}
.home-latest__more{margin-top:40px;text-align:center}

/* ── Sujets ────────────────────────────────────────────────── */
.home-topics{padding:0 0 88px}
.home-topics .section-title{margin-bottom:24px}


/* ══════════════════════════════════════════════════════════════
   2. PAGES DE SERVICE  (/broker, /brande-consulting)
   ══════════════════════════════════════════════════════════════ */

.service-hero{padding:64px 0 72px;background:var(--cream-mid)}
.service-hero__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.2rem,4.8vw,3.4rem);
  line-height:1.12;color:var(--slate);margin-bottom:20px;
}
.service-hero__lead{
  font-size:1.1rem;color:var(--muted);
  line-height:1.8;max-width:640px;margin-bottom:34px;
}

/* ── Le probleme ───────────────────────────────────────────── */
.service-problem{padding:80px 0}
.service-problem h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:20px}
.service-problem > .container > p{
  font-size:1.02rem;color:var(--muted);line-height:1.8;
  max-width:680px;margin-bottom:8px;
}

.service-list{display:flex;flex-direction:column;gap:18px;margin-top:28px;max-width:760px}
.service-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.96rem;line-height:1.75;color:var(--text);
}
.service-list li::before{
  content:'';flex-shrink:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--rose);margin-top:11px;
}
.service-list strong{color:var(--slate)}

/* ── Le processus ──────────────────────────────────────────
   Meme grammaire que les etapes numerotees du corps d'article :
   pastille cerclee de rose, filet degrade vertical.           */
.service-process{padding:80px 0;background:var(--cream-mid)}
.service-process h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:32px}

.service-steps{
  counter-reset:svcstep;position:relative;
  display:flex;flex-direction:column;max-width:820px;
}
.service-steps::before{
  content:'';position:absolute;left:27px;top:38px;bottom:38px;
  width:2px;background:linear-gradient(to bottom,var(--rose),var(--teal));opacity:.25;
}
.service-steps > li{
  display:flex;gap:24px;padding:22px 0;
  counter-increment:svcstep;
}
.service-steps > li::before{
  content:counter(svcstep);flex-shrink:0;
  width:56px;height:56px;border-radius:50%;
  background:var(--white);border:2px solid var(--rose);color:var(--rose);
  font-family:var(--f-display);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-xs);position:relative;z-index:1;
}
.service-steps h3{margin-bottom:10px;font-size:1.2rem}
.service-steps p{font-size:.94rem;color:var(--muted);line-height:1.75}
.service-steps a{color:var(--teal);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(42,157,143,.3)}
.service-steps a:hover{text-decoration-color:var(--teal)}

/* ── Ce que le service fait, et ou il s'arrete ─────────────
   Le contraste est volontaire. La colonne des limites n'est pas
   une mention reléguee : elle a le meme poids que l'autre,
   parce que c'est ce qui distingue un conseil d'un argumentaire. */
.service-limits{padding:80px 0}
.service-limits h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:32px}
.service-limits__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.service-limits__grid > div{
  background:var(--white);border-radius:var(--r-xl);
  padding:36px 32px;box-shadow:var(--sh-card);
}
.service-limits__grid > div:last-child{
  background:var(--cream-mid);box-shadow:none;border:1px solid var(--border);
}
.service-limits__grid h3{margin-bottom:18px;font-size:1.2rem}
.service-limits__grid ul{display:flex;flex-direction:column;gap:12px}
.service-limits__grid li{
  font-size:.92rem;color:var(--muted);line-height:1.7;
  padding-left:20px;position:relative;
}
.service-limits__grid li::before{
  content:'';position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--teal);
}
.service-limits__grid > div:last-child li::before{background:var(--light)}

/* ── Blocs de bas de page ──────────────────────────────────── */
.service-selling,
.service-alt{padding:72px 0;background:var(--cream-mid)}
.service-selling .container,
.service-alt .container{max-width:820px}
.service-selling h2,
.service-alt h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:18px}
.service-selling p,
.service-alt p{font-size:.98rem;color:var(--muted);line-height:1.8;margin-bottom:16px}
.service-selling p:last-child,
.service-alt p:last-child{margin-bottom:0}
.service-selling a,
.service-alt a{
  color:var(--teal);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(42,157,143,.3);
  transition:color var(--tr),text-decoration-color var(--tr);
}
.service-selling a:hover,
.service-alt a:hover{color:var(--rose);text-decoration-color:var(--rose)}


/* ══════════════════════════════════════════════════════════════
   3. A PROPOS
   ══════════════════════════════════════════════════════════════ */

.about-hero{padding:64px 0 64px;background:var(--cream-mid);text-align:center}
.about-hero__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.2rem,4.8vw,3.4rem);
  line-height:1.12;color:var(--slate);margin-bottom:18px;
}
.about-hero__lead{
  font-size:1.08rem;color:var(--muted);
  line-height:1.8;max-width:620px;margin:0 auto;
}

/* Colonne de lecture : le texte long ne depasse jamais
   cette largeur, quelle que soit la taille de l'ecran. */
.about-narrow{max-width:780px}

.about-origin,
.about-model,
.about-facts,
.about-limits,
.about-cta{padding:64px 0}
.about-model,
.about-limits{background:var(--cream-mid)}

.about-origin h2,
.about-model h2,
.about-facts h2,
.about-limits h2,
.about-cta h2{
  font-size:clamp(1.5rem,2.8vw,2rem);
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.about-origin p,
.about-model p,
.about-limits p,
.about-cta p{font-size:1.02rem;color:var(--text);line-height:1.85;margin-bottom:18px}
.about-origin p:last-child,
.about-model p:last-child,
.about-limits p:last-child,
.about-cta p:last-child{margin-bottom:0}

.about-origin a,
.about-model a,
.about-facts a,
.about-limits a,
.about-cta a{
  color:var(--teal);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(42,157,143,.3);
  transition:color var(--tr),text-decoration-color var(--tr);
}
.about-origin a:hover,
.about-model a:hover,
.about-facts a:hover,
.about-limits a:hover,
.about-cta a:hover{color:var(--rose);text-decoration-color:var(--rose)}

.about-list{display:flex;flex-direction:column;gap:14px;margin:24px 0}
.about-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.98rem;color:var(--muted);line-height:1.75;
}
.about-list li::before{
  content:'';flex-shrink:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--rose);margin-top:11px;
}
.about-list strong{color:var(--slate)}

/* ── Les auteurs ───────────────────────────────────────────── */
.about-team{padding:80px 0;background:var(--white)}
.about-team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.about-author{
  background:var(--cream);border-radius:var(--r-xl);
  padding:40px 28px 34px;text-align:center;
  transition:box-shadow var(--tr-md),transform var(--tr-md);
}
.about-author:hover{box-shadow:var(--sh-md);transform:translateY(-5px)}
.about-author__avatar{
  width:120px;height:120px;margin:0 auto 20px;
  border-radius:50%;object-fit:cover;object-position:top center;
  border:4px solid var(--white);box-shadow:var(--sh-sm);
}
.about-author__name{font-size:1.2rem;margin-bottom:6px}
.about-author__name a{color:var(--slate);transition:color var(--tr)}
.about-author__name a:hover{color:var(--rose)}
.about-author__title{
  font-size:.68rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--rose);margin-bottom:14px;
}
.about-author__bio{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:14px}
.about-author__location{
  font-size:.78rem;color:var(--light);
  padding-top:14px;border-top:1px solid var(--border);
}


/* ══════════════════════════════════════════════════════════════
   4. CONTACT
   ══════════════════════════════════════════════════════════════ */

.contact-hero{padding:64px 0 56px;background:var(--cream-mid);text-align:center}
.contact-hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem);margin-bottom:16px}
.contact-hero p{font-size:1.05rem;color:var(--muted);line-height:1.8;max-width:600px;margin:0 auto}

.contact-wrapper{
  display:grid;grid-template-columns:380px 1fr;
  gap:48px;align-items:start;
  padding-top:64px;padding-bottom:88px;
}

/* ── Colonne d'information ─────────────────────────────────── */
.contact-info{position:sticky;top:calc(var(--nav-h) + 24px)}
.info-card{
  background:var(--white);border-radius:var(--r-xl);
  padding:32px 28px;box-shadow:var(--sh-card);
}
.info-card h2{font-size:1.25rem;margin-bottom:10px}
.info-card > p{font-size:.9rem;color:var(--muted);line-height:1.7;margin-bottom:22px}

.info-list{display:flex;flex-direction:column;gap:4px}
.info-list li{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--cream-mid);
}
.info-list li:last-child{border-bottom:none}

.info-icon{
  flex-shrink:0;width:38px;height:38px;padding:9px;
  border-radius:var(--r-md);
  background:var(--cream);color:var(--rose);
}
.info-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.info-content strong{font-size:.76rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--light)}
.info-content span{font-size:.9rem;color:var(--muted);line-height:1.55}
.info-content a{
  font-size:.92rem;color:var(--teal);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(42,157,143,.3);
  overflow-wrap:anywhere;
}
.info-content a:hover{color:var(--rose);text-decoration-color:var(--rose)}

.contact-expectations{
  margin-top:24px;padding:22px 24px;
  background:var(--cream-mid);border-radius:var(--r-lg);
}
.contact-expectations h3{font-size:1rem;margin-bottom:12px}
.contact-expectations p{font-size:.86rem;color:var(--muted);line-height:1.7;margin-bottom:12px}
.contact-expectations p:last-child{margin-bottom:0}
.contact-expectations a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.contact-expectations a:hover{color:var(--rose)}

/* ── Formulaire ────────────────────────────────────────────── */
.contact-form-container{
  background:var(--white);border-radius:var(--r-xl);
  padding:44px 40px;box-shadow:var(--sh-md);
}


/* ══════════════════════════════════════════════════════════════
   5. PAGES LEGALES ET CONTENU LONG
   Le corps de ces pages est ecrit sans classes : les titres,
   paragraphes et listes sont stylees par descendance depuis
   .legal-container.
   ══════════════════════════════════════════════════════════════ */

.legal-page-header{padding:56px 0 40px;text-align:center}
.legal-page-header h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:14px}
.last-updated{font-size:.86rem;color:var(--muted)}

.legal-content-section{padding-bottom:88px}
.legal-container{
  max-width:780px;margin:0 auto;padding:0 32px;
  font-size:1.02rem;line-height:1.85;color:var(--text);
}

.legal-container h2{
  font-size:1.5rem;margin:48px 0 16px;
  padding-top:24px;border-top:1px solid var(--border);
}
.legal-container h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.legal-container h3{font-size:1.15rem;margin:32px 0 10px}
.legal-container p{margin-bottom:18px}

.legal-container a{
  color:var(--teal);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(42,157,143,.3);
  transition:color var(--tr),text-decoration-color var(--tr);
}
.legal-container a:hover{color:var(--rose);text-decoration-color:var(--rose)}

.legal-container ul,
.legal-container ol{margin:0 0 20px 24px}
.legal-container li{margin-bottom:10px;line-height:1.75}
.legal-container ul li{list-style:disc}
.legal-container ol li{list-style:decimal}

.legal-container blockquote{
  margin:28px 0;padding:20px 24px;
  border-left:4px solid var(--rose);
  background:var(--rose-light);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--f-display);font-size:1.05rem;
  color:var(--slate);line-height:1.6;font-style:italic;
}
.legal-container strong{color:var(--slate)}
.legal-container hr{border:none;border-top:1px solid var(--border);margin:40px 0}

.legal-container table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.92rem}
.legal-container th{
  background:var(--cream-mid);padding:12px 16px;text-align:left;
  font-weight:600;color:var(--slate);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:2px solid var(--border);
}
.legal-container td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.legal-container tr:last-child td{border-bottom:none}

/* Clauses commerciales encore ouvertes. Le style est
   volontairement voyant : un contrat dont une clause manque
   doit se voir au premier coup d'oeil, pas se decouvrir a la
   premiere contestation. */
.legal-gap{
  background:#FFF8E6;border-left:4px solid #B45309;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 22px;margin:24px 0;
}
.legal-gap p{margin-bottom:8px;font-size:.92rem;color:#7A4A00;line-height:1.7}
.legal-gap p:last-child{margin-bottom:0}
.legal-gap strong{color:#7A4A00}

/* Identite de l'editeur, en pied de page legale */
.legal-identity{
  margin-top:48px;padding:24px 28px;
  background:var(--cream-mid);border-radius:var(--r-lg);
  font-size:.92rem;line-height:1.8;color:var(--muted);
}
.legal-identity p{margin-bottom:0}
.legal-identity strong{color:var(--slate)}

/* Navigation entre les quatre politiques */
.legal-nav{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:32px;padding-top:28px;
  border-top:1px solid var(--border);
}
.legal-nav a{
  padding:8px 18px;font-size:.84rem;font-weight:600;
  color:var(--muted);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-pill);
  text-decoration:none;
  transition:color var(--tr),border-color var(--tr),background var(--tr);
}
.legal-nav a:hover{color:var(--rose);border-color:var(--rose);background:var(--rose-light)}
.legal-nav a[aria-current="page"]{color:#fff;background:var(--rose);border-color:var(--rose);pointer-events:none}


/* ══════════════════════════════════════════════════════════════
   6. PAGE AUTEUR
   ══════════════════════════════════════════════════════════════ */

.author-profile{padding:56px 0 48px;background:var(--cream-mid)}
.author-profile__inner{
  display:flex;align-items:flex-start;gap:36px;
  max-width:900px;margin:0 auto;padding:0 32px;
}
.author-profile__avatar{
  width:160px;height:160px;flex-shrink:0;
  border-radius:50%;padding:4px;
  object-fit:cover;object-position:top center;
  background:linear-gradient(135deg,var(--rose),var(--teal));
  border:4px solid var(--white);
}
.author-profile__content{min-width:0}
.author-profile__name{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:8px}
.author-profile__expertise{
  font-size:.74rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--rose);margin-bottom:18px;
}
.author-profile__bio p{font-size:.98rem;color:var(--muted);line-height:1.8;margin-bottom:14px;max-width:620px}
.author-profile__bio p:last-child{margin-bottom:0}

.author-profile__facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:22px;
}
.author-profile__facts li{
  padding:6px 16px;border-radius:var(--r-pill);
  background:var(--white);
  font-size:.82rem;color:var(--muted);
}
.author-profile__facts strong{color:var(--slate)}
.author-profile__facts a{color:var(--teal);font-weight:600}
.author-profile__facts a:hover{color:var(--rose)}

.author-articles{padding-top:64px}


/* ══════════════════════════════════════════════════════════════
   7. PAGES D'ETAT  (404, confirmation d'inscription)
   ══════════════════════════════════════════════════════════════ */

.error-page,
.status-page{padding:88px 0 72px;text-align:center}

.error-page__inner,
.status-page__inner{max-width:620px;margin:0 auto;padding:0 32px}

.error-page__code{
  font-family:var(--f-display);
  font-size:clamp(4rem,12vw,7rem);
  color:var(--rose);line-height:1;margin-bottom:8px;
}
.error-page__title,
.status-page__title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}

.error-page__message,
.status-page__message{font-size:1.02rem;color:var(--muted);line-height:1.8;margin-bottom:32px}

.error-page__search{margin:0 auto 32px;max-width:480px}

.error-page__actions,
.status-page__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.status-page__help{margin-top:28px;font-size:.88rem;color:var(--light);line-height:1.7}
.status-page__help a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.status-page__help a:hover{color:var(--rose)}

/* Quatre etats possibles : success, info, warning, error. Seuls
   les deux extremes changent de couleur, les deux autres restent
   neutres : un message d'information colore se lit comme une
   alerte et inquiete pour rien. */
.status-page--success .status-page__title{color:var(--teal)}
.status-page--error .status-page__title{color:var(--rose)}
.status-page--warning .status-page__title{color:#8A5D00}
.status-page--info .status-page__title,
.status-page--success .status-page__message,
.status-page--info .status-page__message{color:var(--slate)}
.status-page--success .status-page__message,
.status-page--info .status-page__message{color:var(--muted)}

/* Suggestions de la page 404 : elle renvoie vers du contenu
   reel plutot que vers un cul-de-sac. */
.error-page__section{padding:56px 0 72px;background:var(--cream-mid)}
.error-page__section .section-title{margin-bottom:24px}


/* ══════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1080px){
  .home-services__grid,
  .home-pillars__grid,
  .about-team__grid{grid-template-columns:repeat(2,1fr)}

  .contact-wrapper{grid-template-columns:1fr;gap:36px}
  .contact-info{position:static}
}

@media(max-width:768px){
  .home-hero{padding:48px 0 64px}
  .home-hero__title{max-width:none}
  .home-hero__actions{flex-direction:column;align-items:stretch}
  .home-hero__actions .cta-button{width:100%}

  .home-services,
  .home-pillars,
  .home-domains,
  .home-latest{padding:64px 0}
  .home-topics{padding-bottom:64px}
  .home-services__grid,
  .home-pillars__grid{grid-template-columns:1fr}

  .service-hero{padding:40px 0 56px}
  .service-hero .cta-button{width:100%}
  .service-problem,
  .service-process,
  .service-limits{padding:56px 0}
  .service-limits__grid{grid-template-columns:1fr}
  .service-steps::before{display:none}
  .service-steps > li{gap:16px}
  .service-steps > li::before{width:44px;height:44px;font-size:.85rem}
  .service-selling,
  .service-alt{padding:56px 0}

  .about-hero{padding:40px 0 48px}
  .about-origin,
  .about-model,
  .about-facts,
  .about-limits,
  .about-cta{padding:48px 0}
  .about-team{padding:56px 0}
  .about-team__grid{grid-template-columns:1fr}

  .contact-hero{padding:40px 0 40px}
  .contact-wrapper{padding-top:40px;padding-bottom:64px}
  .contact-form-container{padding:32px 24px}

  .legal-page-header{padding:40px 0 28px}
  .legal-container{padding:0 20px}
  .legal-container h2{font-size:1.3rem}
  .legal-content-section{padding-bottom:64px}

  .author-profile__inner{flex-direction:column;align-items:center;text-align:center;padding:0 20px}
  .author-profile__avatar{width:128px;height:128px}
  .author-profile__bio p{text-align:left}
  .author-profile__facts{justify-content:center}
  .author-articles{padding-top:48px}

  .error-page,
  .status-page{padding:56px 0 56px}
  .error-page__inner,
  .status-page__inner{padding:0 20px}
  .error-page__actions,
  .status-page__actions{flex-direction:column}
  .error-page__actions .cta-button,
  .status-page__actions .cta-button{width:100%}
}


/* ══════════════════════════════════════════════════════════════
   9. ACCUEIL, VARIANTE HERO VIDEO
   Ajoute avec le retour de la structure de l'ancienne page
   d'accueil. Les composants eux-memes (hero-video, anchor-bar,
   marquee, how, stats, why, team-c, learn, yt-facade, videos,
   faq, cta) sont dans main.css et ne changent pas : il ne s'agit
   ici que de les raccorder au gabarit du nouveau moteur.
   ══════════════════════════════════════════════════════════════ */

/* <main> porte un padding-top egal a la hauteur de l'en-tete fixe,
   pour que la premiere section de chaque page ne passe pas
   dessous. Le hero video est le cas ou ce comportement est
   exactement l'inverse de ce qu'on veut : la video doit couler
   sous l'en-tete translucide, et c'est son propre padding-top qui
   tient le texte a l'ecart. La marge negative annule donc la
   compensation, sur cette section uniquement.

   Les deux selecteurs couvrent les deux ordres possibles : hero
   en premier, ou barre d'ancres puis hero. */
main#main-content > .hero-video:first-child,
main#main-content > .anchor-bar + .hero-video{
  margin-top:calc(var(--nav-h) * -1);
}

/* La barre d'ancres vit maintenant dans <main> et non plus entre
   l'en-tete et lui. Elle reste collee sous la navigation. */
main#main-content > .anchor-bar{margin-bottom:0}

/* Le bandeau defilant touche le bas du hero : sans cette regle,
   la marge negative ci-dessus laisse apparaitre un filet de fond
   creme entre les deux. */
.hero-video + .marquee{margin-top:0}

/* Nom d'auteur cliquable dans la section equipe. L'ancienne page
   affichait un nom mort ; il pointe maintenant vers la page
   auteur, qui existe. */
.team-c__name a{color:inherit;transition:color var(--tr)}
.team-c__name a:hover{color:var(--rose)}

/* Le credit de video etait un div, c'est un paragraphe ici : la
   mise en forme vient de main.css, seule la marge du <p> est a
   neutraliser. */
.video-card__speaker{margin:0}

/* Les deux colonnes du bloc pedagogique n'ont pas de style propre,
   elles sont posees par la grille. Les declarer evite qu'un
   lecteur de la feuille les croie oubliees. */
.learn__text{min-width:0}
.learn__media{min-width:0}

@media(max-width:768px){
  /* Sur telephone, l'en-tete fait 64px et la video 88vh : la
     marge negative suit automatiquement, --nav-h ayant change. */
  .hero-video__title{font-size:clamp(2rem,8vw,2.8rem)}
}


/* ══════════════════════════════════════════════════════════════
   10. ACCUEIL : ICONES DE SERVICE ET LOGIGRAMME DU PROCESSUS
   ══════════════════════════════════════════════════════════════ */

/* ── Cartes de service, variante a icone ───────────────────
   Les numeros ont ete retires du gabarit : ils annoncaient un
   ordre qui n'existe pas, un visiteur etant dans une de ces trois
   situations et non dans les trois a la suite. L'icone occupe
   leur place, centree, et la carte entiere passe en texte centre
   pour ne pas laisser un pictogramme seul au milieu d'un bloc
   aligne a gauche.

   .how__num et .how__ghost restent definis dans main.css : une
   autre page peut encore vouloir la version numerotee.          */
.how__card--icon{text-align:center}

.how__icon{
  width:76px;height:76px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-lg);
  transition:transform var(--tr-md),box-shadow var(--tr-md);
}
.how__icon--rose{background:var(--rose-light);color:var(--rose)}
.how__icon--teal{background:var(--teal-light);color:var(--teal)}

/* Le pictogramme monte de deux pixels quand la carte se souleve :
   sans cela il donne l'impression de rester colle au fond. */
.how__card--icon:hover .how__icon{transform:translateY(-3px);box-shadow:var(--sh-sm)}

.how__card--icon h3{margin-bottom:12px}
.how__card--icon .how__desc{margin-bottom:26px}
.how__card--icon .how__link{justify-content:center}


/* ══════════════════════════════════════════════════════════════
   LOGIGRAMME DU PROCESSUS DE NOMMAGE

   Deux rendus dans une seule feuille.

   Sans JavaScript, le conteneur n'a pas data-enhanced : les cinq
   panneaux se suivent, les fleches sont masquees, la barre reste
   lisible comme une frise. La section est complete.

   Avec JavaScript, le module 12 de main.js pose data-enhanced : un seul panneau
   reste visible, les fleches apparaissent. Les selecteurs sont
   donc tous prefixes par l'attribut, jamais l'inverse. Masquer
   par defaut et reveler en JS laisserait une section vide a tout
   visiteur dont le script n'a pas charge.
   ══════════════════════════════════════════════════════════════ */

.process{position:relative}

/* ── La frise ──────────────────────────────────────────────── */
.process__rail{
  display:flex;align-items:flex-start;
  margin:0 0 44px;padding:0;
  list-style:none;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.process__rail::-webkit-scrollbar{display:none}

.process__node{
  position:relative;
  flex:1 1 0;min-width:132px;
  display:flex;justify-content:center;
  scroll-snap-align:center;
}

/* Le trait de liaison est dessine par chaque etape, en deux
   demi-segments. C'est ce qui rend la frise independante du
   nombre d'etapes : ajouter une sixieme etape au tableau PHP ne
   demande aucune retouche ici, alors qu'un trait unique pose sur
   la barre imposerait de recalculer ses deux extremites. */
.process__node::before,
.process__node::after{
  content:'';position:absolute;top:25px;
  width:50%;height:2px;
  background:var(--border);
  transition:background var(--tr-md);
}
.process__node::before{left:0}
.process__node::after{left:50%}

/* Les deux extremites de la frise n'ont pas de voisin de ce cote. */
.process__node:first-child::before,
.process__node:last-child::after{display:none}

/* Le chemin parcouru est rose jusqu'a l'etape en cours incluse,
   gris ensuite. L'etape en cours ne colore que son segment
   d'entree : son segment de sortie mene a ce qui n'est pas
   encore fait. */
.process__node.is-done::before,
.process__node.is-done::after,
.process__node.is-current::before{background:var(--rose)}

.process__dot{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0 6px;
  background:none;border:0;cursor:pointer;
  font:inherit;text-align:center;
}

.process__num{
  position:relative;z-index:1;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--white);border:2px solid var(--border);
  color:var(--light);
  font-family:var(--f-display);font-size:1.05rem;line-height:1;
  transition:background var(--tr-md),border-color var(--tr-md),color var(--tr-md),box-shadow var(--tr-md);
}
.process__name{
  font-size:.8rem;font-weight:600;line-height:1.35;
  color:var(--muted);
  transition:color var(--tr);
}

.process__node.is-done .process__num{
  background:var(--rose);border-color:var(--rose);color:#fff;
}
.process__node.is-current .process__num{
  background:var(--white);border-color:var(--rose);color:var(--rose);
  box-shadow:0 0 0 5px var(--rose-light);
}
.process__node.is-current .process__name{color:var(--slate)}

.process__dot:hover .process__num{border-color:var(--rose)}
.process__dot:hover .process__name{color:var(--slate)}

/* ── Les panneaux ──────────────────────────────────────────── */

/* Conteneur sans style propre : c'est un point d'accroche pour le
   JavaScript et pour les selecteurs descendants. Le declarer evite
   qu'un lecteur de la feuille le croie oublie. */
.process__panels{position:relative}

.process__panel{
  max-width:760px;margin:0 auto;
  background:var(--white);border-radius:var(--r-xl);
  padding:40px 44px;box-shadow:var(--sh-card);
}
.process:not([data-enhanced]) .process__panel + .process__panel{margin-top:16px}
.process[data-enhanced] .process__panel:not(.is-active){display:none}

/* Le panneau qui apparait glisse de quelques pixels : assez pour
   signaler le changement, trop peu pour faire attendre. */
.process[data-enhanced] .process__panel.is-active{
  animation:process-in .3s var(--ease) both;
}
@keyframes process-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.process__step{
  font-size:.68rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--rose);margin-bottom:12px;
}
.process__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  color:var(--slate);line-height:1.25;margin-bottom:14px;
}
.process__text{font-size:1rem;color:var(--muted);line-height:1.8}

/* ── Les deux fleches ──────────────────────────────────────── */
.process__controls{display:none}
.process[data-enhanced] .process__controls{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:24px;
}
.process__arrow{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--white);border:1.5px solid var(--border);
  color:var(--slate);cursor:pointer;
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.process__arrow:hover:not(:disabled){
  background:var(--rose);border-color:var(--rose);color:#fff;
}
/* Desactivee et non masquee aux extremites : un bouton qui
   disparait deplace celui d'a cote sous le curseur. */
.process__arrow:disabled{opacity:.35;cursor:default}

/* Les deux modificateurs ne different que par leur pictogramme,
   pose dans le gabarit. Ils sont declares pour que main.js et la
   feuille parlent du meme objet. */
.process__arrow--prev,
.process__arrow--next{}

.process__more{text-align:center;margin-top:40px}


/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:900px){
  .process__panel{padding:32px 30px}
}

@media(max-width:768px){
  /* La frise passe en defilement horizontal : cinq etapes sur un
     ecran de telephone donneraient des libelles coupes. main.js
     amene l'etape active dans le champ de vision a chaque
     changement, le defilement n'est donc jamais a faire a la
     main. */
  .process__rail{margin-bottom:32px}
  .process__node{flex:0 0 118px;min-width:118px}
  .process__num{width:44px;height:44px;font-size:.95rem}
  .process__node::before,
  .process__node::after{top:21px}
  .process__name{font-size:.74rem}

  .process__panel{padding:26px 22px;border-radius:var(--r-lg)}
  .process__more{margin-top:32px}
  .process__more .btn{width:100%;justify-content:center}

  .how__icon{width:64px;height:64px;margin-bottom:20px}
}


/* ══════════════════════════════════════════════════════════════
   11. PORTRAIT DE L'EXPERT, ET SES DEUX MISES EN PAGE

   Un seul composant, .expert-photo, pose a trois endroits : a
   cote des trois services sur l'accueil, a cote des etapes sur
   /broker et sur /brande-consulting. Trois blocs distincts
   auraient diverge des la premiere retouche, alors que seul le
   texte change reellement.

   Les deux mises en page qui l'accueillent partagent la meme
   regle : deux colonnes, la colonne de droite collante, et un
   repli en une seule colonne des que la largeur ne suffit plus.
   ══════════════════════════════════════════════════════════════ */

/* ── Le portrait ───────────────────────────────────────────
   Photo seule, sans bloc de texte dessous : a cet endroit des
   pages, le visiteur lit la colonne de gauche, et une biographie
   en vis-a-vis lui demandait de suivre deux colonnes de texte en
   parallele.

   Trois elements composent le visuel : l'image, un filet vertical
   sur le bord droit, et un badge blanc pose en bas a gauche, qui
   deborde de l'image. Le debordement est ce qui donne la
   profondeur : un badge entierement contenu dans la photo se lit
   comme une incrustation, pas comme une etiquette.             */
.expert-photo{
  position:relative;
  margin:0;
  max-width:400px;
  /* Marge a gauche pour le debordement du badge, a droite pour le
     filet. Sans elles, les deux mordent sur la colonne voisine ou
     sortent du conteneur. */
  padding:0 14px 0 26px;
}

.expert-photo__img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/5;
  object-fit:cover;object-position:top center;
  /* Fond blanc et non creme : ces portraits sont detoures, et le
     creme derriere un detourage sur blanc dessine un halo. */
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
}

/* Filet vertical sur le bord droit. Il ne court pas sur toute la
   hauteur : arrete en haut et en bas, il encadre la photo au lieu
   de la barrer. */
.expert-photo::after{
  content:'';position:absolute;
  top:40px;bottom:40px;right:0;
  width:12px;border-radius:var(--r-xs);
  background:var(--rose);
}

/* ── Le badge ──────────────────────────────────────────────── */
.expert-photo__badge{
  position:absolute;
  left:0;bottom:34px;
  z-index:1;
  display:flex;flex-direction:column;gap:6px;
  padding:16px 24px 18px;
  background:var(--white);
  border-left:4px solid var(--rose);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  box-shadow:var(--sh-lg);
  max-width:80%;
}

.expert-photo__name{
  font-family:var(--f-display);font-weight:400;
  font-size:1.4rem;line-height:1.1;
  color:var(--slate);
  transition:color var(--tr);
}
.expert-photo__name:hover{color:var(--rose)}

.expert-photo__role{
  font-size:.62rem;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}


/* ══════════════════════════════════════════════════════════════
   ACCUEIL : LES TROIS ROUTES EN LISTE, PORTRAIT A DROITE

   Les trois cartes cote a cote ont ete abandonnees. Trois cartes
   de poids egal demandent au visiteur de comparer avant de
   comprendre qu'il n'a rien a comparer : il est dans UNE de ces
   situations. Une liste se parcourt jusqu'a la ligne qui le
   concerne, puis s'arrete.
   ══════════════════════════════════════════════════════════════ */

.services-split{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:64px;align-items:start;
}
/* Sans portrait disponible, la liste reprend toute la largeur
   plutot que de laisser une colonne vide a droite. */
.services-split--solo{grid-template-columns:minmax(0,1fr)}
.services-split--solo .services-split__main{max-width:760px}

.services-split__main{min-width:0}
.services-split__title{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.15;margin-bottom:16px;
}
.services-split__intro{
  font-size:1.05rem;color:var(--muted);
  line-height:1.8;max-width:560px;margin-bottom:40px;
}

.service-lines{display:flex;flex-direction:column;gap:4px}

.service-line{
  display:flex;align-items:flex-start;gap:20px;
  padding:24px 0;
  border-top:1px solid var(--border);
}
.service-line:last-child{border-bottom:1px solid var(--border)}

.service-line__icon{
  flex-shrink:0;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  transition:transform var(--tr-md);
}
.service-line__icon--rose{background:var(--rose-light);color:var(--rose)}
.service-line__icon--teal{background:var(--teal-light);color:var(--teal)}
.service-line:hover .service-line__icon{transform:translateY(-3px)}

.service-line__body{min-width:0}
.service-line__title{
  font-family:var(--f-display);font-weight:400;
  font-size:1.2rem;line-height:1.25;
  color:var(--slate);margin-bottom:8px;
}
/* Le titre entier est le lien, pas un "en savoir plus" ajoute en
   fin de paragraphe : la cible est plus large et l'intitule dit
   deja ou il mene. */
.service-line__title a{transition:color var(--tr)}
.service-line__title a:hover{color:var(--rose)}
.service-line__text{font-size:.93rem;color:var(--muted);line-height:1.7}

.services-split__foot{
  margin-top:28px;
  font-size:.92rem;color:var(--muted);line-height:1.7;
}
.services-split__foot a{
  color:var(--teal);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(42,157,143,.3);
}
.services-split__foot a:hover{color:var(--rose);text-decoration-color:var(--rose)}

.services-split__aside{position:sticky;top:calc(var(--nav-h) + 32px)}


/* ══════════════════════════════════════════════════════════════
   PAGES DE SERVICE : ETAPES A GAUCHE, PORTRAIT A DROITE
   ══════════════════════════════════════════════════════════════ */

.service-process__layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:56px;align-items:start;
}
.service-process__layout--solo{grid-template-columns:minmax(0,1fr)}
.service-process__layout--solo .service-steps{max-width:820px}

/* La liste d'etapes perd sa largeur maximale propre : c'est la
   grille qui la contraint maintenant. Sans cela, les deux
   contraintes se cumulent et la colonne de texte devient etroite
   au milieu d'un large blanc. */
.service-process__layout .service-steps{max-width:none}

.service-process__aside{position:sticky;top:calc(var(--nav-h) + 32px)}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1080px){
  .services-split{grid-template-columns:minmax(0,1fr) 300px;gap:44px}
  .service-process__layout{grid-template-columns:minmax(0,1fr) 280px;gap:40px}
}

@media(max-width:900px){
  /* Sous cette largeur, la colonne de droite passe dessous et
     cesse d'etre collante. Un portrait de 260px de large cote a
     cote d'un paragraphe ne laisse assez de place ni a l'un ni a
     l'autre. */
  .services-split,
  .service-process__layout{grid-template-columns:minmax(0,1fr);gap:48px}

  .services-split__aside,
  .service-process__aside{position:static}

  /* Centree et bornee en largeur : etiree sur toute la colonne,
     la photo ferait un portrait de la largeur de l'ecran, ce qui
     n'est pas un visuel d'expert mais une banniere. */
  .expert-photo{max-width:400px;margin:0 auto}
}

@media(max-width:768px){
  .services-split__intro{margin-bottom:28px}
  .service-line{gap:16px;padding:20px 0}
  .service-line__icon{width:46px;height:46px}
  .service-line__icon svg{width:22px;height:22px}
  .service-line__title{font-size:1.1rem}

  /* Le badge rentre dans l'image et le filet se resserre : sur un
     ecran de 360px, 26px de debordement a gauche coutent presque
     un dixieme de la largeur utile. */
  .expert-photo{padding:0 10px 0 14px}
  .expert-photo__badge{bottom:24px;padding:14px 20px 15px;max-width:88%}
  .expert-photo__name{font-size:1.25rem}
  .expert-photo::after{top:28px;bottom:28px;width:9px}
}


/* ══════════════════════════════════════════════════════════════
   12. ELEMENTS INSERES PAR pages.js

   Ces trois composants n'existent pas dans les gabarits : ils sont
   crees par le script. Les styler ici plutot que dans le script
   garde la presentation dans la feuille, ou on la cherche.
   ══════════════════════════════════════════════════════════════ */

/* ── Sommaire des pages de texte ───────────────────────────
   Construit a partir des h2, et seulement a partir de trois
   sections : en dessous, il encombre plus qu'il n'aide. */
.legal-toc{
  margin:0 0 40px;
  padding:24px 28px;
  background:var(--cream-mid);
  border-radius:var(--r-lg);
}
.legal-toc__title{
  font-size:.7rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--light);
  margin-bottom:12px;
}
.legal-toc ul{margin:0;padding:0;list-style:none}
.legal-toc li{margin-bottom:6px}
.legal-toc li:last-child{margin-bottom:0}
.legal-toc a{
  display:inline-block;padding:2px 0;
  font-size:.9rem;font-weight:500;color:var(--muted);
  text-decoration:none;transition:color var(--tr);
}
.legal-toc a:hover,
.legal-toc a.is-active{color:var(--rose)}

/* Ancre de titre, revelee au survol du titre. Visible en
   permanence, elle ajoute un caractere parasite a chaque
   intertitre d'une page de conditions generales. */
.legal-anchor{
  margin-left:8px;
  font-size:.65em;font-weight:400;
  color:var(--border);
  text-decoration:none!important;
  opacity:0;
  transition:opacity var(--tr),color var(--tr);
}
.legal-container h2:hover .legal-anchor,
.legal-container h3:hover .legal-anchor,
.legal-anchor:focus-visible{opacity:1}
.legal-anchor:hover{color:var(--rose)!important}

/* ── Compteur de caracteres du message ─────────────────────
   Aligne a droite sous le champ, sur la meme ligne que le
   message d'erreur quand il y en a un. */
.form-counter{
  display:block;margin-top:6px;
  font-size:.74rem;color:var(--light);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* Trop court, donc pas encore envoyable : gris ne le dit pas. */
.form-counter.is-short{color:var(--muted)}
.form-counter.is-near{color:var(--rose);font-weight:600}