:root{
    --navy:#0F2044; --orange:#F47920; --blue:#4A87D6;
    --lav:#E9ECF4; --grey:#55596A; --line:#D8DBE4;
    --serif:'Iowan Old Style','Charter','Georgia','Times New Roman',serif;
    --sans:ui-sans-serif,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:#fff;color:var(--navy);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .pg{border-bottom:1px solid var(--line)}
  .pg:last-child{border-bottom:0}

  /* bandeau de titre commun */
  .ttl{background:var(--navy);padding:14px clamp(20px,4vw,42px);border-bottom:2px solid var(--orange)}
  .ttl h2{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.7vw,27px);color:#fff;letter-spacing:.01em}
  .ttl.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .ttl.split .b{font-family:var(--serif);font-size:clamp(18px,2.4vw,25px);color:var(--orange);font-weight:600}
  .body{padding:clamp(24px,4vw,44px) clamp(20px,4vw,42px);display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}
  .foot{padding:0 clamp(20px,4vw,42px) 20px;text-align:center;font-size:10.5px;color:#9AA0AE;letter-spacing:.02em}
  p{margin:0}
  h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.25}
  .lab{font-size:clamp(15px,1.7vw,18px);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--orange);margin:0;line-height:1.3}

  /* ---------- PAGE 1 : couverture ---------- */
  .cover{display:grid;grid-template-columns:53% 47%;
    border-bottom:3px solid var(--orange)}
  .cvL{background:var(--navy);padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px)}
  .nm{border-left:3px solid var(--orange);padding-left:18px}
  .nm b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,50px);color:#fff;line-height:1.06}
  .cvL .role{font-size:12px;font-weight:800;letter-spacing:.22em;color:#fff;padding-bottom:10px;border-bottom:2px solid var(--orange);align-self:flex-start}
  .tag{border-left:3px solid var(--orange);padding:2px 0 2px 18px;font-family:var(--serif);font-size:clamp(15px,1.8vw,19px);color:#fff;line-height:1.45}
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .kpis b{display:block;font-family:var(--serif);font-size:clamp(19px,2.5vw,26px);color:var(--orange);font-weight:600;line-height:1.1}
  .kpis span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.5}
  .certs{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
  .certs li{display:grid;grid-template-columns:9px 1fr;gap:14px}
  .certs li::before{content:"";width:9px;height:9px;background:var(--orange);margin-top:6px}
  .certs b{font-size:12.5px;font-weight:700;color:#fff;line-height:1.5}
  .certs small{display:block;font-size:9.5px;color:rgba(255,255,255,.6);line-height:1.55;margin-top:4px}
  .cvR{display:flex;flex-direction:column}
  .cvR img.ph{width:100%;height:100%;min-height:280px;object-fit:cover;object-position:center 22%;display:block}
  .badge{background:#fff;padding:20px;display:flex;align-items:center;justify-content:center}
  .badge img{width:clamp(96px,11vw,132px);height:auto;display:block}
  .cvfoot{background:var(--navy);text-align:center;font-size:10px;color:rgba(255,255,255,.5);padding:0 0 14px}

  /* ---------- PAGE 2 : chiffres ---------- */
  .grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
  .st{padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
  .st.light{background:var(--lav)}
  .st.dark{background:var(--navy)}
  .st b{font-family:var(--serif);font-size:clamp(21px,2.7vw,27px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
  .st.light b{color:var(--navy)}
  .st.dark b{color:var(--orange)}
  .st span{font-size:11px;font-weight:700;line-height:1.5}
  .st.light span{color:var(--navy)}
  .st.dark span{color:#fff}
  .sep{height:2px;background:var(--orange);border:0;margin:6px 0}
  .src{text-align:right;font-size:10px;color:#9AA0AE}

  /* ---------- PAGE 3 : camemberts ---------- */
  .p3lead{text-align:center;font-family:var(--serif);font-size:clamp(16px,2.1vw,21px);font-weight:700;color:var(--orange);line-height:1.4;max-width:44ch;margin:0 auto}
  .p3sub{text-align:center;font-size:12.5px;font-weight:700;color:var(--navy)}
  .pies{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,44px);margin-top:6px}
  .pieblk{display:flex;flex-direction:column;align-items:center;gap:14px}
  .pieblk h4{text-align:center;font-size:14px;color:var(--navy)}
  .pierow{display:flex;align-items:center;gap:10px;justify-content:center;width:100%}
  .pie{position:relative;width:clamp(200px,24vw,290px);aspect-ratio:1;
    border-radius:50%;flex:none}
  .pie.athlete{background:conic-gradient(var(--blue) 0 10%,var(--orange) 10% 100%)}
  .pie.pro{background:conic-gradient(from -72deg,var(--orange) 0 20%,var(--blue) 20% 100%)}
  .pie i{position:absolute;font-style:normal;font-family:var(--serif);
    font-weight:700;color:#fff;transform:translate(-50%,-50%);white-space:nowrap;
    text-shadow:0 2px 6px rgba(15,32,68,.55)}
  .pie .big{font-size:clamp(26px,3.2vw,40px)}
  .pie .sml{font-size:clamp(15px,1.7vw,20px)}
  .pie.athlete .big{left:42%;top:72%} .pie.athlete .sml{left:60%;top:21%}
  .pie.pro .big{left:65%;top:72%} .pie.pro .sml{left:33%;top:25%}
  .sidelab{font-size:11px;color:var(--navy);flex:1;line-height:1.4}
  .sidelab.r{text-align:left} .sidelab.l{text-align:right}
  .legend{font-size:10.5px;color:var(--grey);line-height:1.8;text-align:left;width:100%}
  .p3band{background:var(--navy);padding:22px clamp(20px,4vw,40px);text-align:center;color:#fff;font-size:13px;line-height:1.6}

  /* ---------- PAGES 4-6 : deux colonnes ---------- */
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px)}
  .cols.rule > :first-child{border-right:1px solid var(--line);padding-right:clamp(20px,3vw,38px)}
  .col{display:flex;flex-direction:column;gap:16px}
  .h-or{font-family:var(--serif);font-size:clamp(17px,2.1vw,21px);font-weight:700;color:var(--orange)}
  .h-nv{font-family:var(--serif);font-size:clamp(17px,2.1vw,21px);font-weight:600;color:var(--navy)}
  .txt{font-size:12.5px;line-height:1.75;color:var(--navy)}
  .arw{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
  .arw li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:12px;font-weight:700;color:var(--navy);line-height:1.5}
  .arw li::before{content:"→";color:var(--orange);font-weight:700}
  .qbox{background:var(--navy);border-left:4px solid var(--orange);padding:16px 18px;color:#fff;font-size:11.5px;font-style:italic;line-height:1.65}
  .thm{display:flex;flex-direction:column;gap:15px;margin:0;padding:0;list-style:none}
  .thm li{border-left:3px solid var(--orange);padding-left:14px}
  .thm b{display:block;font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:4px}
  .thm span{display:block;font-size:11.5px;color:var(--grey);line-height:1.55}
  .intro-i{font-size:11px;font-style:italic;color:var(--grey);line-height:1.6}
  .nbox{background:var(--navy);padding:14px 18px;text-align:center;color:var(--orange);font-size:11.5px;font-weight:700;line-height:1.55}

  /* ---------- PAGE 5 : formules ---------- */
  .navyblk{background:var(--navy);padding:clamp(20px,2.6vw,30px);color:#fff;display:flex;flex-direction:column;gap:14px}
  .navyblk .h-or{color:var(--orange)}
  .navyblk .txt{color:rgba(255,255,255,.9);font-size:12px}
  .bul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
  .bul li{display:grid;grid-template-columns:9px 1fr;gap:11px;font-size:11.5px;line-height:1.6}
  .bul li::before{content:"•";color:var(--orange);font-weight:700;line-height:1.3}
  .bul b{font-weight:800}
  .fcard{border-left:4px solid var(--orange);padding-left:16px;display:flex;flex-direction:column;gap:11px}
  .fcard .sub{font-size:10.5px;font-style:italic;color:var(--grey)}
  .fcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
  .fcard ul li{display:grid;grid-template-columns:9px 1fr;gap:11px;font-size:12px;color:var(--navy);line-height:1.55}
  .fcard ul li::before{content:"•";color:var(--navy)}
  .pr{font-family:var(--serif);font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
  .prbig{text-align:right;font-family:var(--serif);font-size:clamp(18px,2.2vw,23px);font-weight:700;color:var(--orange)}
  .opt{display:flex;flex-direction:column}
  .opt div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
  .opt b{color:var(--orange);font-weight:700;white-space:nowrap}
  .star{text-align:right;font-size:10.5px;font-style:italic;color:var(--grey)}

  /* ---------- PAGE 6 : contact ---------- */
  .idbox{background:#F1F2F6;padding:16px 18px;font-size:12px;line-height:1.65}
  .idbox b{font-weight:700}
  .idbox i{display:block;font-size:10.5px;color:var(--grey);margin-top:6px;font-style:italic}
  .fauteuils{width:100%;height:auto;display:block;border:1px solid var(--line)}
  .cname{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);font-weight:500;color:var(--navy);line-height:1.1}
  .orule{width:56px;height:3px;background:var(--orange);border:0;margin:8px 0 0}
  .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 24px}
  .cgrid .lb{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:4px}
  .cgrid a{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:none;word-break:break-word}
  .cgrid a.or{color:var(--orange)}
  .tst{display:flex;flex-direction:column;gap:20px}
  .tst blockquote{margin:0;border-left:3px solid var(--orange);padding-left:14px}
  .tst p{font-size:11.5px;line-height:1.65;color:var(--navy)}
  .tst cite{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--navy);margin-top:7px}
  .conf{text-align:center;font-size:9.5px;color:#9AA0AE;padding:0 20px 18px}

  @media (max-width:820px){
    .cover{grid-template-columns:1fr}
    .cvR img.ph{min-height:340px}
    .cols{grid-template-columns:1fr;gap:26px}
    .cols.rule > :first-child{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}
    .ttl.split{grid-template-columns:1fr;gap:6px}
    .kpis{grid-template-columns:1fr}
    .pierow{flex-direction:column}
    .sidelab.l,.sidelab.r{text-align:center}
  }

  /* --- barre de navigation raccordée au site Wix --- */
  .sitenav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
    backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;
    padding:14px clamp(20px,4vw,42px)}
  .sitenav .nom{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--navy);
    text-decoration:none;margin-right:auto;letter-spacing:.01em}
  .sitenav .nom span{font-weight:400;color:var(--grey)}
  .sitenav a{font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none}
  .sitenav a:hover{color:var(--orange)}
  .sitenav a[aria-current]{color:var(--orange)}
  .sitenav .cta{border:1.5px solid var(--orange);color:var(--orange);padding:8px 15px}
  .sitenav .cta:hover{background:var(--orange);color:#fff}
  .sitefoot{background:var(--navy);color:rgba(255,255,255,.8);
    padding:clamp(32px,4.5vw,52px) clamp(20px,4vw,42px);display:flex;flex-direction:column;
    gap:16px;align-items:center;text-align:center}
  .sitefoot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
  .sitefoot .l1{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;font-size:13.5px}
  .sitefoot .l2{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.7}

/* =====================================================================
   Pages « choix » (accueil) et « particuliers » — ajouts au socle ci-dessus
   ===================================================================== */

/* --- accueil : le choix du public --- */
.sas{min-height:calc(100vh - 60px);background:var(--navy);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,7vw,90px) clamp(20px,5vw,64px);gap:clamp(28px,4vw,44px)}
.sas .in{max-width:1060px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:clamp(24px,3.4vw,38px)}
.sas h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,62px);line-height:1.04;
  color:#fff;letter-spacing:-.01em;margin:0}
.sas h1 em{display:block;font-style:normal;font-size:.42em;font-family:var(--sans);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-top:16px}
.sas .accroche{font-family:var(--serif);font-size:clamp(17px,2.2vw,22px);line-height:1.5;
  color:rgba(255,255,255,.9);border-left:3px solid var(--orange);padding-left:20px;max-width:44ch}
.sas .q{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);
  font-weight:700;margin:0}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.door{display:flex;flex-direction:column;gap:11px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  padding:clamp(22px,2.6vw,30px);transition:background .18s,border-color .18s,transform .18s}
.door:hover,.door:focus-visible{background:rgba(244,121,32,.1);border-color:var(--orange);transform:translateY(-2px)}
.door b{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);font-weight:650;color:#fff;line-height:1.25}
.door span{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.door i{font-style:normal;font-size:13px;font-weight:700;color:var(--orange);margin-top:4px}

/* --- particuliers : mise en page éditoriale --- */
.lede{margin:0;font-family:var(--serif);font-size:clamp(18px,2.3vw,24px);
  font-weight:500;line-height:1.35;max-width:40ch;color:var(--navy);
  opacity:.82}
.prose{display:flex;flex-direction:column;gap:16px;max-width:66ch}
.prose p{font-size:16px;line-height:1.75;color:var(--navy)}
.prose .fort{font-family:var(--serif);font-size:19px;line-height:1.5;font-weight:600}
.band{padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px)}
.band.navy{background:var(--navy);color:#fff}
.band.navy .prose p,.band.navy h2{color:#fff}
.band.gris{background:#F5F6F9}
.band .in{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,2.8vw,32px)}
.band h2{font-family:var(--serif);font-size:clamp(24px,3.2vw,34px);font-weight:600;line-height:1.2;
  margin:0;color:var(--navy);letter-spacing:-.01em}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.themes li{display:grid;grid-template-columns:26px 1fr;gap:12px;background:#fff;border:1px solid var(--line);
  padding:15px 17px;font-size:14.5px;line-height:1.5;color:var(--navy);font-weight:600}
.themes li span{font-size:19px;line-height:1}
.recon{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:66ch}
.recon li{display:grid;grid-template-columns:16px 1fr;gap:14px;font-size:15.5px;line-height:1.65}
.recon li::before{content:"—";color:var(--orange);font-weight:700}
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tarif{background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);
  padding:24px;display:flex;flex-direction:column;gap:10px}
.tarif b{font-family:var(--serif);font-size:19px;font-weight:650}
.tarif .p{font-family:var(--serif);font-size:30px;font-weight:650;color:var(--orange);
  font-variant-numeric:tabular-nums;margin-top:auto;padding-top:12px}
.tarif small{font-size:12.5px;color:var(--grey)}
.bascule{background:var(--navy);border-left:4px solid var(--orange);padding:22px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.bascule p{color:#fff;font-size:15.5px;margin:0}
.bascule a{color:var(--orange);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.cta-l{display:inline-flex;align-self:flex-start;background:var(--orange);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;padding:15px 28px}
.cta-l:hover{filter:brightness(1.08)}

/* =====================================================================
   Identité réelle du site christelcarre.com — relevée sur le site publié
   (fond beige EAE0DA, titres aubergine 281A39, accent bleu 2061B7)
   ===================================================================== */
:root{
  --plum:#281A39; --beige:#EAE0DA; --beige-clair:#F6F6F6;
  --bleu:#2061B7; --encre:#3A3340; --gris-c:#C3BFC7;
}

/* --- en-tête : menu puis nom encadré des deux badges --- */
.cc-head{background:var(--beige-clair);border-bottom:1px solid rgba(40,26,57,.08)}
.cc-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px clamp(20px,4vw,52px);
  padding:14px clamp(16px,4vw,40px) 0}
.cc-menu a{font-size:14.5px;color:var(--plum);text-decoration:none;letter-spacing:.01em;
  padding-bottom:3px;border-bottom:2px solid transparent}
.cc-menu a:hover{border-bottom-color:var(--bleu)}
.cc-menu a[aria-current]{border-bottom-color:var(--plum);font-weight:600}
.cc-brand{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,3vw,40px);padding:10px clamp(16px,4vw,40px) 18px;max-width:1180px;margin:0 auto}
.cc-brand img{height:clamp(52px,7vw,76px);width:auto;display:block}
.cc-brand .mot{font-family:var(--serif);font-size:clamp(21px,3.4vw,34px);font-weight:600;
  color:var(--plum);text-align:center;text-decoration:none;line-height:1.15;letter-spacing:-.01em}
.cc-brand .mot span{font-weight:400;color:#5A5163}
@media (max-width:560px){
  /* on garde les trois colonnes : empiler faisait un en-tete de 272px,
     soit un tiers de l'ecran avant le premier mot. */
  .cc-brand{gap:10px;padding:8px 14px 14px}
  .cc-brand img{height:38px}
  .cc-brand .mot{font-size:18px;line-height:1.2}
  .cc-menu{gap:6px 16px;padding:10px 12px 0}
  .cc-menu a{font-size:13px}
  .cc-menu a:last-child{padding:6px 11px}
}

/* --- bandes dans sa charte --- */
.band.beige{background:var(--beige)}
.band.beige h2,.band.beige h1,.band.beige .prose p{color:var(--plum)}
.band.creme{background:var(--beige-clair)}
.plum h1,.plum h2{color:var(--plum)}
.band .prose p{color:var(--encre)}
.rule-plum{width:56px;height:3px;background:var(--plum);border:0;margin:0}
.kicker-plum{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--bleu)}
.cta-b{display:inline-flex;align-self:flex-start;background:var(--plum);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;padding:15px 28px}
.cta-b:hover{background:var(--bleu)}
.quote-plum{border-left:3px solid var(--bleu);padding:4px 0 4px 20px;font-family:var(--serif);
  font-size:clamp(17px,2.1vw,21px);line-height:1.5;font-style:italic;color:var(--plum);margin:0}
.themes.plum li{border-color:rgba(40,26,57,.14);color:var(--plum)}
.tarif.plum{border-top-color:var(--plum)}
.tarif.plum .p{color:var(--plum)}
.bascule.plum{background:var(--plum);border-left-color:var(--bleu)}
.bascule.plum a{color:#E7C9A0}
.recon.plum li::before{color:var(--bleu)}
.pf .portrait.plum{border-top:4px solid var(--plum)}
.tst.plum blockquote{background:#fff;border:1px solid rgba(40,26,57,.12)}
.tst.plum p{color:var(--encre)}
.tst.plum cite{color:var(--bleu)}
.sitefoot.plum{background:var(--plum)}

/* =====================================================================
   En-tête en charte plaquette : fond marine, filet orange, nom en blanc
   ===================================================================== */
.cc-head{background:var(--navy);border-bottom:2px solid var(--orange)}
.cc-menu{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:12px}
.cc-menu a{color:rgba(255,255,255,.86)}
.cc-menu a:hover{color:#fff;border-bottom-color:var(--orange)}
.cc-menu a[aria-current]{color:var(--orange);font-weight:700;border-bottom-color:var(--orange)}
.cc-menu a:last-child{border:1.5px solid var(--orange);color:var(--orange);
  padding:7px 14px;font-weight:700;margin-left:6px}
.cc-menu a:last-child:hover{background:var(--orange);color:#fff}
.cc-brand .mot{color:#fff}
.cc-brand .mot span{color:rgba(255,255,255,.72)}

/* =====================================================================
   Utilitaires de la page particuliers et de l'accueil.
   « filet » et non « rule » : la page entreprises utilise déjà
   « cols rule » pour ses doubles colonnes, une classe .rule autonome
   casserait sa mise en page.
   ===================================================================== */
.filet{width:56px;height:3px;background:var(--orange);border:0;margin:0}
.band.alt{background:#F5F6F9}
.kicker{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--orange)}
.muted{font-size:13.5px;color:var(--grey);max-width:70ch}
.band.navy .muted{color:rgba(255,255,255,.66)}
.quote{border-left:3px solid var(--orange);padding:4px 0 4px 20px;margin:0;
  font-family:var(--serif);font-size:clamp(17px,2.1vw,21px);line-height:1.5;font-style:italic}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(24px,4vw,52px)}

/* étapes numérotées — la numérotation porte une information : c'est un ordre */
ol.seq{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;counter-reset:s;max-width:70ch}
ol.seq li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
ol.seq li:last-child{border-bottom:0}
ol.seq li::before{content:counter(s);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;
  color:var(--orange);border:1px solid rgba(244,121,32,.45);width:26px;height:26px;
  display:grid;place-items:center;margin-top:2px}
ol.seq b{display:block;font-family:var(--serif);font-size:17px;font-weight:650;margin-bottom:2px}
ol.seq span{font-size:14.5px;color:var(--grey);line-height:1.6}
.band.navy ol.seq li{border-bottom-color:rgba(255,255,255,.14)}
.band.navy ol.seq b{color:#fff}
.band.navy ol.seq span{color:rgba(255,255,255,.78)}

/* indicateurs de légitimité sur l'accueil */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.creds b{display:block;font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);
  color:var(--orange);font-weight:650;line-height:1.1}
.creds span{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-top:7px;line-height:1.5}

/* =====================================================================
   Garde-fous de débordement horizontal.
   Une image dans une piste de grille « 1fr » impose sa largeur intrinsèque
   comme minimum : sans min-width:0 sur les enfants, la piste grandit et
   la page défile latéralement.
   ===================================================================== */
img{max-width:100%;height:auto}
.two > *,.cols > *,.grid4 > *,.cards > *,.tarifs > *,.doors > *,.themes > *{min-width:0}
.two,.cols{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
html,body{overflow-x:hidden}

/* image d'ouverture de la page particuliers — reprend le cadrage de son site */
.hero-img{margin:0 0 6px;max-width:980px}
.hero-img img{width:100%;height:auto;display:block;border-top:4px solid var(--orange)}

/* Correctif : dans une grille « 34px 1fr », b et span sont deux enfants et
   le span retombait en ligne 2 colonne 1, large de 34px. On force les deux
   dans la colonne de texte. */
ol.seq b,ol.seq span{grid-column:2}


/* =====================================================================
   Compléments page particuliers : signature, coordonnées, badges,
   agenda Calendly. Tout reste dans la charte marine/orange du site.
   ===================================================================== */
.h-serif{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.6vw,48px);
  line-height:1.1;color:var(--navy);margin:0;max-width:26ch}
.sig{font-size:13px;line-height:1.7;color:var(--grey);border-top:1px solid var(--line);
  padding-top:14px;max-width:70ch}
.sig b{color:var(--navy);font-weight:700}

.coord{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  border-left:3px solid var(--orange);padding-left:18px}
.coord p{margin:0;line-height:1.4}
.coord b{font-family:var(--serif);font-size:19px;font-weight:650;color:var(--navy);display:block}
.coord span{font-size:13px;color:var(--grey)}
.coord a{font-size:15.5px;font-weight:600;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--orange)}
.coord a:hover{color:var(--orange)}

.badges{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center;
  border-top:1px solid var(--line);padding-top:28px;margin-top:8px}
.badges img{height:clamp(74px,9vw,104px);width:auto}

/* Agenda Calendly — bordure marine et liseré orange pour l'intégrer à la charte.
   Les couleurs internes du widget sont passées en paramètres d'URL. */
.cal-wrap{border:1px solid var(--line);border-top:4px solid var(--orange);background:#fff}
.cal-wrap .calendly-inline-widget{width:100%}
@media (max-width:860px){ .cal-wrap .calendly-inline-widget{height:560px !important} }

/* Correctif : .tst vient de la page entreprises où il est sur fond clair.
   Sur une bande marine, le texte marine était invisible. */
.band.navy .tst blockquote{background:transparent;border:0;border-left:3px solid var(--orange);padding:2px 0 2px 16px}
.band.navy .tst p{color:rgba(255,255,255,.9)}
.band.navy .tst cite{color:var(--orange)}

/* lien de texte dans un paragraphe */
.lien{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--orange)}
.lien:hover{color:var(--orange)}

/* =====================================================================
   Page entreprises — passage de l'échelle papier à l'échelle écran.
   La transposition de la plaquette A4 avait gardé sa typographie (11 à
   12,5 px) et ses marges serrées : lisible imprimé, trop petit affiché.
   ===================================================================== */

/* --- respiration --- */
.pg .body{padding:clamp(34px,5.5vw,72px) clamp(20px,5vw,60px);gap:clamp(24px,3.4vw,40px)}
.pg .ttl{padding:clamp(18px,2.4vw,26px) clamp(20px,5vw,60px)}
.pg .ttl h2{font-size:clamp(22px,3.2vw,32px)}

/* --- typographie remontée à l'échelle de l'écran --- */
.txt{font-size:clamp(15px,1.6vw,16.5px);line-height:1.75}
.navyblk .txt{font-size:clamp(14.5px,1.5vw,16px)}
.bul li{font-size:clamp(14px,1.5vw,15.5px);line-height:1.7}
.thm b{font-size:clamp(15px,1.7vw,16.5px)}
.thm span{font-size:clamp(14px,1.5vw,15px);line-height:1.65}
.sq span{font-size:clamp(14px,1.5vw,15.5px);line-height:1.7}
.arw li{font-size:clamp(14px,1.5vw,15.5px)}
.fcard ul li{font-size:clamp(14px,1.5vw,15.5px);line-height:1.65}
.fcard .sub{font-size:13px}
.st span{font-size:clamp(12.5px,1.3vw,13.5px);line-height:1.55}
.creds span{font-size:12px}
.legend{font-size:12.5px;line-height:1.9}
.intro-i{font-size:13.5px}
.opt div{font-size:14.5px}
.src{font-size:12px}
.qbox{font-size:14px;line-height:1.75;padding:20px 22px}
.nbox{font-size:13.5px;padding:18px 22px}
.p3band{font-family:var(--serif);font-size:clamp(18px,2.2vw,24px);font-weight:600;
  line-height:1.5;padding:clamp(30px,3.8vw,44px) clamp(20px,5vw,60px);
  border-top:4px solid var(--orange);border-bottom:4px solid var(--orange)}
.p3lead{font-size:clamp(18px,2.4vw,24px)}
.p3sub{font-size:14.5px}
.cgrid a{font-size:14.5px}
.idbox{font-size:13.5px}
.tst p{font-size:14px;line-height:1.7}
.cvL .role{font-size:13px}
.certs b{font-size:13.5px}
.certs small{font-size:11px}

/* --- respiration interne des blocs --- */
.st{padding:26px 20px;gap:14px}
.fcard{padding-left:20px;gap:13px}
.navyblk{padding:clamp(24px,3vw,34px);gap:18px}
.safe{padding:clamp(24px,3vw,34px)}
.grid4{gap:16px}
.cols{gap:clamp(28px,3.8vw,52px)}

/* --- vie et réactivité --- */
.st,.fcard,.thm li,.tst blockquote,.opt div{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.st.light:hover,.st.dark:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(15,32,68,.14)}
.fcard:hover{transform:translateX(3px)}
.thm li:hover{border-left-width:6px}
.cgrid a:hover{color:var(--orange)}

/* --- révélation à l'entrée dans l'écran --- */
/* Le masquage n'est actif que sous html.anim, classe posée par le script.
   Sans JavaScript, ou si le script échoue, rien n'est jamais caché. */
@media (prefers-reduced-motion:no-preference){
  html.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
  html.anim .reveal.vu{opacity:1;transform:none}
}

/* --- responsive : les grilles de la plaquette n'étaient pensées que pour l'A4 --- */
@media (max-width:960px){
  .grid4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
  .pies{gap:34px}
}
@media (max-width:640px){
  .grid4{grid-template-columns:1fr 1fr;gap:12px}
  .st{padding:18px 14px}
  .st b{font-size:clamp(19px,6vw,24px)}
  .cvL{padding:26px 20px}
  .kpis{grid-template-columns:1fr 1fr}
  .prbig,.pr{text-align:left}
}

/* citations à plusieurs paragraphes (témoignage de Bertrand) */
.tst blockquote p + p{margin-top:10px}
.band.navy .tst blockquote{display:flex;flex-direction:column}

/* =====================================================================
   Page « Réserver » — formulaire épuré
   Une colonne, étiquettes flottantes, sélecteur segmenté à curseur
   glissant. Toutes les animations sont désactivées si l'utilisateur a
   demandé à réduire le mouvement.
   ===================================================================== */
.rv{padding:clamp(40px,6vw,84px) clamp(20px,5vw,48px) clamp(56px,7vw,96px);background:#fff}
.rv-in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,42px)}

.rv-tete{display:flex;flex-direction:column;gap:12px}
.rv-tete h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.8vw,42px);
  line-height:1.12;letter-spacing:-.015em;color:var(--navy);margin:0;text-wrap:balance}
.rv-sous{font-size:clamp(15px,1.7vw,17px);line-height:1.65;color:var(--grey);margin:0}

.rv-form{display:flex;flex-direction:column;gap:26px}
.rv-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:26px}

/* --- champ à étiquette flottante --- */
.ch{position:relative;display:block}
.ch input,.ch textarea{
  width:100%;font:inherit;font-size:16.5px;color:var(--navy);background:transparent;
  border:0;border-bottom:1.5px solid var(--line);padding:22px 2px 9px;
  border-radius:0;transition:border-color .2s ease}
.ch textarea{resize:vertical;line-height:1.6;min-height:112px}
.ch label{
  position:absolute;left:2px;top:20px;pointer-events:none;
  font-size:16.5px;color:var(--grey);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),font-size .22s,color .22s;
  transform-origin:left top}
.ch label span{font-size:.72em;color:var(--line-fort,#9AA0AE);letter-spacing:.02em}
.ch input:focus + label,.ch textarea:focus + label,
.ch input:not(:placeholder-shown) + label,.ch textarea:not(:placeholder-shown) + label{
  transform:translateY(-19px);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.ch input:not(:focus):not(:placeholder-shown) + label,
.ch textarea:not(:focus):not(:placeholder-shown) + label{color:var(--grey)}
/* soulignement qui se déploie depuis la gauche */
.ch i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.ch input:focus ~ i,.ch textarea:focus ~ i{transform:scaleX(1)}
.ch.aire label{top:20px}
.ch input:focus,.ch textarea:focus{outline:0}

/* --- sélecteur segmenté --- */
.seg{border:0;margin:0;padding:0}
.seg legend{padding:0;margin-bottom:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.seg-piste{position:relative;display:grid;grid-template-columns:1fr 1fr;
  border:1.5px solid var(--line);background:#fff}
.seg-o{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:15px 14px;cursor:pointer;font-size:15px;font-weight:600;
  color:var(--grey);transition:color .22s ease}
.seg-o input{position:absolute;opacity:0;width:1px;height:1px}
.seg-o:has(input:checked){color:#fff}
.seg-curseur{position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;
  background:var(--navy);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),left .3s cubic-bezier(.2,.7,.3,1)}
.seg[data-choix="0"] .seg-curseur{left:0;transform:scaleX(1)}
.seg[data-choix="1"] .seg-curseur{left:50%;transform:scaleX(1)}
.seg-o:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:-2px}

/* --- champ entreprise qui se déplie --- */
.rv-plie{height:0;overflow:hidden;transition:height .32s cubic-bezier(.2,.7,.3,1),opacity .28s ease;opacity:0}
.rv-plie.ouvert{opacity:1}

/* --- champ piège --- */
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- envoi --- */
.rv-bas{display:flex;flex-direction:column;gap:14px}
.rv-env{position:relative;align-self:flex-start;border:0;cursor:pointer;
  background:var(--orange);color:#fff;font:inherit;font-size:15.5px;font-weight:700;
  padding:17px 34px;overflow:hidden;transition:transform .18s ease,box-shadow .22s ease,background .2s}
.rv-env:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,138,43,.36)}
.rv-env:active{transform:translateY(0)}
.rv-env:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.rv-env[disabled]{cursor:default}
.rv-env .lib{transition:opacity .2s ease,transform .2s ease;display:inline-block}
.rv-env .tourne{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.rv-env .tourne::before{content:"";width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff}
.rv-env.charge{background:var(--navy)}
.rv-env.charge .lib{opacity:0;transform:translateY(-6px)}
.rv-env.charge .tourne{opacity:1}
.rv-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--grey);max-width:48ch}
.rv-msg{margin:0;font-size:14.5px;font-weight:600;color:var(--grey)}
.rv-msg.ko{color:#B03A28}

/* --- succès --- */
.rv-ok{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  border-top:4px solid var(--orange);background:#F7F8FB;padding:32px 30px}
.rv-ok b{font-family:var(--serif);font-size:23px;font-weight:650;color:var(--navy)}
.rv-ok p{margin:0;font-size:15.5px;line-height:1.7;color:var(--grey);max-width:52ch}
.rv-coche{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--orange);margin-bottom:4px}
.rv-coche svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

/* --- contact direct --- */
.rv-ou{margin:0;text-align:center;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);font-weight:700}
.rv-direct{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center}
.rv-direct a{font-family:var(--serif);font-size:clamp(16px,2vw,19px);font-weight:600;
  color:var(--navy);text-decoration:none;border-bottom:2px solid var(--orange);
  padding-bottom:2px;transition:color .2s}
.rv-direct a:hover{color:var(--orange)}

/* --- animations --- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rv-monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes rv-secoue{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
  @keyframes rv-tourne{to{transform:rotate(360deg)}}
  @keyframes rv-eclot{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  @keyframes rv-coche{from{stroke-dashoffset:34}to{stroke-dashoffset:0}}
  .rv-form > *,.rv-tete{animation:rv-monte .5s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--i,0) * 70ms + 40ms)}
  .rv-duo > .ch{animation:rv-monte .5s cubic-bezier(.2,.7,.3,1) both;
    animation-delay:calc(var(--i,0) * 70ms + 40ms)}
  .rv-duo{animation:none}
  .ch.faux,.seg.faux{animation:rv-secoue .45s ease}
  .ch.faux input,.ch.faux textarea{border-bottom-color:#B03A28}
  .rv-env.charge .tourne::before{animation:rv-tourne .7s linear infinite}
  .rv-ok{animation:rv-eclot .42s cubic-bezier(.2,.7,.3,1) both}
  .rv-coche svg path{stroke-dasharray:34;animation:rv-coche .5s .18s ease forwards}
}
@media (prefers-reduced-motion:reduce){
  .rv-plie{transition:none}
  .seg-curseur{transition:none}
}
@media (max-width:520px){
  .rv-form{gap:22px}
  .rv-duo{gap:22px}
  .rv-env{align-self:stretch;text-align:center}
}

/* =====================================================================
   Refonte de l'accueil et de l'en-tete : fond blanc, ecritures en bleu.
   Ce bloc est volontairement en fin de fichier : a specificite egale il
   gagne sur les couches marine/orange definies plus haut, sans qu'il
   faille les retirer (les autres pages s'en servent encore).
   ===================================================================== */

/* --- en-tete clair, commun a toutes les pages --- */
.cc-head{background:var(--beige-clair);border-bottom:1px solid rgba(40,26,57,.14)}
.cc-menu{align-items:center;justify-content:center;
  border-bottom:1px solid rgba(40,26,57,.10);
  gap:6px clamp(16px,3vw,40px);padding:12px clamp(16px,4vw,40px)}
/* inline-flex + hauteur commune : le texte du bouton Calendly se cale sur
   la meme ligne optique que les autres entrees du bandeau. */
.cc-menu a{display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0;border-bottom:0;line-height:1.1;
  font-size:15px;font-weight:500;color:var(--bleu);text-decoration:none}
.cc-menu a:hover{color:var(--plum);text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px;border-bottom-color:transparent}
.cc-menu a[aria-current]{color:var(--plum);font-weight:700;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;
  border-bottom-color:transparent}
.cc-menu a.fort{font-weight:800}
.cc-menu a.fort[aria-current]{font-weight:800}
.cc-menu a.cta-cal{margin-left:4px;padding:0 20px;min-height:40px;
  background:var(--orange);border:2px solid var(--orange);border-radius:2px;
  color:#fff;font-weight:800;text-decoration:none}
.cc-menu a.cta-cal:hover{background:var(--navy);border-color:var(--navy);
  color:#fff;text-decoration:none}

/* --- logos plus grands, nom TRIBEIUS - Christel Carre --- */
.cc-brand{gap:clamp(14px,3vw,44px);padding:16px clamp(16px,4vw,40px) 22px}
.cc-brand img{height:clamp(74px,10vw,116px)}
.cc-brand .mot{font-family:var(--serif);font-size:clamp(21px,3.4vw,36px);
  font-weight:600;color:var(--bleu);line-height:1.14;letter-spacing:0}
.cc-brand .mot i{font-style:normal;color:rgba(32,97,183,.42);padding:0 .1em}
.cc-brand .mot span{display:block;margin-top:11px;font-family:var(--sans);
  font-size:clamp(11px,1.3vw,15.5px);font-weight:700;letter-spacing:.12em;
  line-height:1.45;text-transform:uppercase;color:var(--navy);opacity:.92}

/* --- accueil : fond blanc, tout le texte en bleu --- */
.home{background:var(--beige);color:var(--navy)}
.hero{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.3fr .7fr;gap:clamp(26px,4vw,52px);align-items:center;
  padding:clamp(26px,4vw,52px) clamp(20px,5vw,48px) clamp(24px,3.4vw,40px)}
.hero-txt{min-width:0;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px)}
/* l accroche porte le h1 depuis que le nom est seulement dans le bandeau */
.hero-accroche{margin:0;max-width:44ch;font-weight:500;font-family:var(--serif);
  font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--navy);
  border-left:3px solid var(--bleu);padding-left:20px}

/* titres et certifications */
.titres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.titres li{display:grid;grid-template-columns:11px 1fr;gap:13px;align-items:start;
  font-size:clamp(14.5px,1.6vw,16.5px);font-weight:700;color:var(--bleu);line-height:1.45}
.titres li::before{content:"";width:11px;height:11px;margin-top:.4em;background:var(--bleu)}

/* portrait devant la bibliotheque */
.hero-ph{margin:0 0 0 auto;min-width:0;max-width:360px;width:100%}
.hero-ph img{width:100%;height:auto;display:block;
  box-shadow:0 20px 46px -24px rgba(15,32,68,.5)}

/* --- les deux cadres de choix --- */
.choix{background:transparent}
.choix-in{max-width:1180px;margin:0 auto;
  padding:clamp(30px,4vw,52px) clamp(20px,5vw,48px)}
.cadres{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2.4vw,26px)}
.cadre{display:flex;flex-direction:column;gap:12px;text-decoration:none;
  background:#fff;border:3px solid var(--bleu);padding:clamp(24px,3vw,34px);
  box-shadow:0 10px 26px -20px rgba(15,32,68,.45);
  transition:background .18s,box-shadow .18s,transform .18s}
.cadre:hover,.cadre:focus-visible{background:#F1F6FC;transform:translateY(-3px);
  box-shadow:0 18px 36px -20px rgba(32,97,183,.55)}
.cadre b{font-family:var(--serif);font-size:clamp(23px,2.9vw,31px);font-weight:700;
  color:var(--bleu);line-height:1.18}
.cadre span{font-size:clamp(14.5px,1.6vw,16px);line-height:1.65;color:var(--navy)}
.cadre i{font-style:normal;margin-top:4px;font-size:14px;font-weight:800;
  letter-spacing:.03em;color:var(--bleu)}

/* --- bandeau de parcours --- */
.parcours{max-width:1180px;margin:0 auto;
  padding:clamp(28px,3.6vw,44px) clamp(20px,5vw,48px) clamp(38px,6vw,70px)}
.creds-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px)}
@media (max-width:620px){.creds-b{grid-template-columns:1fr;gap:20px}}
.creds-b b{display:block;font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);
  font-weight:650;color:var(--bleu);line-height:1.1}
.creds-b span{display:block;margin-top:7px;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);line-height:1.5}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:24px;align-items:start}
  .hero-ph{order:-1;width:100%;max-width:340px;margin:0 auto}
}
@media (max-width:560px){
  .cc-brand{gap:10px;padding:10px 14px 16px}
  .cc-brand img{height:56px}
  .cc-brand .mot{font-size:17px;line-height:1.2}
  .cc-brand .mot span{font-size:10.5px;letter-spacing:.08em;margin-top:8px}
  .cc-menu{gap:6px 16px;padding:10px 12px}
  .cc-menu a{font-size:13.5px;min-height:34px}
  .cc-menu a.cta-cal{padding:0 14px;min-height:34px;margin-left:0}
}

/* =====================================================================
   Page particuliers, section « Mon parcours » : photo collee a gauche et
   rognee, recit coupe en deux morceaux pour abaisser la section.
   ===================================================================== */

/* figure porte une marge laterale de 40px par defaut dans les navigateurs :
   sans cette remise a zero la photo flotte a l'interieur de sa colonne au
   lieu d'etre alignee sur le bord du texte. */
.pf{margin:0}

/* Une seule rangee de trois colonnes : le portrait en pied (615x1560)
   occupe la gauche sur toute la hauteur, le texte se lit en deux colonnes
   a sa droite. Deux colonnes plutot qu'une : elles tombent a peu pres a la
   hauteur de la photo, donc la section ne s'etire pas. */
.parcours-trio{display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(20px,2.8vw,40px);align-items:start}
.pf-pied img.portrait{width:100%;height:auto;display:block}
/* colonnes gerees par le navigateur : il repartit le texte lui-meme, donc
   les deux colonnes s'arretent a la meme hauteur. Deux blocs figes
   laissaient un grand vide en bas a droite. */
.recit{display:block;max-width:none;columns:2;column-gap:clamp(22px,2.8vw,40px)}
.recit p{margin:0 0 16px;break-inside:avoid}
.recit p:last-child{margin-bottom:0}
.recit .fort{break-after:avoid;margin-top:2px}

.duo-texte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.4vw,46px);margin-top:clamp(6px,1.4vw,14px)}
.duo-texte .prose{max-width:none}

/* sous 1040px les deux colonnes deviennent illisibles a cote du portrait :
   photo au-dessus, rognee, puis le texte sur une seule colonne. */
@media (max-width:1040px){
  .parcours-trio{grid-template-columns:1fr;gap:24px}
  .recit{columns:1}
  .pf-pied{max-width:340px;height:clamp(300px,46vw,400px);overflow:hidden}
  .pf-pied img.portrait{height:100%;object-fit:cover;object-position:center 12%}
}
@media (max-width:820px){
  .duo-texte{grid-template-columns:1fr;gap:16px}
}

/* =====================================================================
   Page certifications : les trois diplomes en cartouches, logo au-dessus
   du libelle.
   ===================================================================== */
.diplomes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2.4vw,28px)}
.diplomes li{display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--orange);
  padding:clamp(20px,2.6vw,28px)}
.diplomes p{margin:0;font-size:15px;line-height:1.65;color:var(--navy)}
.diplomes b{font-weight:700}
.dip-logo{height:104px;display:flex;align-items:center}
.dip-logo img{height:100%;width:auto;display:block}
/* cartouche d'attente, au meme gabarit que les badges, pour un logo
   qui n'est pas encore dans les assets */
.dip-logo-attente{width:104px;justify-content:center;
  border:2px solid var(--line);background:#F7F8FB}
.dip-logo-attente span{font-family:var(--serif);font-size:27px;font-weight:700;
  color:var(--navy);letter-spacing:.04em}

/* =====================================================================
   Avis en carousel (page certifications) et etat « page courante » du
   bandeau sur /reserver.
   ===================================================================== */
.avis-car{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)}
.avis-car:focus{outline:none}
/* scroll-snap : le defilement fonctionne au doigt et a la molette meme
   sans le script, les fleches ne font que le piloter. */
.avis-piste{display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:clamp(24px,5vw,56px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.avis-piste::-webkit-scrollbar{display:none}
.avis-slide{scroll-snap-align:start;margin:0;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  min-height:clamp(150px,20vw,210px);
  border-left:3px solid var(--orange);padding:4px 0 4px clamp(18px,2.4vw,26px)}
.avis-slide p{margin:0;font-family:var(--serif);font-size:clamp(16.5px,2vw,21px);
  line-height:1.55;color:#fff}
.avis-slide cite{font-style:normal;margin-top:4px;font-size:11.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.avis-ctrl{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,22px)}
.avis-fl{appearance:none;-webkit-appearance:none;cursor:pointer;
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;
  font-size:22px;line-height:1;transition:background .18s,border-color .18s}
.avis-fl:hover{background:var(--orange);border-color:var(--orange)}
.avis-fl:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.avis-points{display:flex;gap:10px}
.avis-point{appearance:none;-webkit-appearance:none;cursor:pointer;padding:0;
  width:10px;height:10px;border:0;background:rgba(255,255,255,.34);
  transition:background .18s,transform .18s}
.avis-point[aria-current="true"]{background:var(--orange);transform:scale(1.4)}
.avis-point:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.avis-piste{scroll-behavior:auto}}

/* le bouton du bandeau, plein, quand on est sur la page de reservation */
.cc-menu a.cta-cal.en-cours{background:var(--navy);border-color:var(--navy);color:#fff}
.cc-menu a.cta-cal.en-cours:hover{background:var(--plum);border-color:var(--plum)}

/* =====================================================================
   Page entreprises, formules : options sans prix, note de duree, et
   renvoi vers une demande de tarifs par mail.
   ===================================================================== */
.opt .val{color:var(--navy);font-weight:600;white-space:nowrap}
.anote{margin:clamp(14px,2vw,26px) 0 0;padding:0;
  font-size:13.5px;font-weight:600;line-height:1.7;color:var(--navy)}
.tarif-demande{margin:clamp(20px,2.8vw,32px) 0 0;background:transparent;
  padding:0;text-align:center;color:var(--navy);font-weight:700;
  font-size:clamp(15px,1.8vw,19px);line-height:1.6}
.tarif-demande a{color:var(--orange);font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor}
.tarif-demande a:hover{color:#fff}

/* =====================================================================
   Harmonisation des couleurs : une seule famille de bleus pour tout le
   site. Le marine presque noir (#0F2044) et l'accent orange donnaient un
   rendu de plaquette imprimee, surtout sur la page entreprises.
   Tout passe par les jetons de couleur : aucune regle de mise en page,
   aucun texte n'est modifie.
   ===================================================================== */
:root{
  --navy:#1D4586;    /* bandes sombres, titres : bleu franc, plus clair */
  --orange:#FF8A2B;  /* orange clair facon Hermes, remis partout */
  --plum:#1D4586;    /* le prune du menu rejoint la meme famille */
  --encre:#33405A;   /* corps de texte : gris-bleu neutre */
  --line:#D3DAE6;
}

/* Du bleu franc sur de longs paragraphes fatigue la lecture : le corps de
   texte reste dans le gris-bleu neutre. */
body,.txt,.cadre span,.sidelab{color:var(--encre)}

/* Camemberts : les deux parts restent distinctes dans la famille bleue,
   la grande part en bleu soutenu, la petite en bleu tres clair. Les deux
   graphiques n'ordonnent pas leurs parts pareil, d'ou les jetons inverses. */
.pie i{color:#fff}

/* =====================================================================
   Ajustements de mise en page demandes avec le retour de l'orange.
   ===================================================================== */

/* Couverture entreprises : la photo occupait toute la colonne. Elle est
   ramenee a une taille raisonnable sur fond blanc, et le texte de gauche
   est centre verticalement : il etait tasse en haut d'une colonne tres
   haute. */
.cvR{background:var(--beige);justify-content:center;align-items:center;
  padding:clamp(24px,4vw,48px)}
.cvR img.ph{width:100%;max-width:300px;height:auto;min-height:0;
  object-fit:contain;border:1px solid var(--line)}
.cvL{justify-content:center}

/* Certifications : le contenu des cartouches etait cale en haut, laissant
   un vide sous les deux plus courtes. */
.diplomes li{justify-content:center}
.dip-logo-attente{width:auto;align-self:flex-start;min-width:104px;
  padding:0 22px;text-align:center}
.dip-logo-attente span{font-size:clamp(17px,1.9vw,21px);line-height:1.2}

/* Safe Place : un seul cadre, dont le texte se repartit sur deux colonnes
   pour que le bloc ne parte pas en hauteur. */
.safe-place{display:block;columns:2;column-gap:clamp(24px,3vw,44px)}
.safe-place > *{break-inside:avoid;margin:0 0 14px}
.safe-place > h3,.safe-place > h4{break-after:avoid}
.safe-place > *:last-child{margin-bottom:0}

/* Note de bas de section (duree des seances). */
.note-bas{margin:0;font-size:12.5px;font-style:italic;color:var(--grey)}

/* Conclusion centree sous deux colonnes de texte. */
.bloc-centre{max-width:62ch;margin:clamp(14px,2vw,22px) auto 0;text-align:center;
  align-items:center}

/* Contact entreprises : coordonnees un peu plus grandes, descendues, et
   suivies de l'invitation a prendre un creneau. */
.cgrid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:22px 28px;margin-top:clamp(12px,2.4vw,28px)}
.cgrid .lb{font-size:10.5px;margin-bottom:6px}
.cgrid a{font-size:clamp(14px,1.6vw,16px)}
.ctc-mot{margin:clamp(10px,1.6vw,18px) 0 0;font-size:14.5px;line-height:1.7;
  color:var(--encre);max-width:52ch}

@media (max-width:820px){
  .safe-place{columns:1}
}

/* =====================================================================
   Page entreprises : les bandeaux de titre pleine largeur disparaissent.
   Sur un site qu'on deroule, c'est l'alternance des fonds qui separe les
   parties, pas un aplat bleu repete a chaque section.
   ===================================================================== */
.titre-page{width:fit-content;max-width:100%;
  margin:clamp(10px,1.8vw,24px) auto clamp(18px,2.4vw,30px);
  text-align:center;font-family:var(--serif);font-weight:700;color:var(--navy);
  font-size:clamp(27px,3.6vw,41px);line-height:1.15;letter-spacing:-.01em}
.titre-page::after{content:"";display:block;width:100%;height:4px;
  background:var(--orange);margin:clamp(14px,1.8vw,20px) auto 0}

/* la section des camemberts prend le beige, comme le fond de la photo */
.slide-beige{background:var(--beige)}

/* « Ma mission » : plus de cadre, une phrase posee sous les camemberts */
.p3mission{max-width:72ch;margin:clamp(14px,2.4vw,26px) auto 0;text-align:center;
  font-family:var(--serif);font-size:clamp(17px,2vw,22px);font-weight:600;
  line-height:1.5;color:var(--navy)}

/* options a la carte et notes descendues */
.rang-options{margin-top:clamp(24px,3.4vw,42px)}
.star{text-align:left}

/* phrase de contact centree en fin de page formules */
.ctc-centre{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center;
  font-weight:600}

/* Thematiques frequentes : bloc centre sur la largeur de la page, ses six
   entrees reparties sur deux colonnes pour ne pas allonger la section.
   Le texte des entrees reste aligne a gauche : centre, une liste de six
   descriptions devient penible a lire. */
.bloc-thm{margin-top:clamp(26px,3.6vw,46px);text-align:center}
.bloc-thm .lab,.bloc-thm .intro-i{max-width:76ch;margin-left:auto;margin-right:auto}
.bloc-thm .thm{display:grid;grid-template-columns:repeat(3,380px);
  justify-content:center;gap:22px 30px;margin-top:clamp(16px,2.2vw,26px);
  text-align:left}
@media (max-width:1330px){.bloc-thm .thm{grid-template-columns:repeat(2,380px)}}
@media (max-width:900px){.bloc-thm .thm{grid-template-columns:minmax(0,420px)}}
.bloc-thm .nbox{margin-top:clamp(16px,2.2vw,26px)}

/* =====================================================================
   Reglages fins de la page entreprises. Cette page n'est pas bornee en
   largeur : sur grand ecran ses blocs s'ecartent jusqu'aux bords, d'ou
   les rattrapages ci-dessous.
   ===================================================================== */

/* Camemberts rapproches : cote a cote, la difference entre les deux
   repartitions se lit d'un coup d'oeil. */
.pies{max-width:1000px;margin-left:auto;margin-right:auto;
  gap:clamp(16px,2.4vw,30px)}

/* Performance humaine : la citation encadree descend sous la liste. */
.qbox{margin-top:clamp(12px,2.2vw,26px)}

/* Thematiques : de l'air entre le titre et le chapeau orange. */
.bloc-thm .lab{margin-top:clamp(20px,2.6vw,32px)}

/* Formules : les cartes s'alignent sur le bord du rectangle bleu ; le
   decalage ajoute ici compensait un defaut de structure, corrige depuis. */

/* Options a la carte : la valeur se place juste apres son libelle au lieu
   d'etre repoussee a l'autre bout de la ligne, ou elle venait buter sur le
   filet de la colonne voisine. */
.opt div{justify-content:flex-start;gap:clamp(12px,2vw,24px)}

/* La ligne des tarifs passe en orange, lien compris. */
.tarif-demande{color:var(--orange)}

/* Contact : la colonne de droite demarrait tout en haut face a une photo
   bien plus haute. */
.ctc-mot{margin-top:clamp(26px,4vw,56px)}

/* Contact : la colonne des coordonnees est centree face a la photo, qui est
   bien plus haute. Sans cela tout se tasse en haut a droite. */
.col-contact{justify-content:center}

/* Options a la carte : les deux lignes s'etendaient sur toute la largeur de
   leur colonne, leur filet allant jusqu'au milieu de la page. Elles sont
   bornees a la largeur reellement utile. */
.opt{max-width:400px}

/* Le nota bene se centre dans sa colonne, donc decale vers la droite.
   L'astérisque de l'engagement, lui, reste cale a gauche. */
.anote{text-align:center;max-width:46ch;margin-left:auto;margin-right:auto}

/* Contact : l'adresse LinkedIn est de loin la plus longue et se coupait en
   deux. Elle occupe toute la largeur de la grille, ce qui lui laisse la
   place de tenir sur une seule ligne. Sur tres petit ecran on la laisse se
   replier, sinon elle deborderait. */
.cgrid > div:last-child{grid-column:1/-1}
.cgrid > div:last-child a{white-space:nowrap}
@media (max-width:520px){
  .cgrid > div:last-child a{white-space:normal}
}

/* =====================================================================
   Corrections mobile.
   ===================================================================== */

/* Les deux camemberts restaient cote a cote et le second sortait de
   l'ecran : la repartition automatique ne basculait pas sur une colonne.
   On l'impose, et on borne le camembert a la largeur disponible plutot
   qu'a une valeur plancher de 200px. */
@media (max-width:820px){
  .pies{grid-template-columns:minmax(0,1fr);justify-items:center}
  .pieblk{width:100%;max-width:420px}
  .pie{width:min(68vw,260px)}
}

/* Les thematiques gardaient une colonne de 420px, plus large que la zone
   de contenu d'un telephone : elle debordait. */
@media (max-width:900px){
  .bloc-thm .thm{grid-template-columns:minmax(0,1fr)}
}