/* ==========================================================
   Doussou Formation : base.css
   Commun à toutes les pages : couleurs, polices, conteneur, boutons, fil d’Ariane, encadrés info, cartes de prix, bandeau d’appel à l’action
   Règles reprises telles quelles de style.css, dans le même ordre.
   ========================================================== */


/* ===== Tokens (extraits du fichier Figma) ===== */
:root{
  --navy:#0f3c66;        /* Primaire/01 */
  --navy-2:#103f6b;      /* boutons */
  --blue:#155692;        /* Primaire/02 */
  --blue-btn:#0f60ab;    /* boutons primaires dans les cartes */
  --blue-hover:#3a71a3;
  --blue-med:#2792fa;    /* Medium blue */
  --blue-light:#b1d9ff;  /* Light blue */
  --blue-bg:#f6fbff;     /* Light blue/01 */
  --blue-bg-2:#f7fbff;
  --blue-bg-3:#f7f9fc;
  --blue-nav:#e6f3ff;
  --blue-cta:#d9ecff;
  --beige:#edebdf;
  --beige-nav:#f8f7f2;
  --yellow:#ffc614;
  --orange:#ff5400;
  --text:#000;
  --container:1110px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--text);background:#fff;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:100%;max-width:calc(var(--container) + 32px);margin:0 auto;padding:0 16px}

/* ===== Boutons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Poppins';font-size:18px;letter-spacing:.05em;padding:10px 15px;border-radius:5px;border:2px solid var(--navy-2);cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.btn-primary{background:var(--navy-2);color:#fff}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn-secondary{background:transparent;color:var(--navy-2)}
.btn-secondary:hover{background:var(--navy-2);color:#fff}
.btn-sm{font-size:12px;padding:8px 14px;letter-spacing:.02em}
.btn-blue{background:var(--blue-btn);border-color:var(--blue-btn);color:#fff}
.btn-xs{font-size:10px;font-weight:500;padding:3px 8px;letter-spacing:0;border:0;background:var(--blue-hover);color:#fff}

/* ===== Mise en page ===== */
main{padding-top:55px;display:flex;flex-direction:column;gap:25px}

/* Fil d'Ariane */
.sitemap{background:var(--blue-bg-2);padding:12px 0}
.sitemap ol{display:flex;flex-wrap:wrap;gap:35px;list-style:none;font-weight:600;font-size:17px;letter-spacing:.02em}
.sitemap li+li::before{content:"/";margin-right:35px}

/* Calendrier */
.tag{display:flex;align-items:center;gap:5px;background:rgba(177,217,255,.2);border-radius:5px;padding:5px 10px;font-weight:700;font-size:12px;letter-spacing:.15em}
.tag::before{content:"";width:6px;height:20px;border-radius:10px;background:var(--blue)}

/* Encadrés info */
.info{max-width:922px;margin:0 auto;width:100%;border-radius:30px;padding:15px 25px}
.info-plain{background:var(--blue-bg-3);display:flex;gap:15px}
.info-plain .bar{flex:0 0 8px;background:var(--blue-med);border-radius:20px}
.info-text{font-family:'Inter',sans-serif;font-size:12px;line-height:1.6}
.info-text h3{font-family:'Poppins';font-weight:500;font-size:15px;color:var(--blue);margin-bottom:6px}
.info-text a{text-decoration:underline}
.info-boxed{background:var(--blue-bg);border:1px solid var(--blue-med);display:flex;flex-direction:column;gap:25px}
.info-boxed .row{display:flex;gap:27px}
.info-icon{flex:0 0 64px;height:64px;border-radius:8px;background:#d9d9d9;display:grid;place-items:center}
.info-icon svg{width:34px;height:34px}
.info-text ul{list-style:disc;padding-left:20px;margin-top:8px}
.btn-group{display:flex;flex-wrap:wrap;gap:10px}

/* Section bleu marine (détails) */
.details{border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);padding:5px 0}
.details-inner{background:var(--navy);padding:15px}
.details h2{font-weight:600;font-size:35px;text-transform:uppercase;color:var(--blue-light);margin-bottom:20px;letter-spacing:.03em}

/* Tarifs */
.price-card{background:var(--blue-bg);border:1px solid var(--blue-med);border-radius:30px;padding:15px 25px;display:flex;flex-direction:column;gap:25px;font-family:'Inter',sans-serif;font-size:12px}
.price-pref{background:rgba(177,217,255,.3);border-radius:25px;padding:15px 25px}
.price-label{font-family:'Poppins';font-weight:500;color:var(--blue);font-size:13px}
.price{font-family:'Poppins';font-size:24px;font-weight:500;margin:4px 0}
.price-public{padding-left:26px}
.price-public .price{font-size:13px;font-weight:400;margin:2px 0}
.price-card h3{font-family:'Poppins';font-weight:500;font-size:15px;color:var(--blue);margin-bottom:6px}
.price-card ul{list-style:disc;padding-left:18px;line-height:1.6}
.price-card .stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto}

/* CTA */
.cta{background:var(--blue-cta);padding:84px 0 76px;text-align:center}
.cta h2{font-weight:400;font-size:35px;letter-spacing:.05em;margin-bottom:42px}
.cta .btn-group{justify-content:center;gap:25px}
@media (max-width:640px){
  main{padding-top:24px}
  .details h2,.cta h2{font-size:24px}
  .sitemap ol{gap:10px;font-size:14px}
  .sitemap li+li::before{margin-right:10px}
  .info{border-radius:20px}
  .info-boxed .row{flex-direction:column;gap:12px}
  .btn{font-size:15px;white-space:normal}
  .cta{padding:48px 0}
}

/* ===== Ajouts version PHP ===== */
.sprite{position:absolute}
main{padding-bottom:0}

/* Formulaire */
.summary-list{display:flex;flex-direction:column;gap:10px;font-family:'Poppins';font-size:13px}
.summary-list li{display:flex;gap:10px;align-items:flex-start}
.summary-list svg{width:20px;height:20px;flex:none}

/* ===== Ajouts SEO / lisibilité (page Power BI) ===== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:8px 14px;z-index:100}
.skip-link:focus{left:8px;top:8px}
h3.tag,p.tag{margin:0;font-family:'Poppins'}
.price small{font-size:14px;font-weight:400}
.price-card p{margin:0}
.info-text{font-size:14px}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ===== Pied de page (reprise du footer du site) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}