/* Séga Pou Ou : feuille de style commune (charte : 03-MARQUE-charte.md) */
:root{
  --flamboyant:#D94A22; --flamboyant-fonce:#B93B17;
  --lagon:#0E7C86; --lagon-fonce:#0A5F67;
  --vanille:#FFF6E9; --sable:#F3E3CC; --sable-fonce:#E6CFAE;
  --nuit:#2B1D14; --nuit-doux:#5A4638;
  --soleil:#F4B942;
  --blanc:#FFFFFF;
  --rayon:18px;
  --ombre:0 8px 24px rgba(43,29,20,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vanille);color:var(--nuit);font-family:Nunito,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.55}
img,svg{max-width:100%;height:auto}
a{color:var(--lagon)}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:800;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:34px}
h2{font-size:27px}
h3{font-size:21px}
p{margin:0 0 1em}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
.wrap-large{max-width:1040px;margin:0 auto;padding:0 20px}
/* En-tête */
.entete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.entete .logo img{height:40px;width:auto;display:block}
.entete .lieu{font-size:14px;color:var(--nuit-doux);display:none}
.entete .btn{display:none}
@media(min-width:760px){.entete .lieu{display:block}.entete .btn{display:inline-flex}}
/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--flamboyant);color:#fff;font-weight:800;font-size:18px;padding:16px 26px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;box-shadow:0 6px 18px rgba(217,74,34,.28);transition:transform .08s ease,background .15s ease;font-family:inherit}
.btn:hover{background:var(--flamboyant-fonce)}
.btn:active{transform:translateY(1px)}
.btn.large{width:100%;font-size:20px;padding:18px 26px}
.btn.second{background:var(--lagon);box-shadow:none}
.btn.second:hover{background:var(--lagon-fonce)}
.btn.fantome{background:transparent;color:var(--lagon);box-shadow:none;border:2px solid var(--lagon)}
.btn.fantome:hover{background:rgba(14,124,134,.08)}
.micro{font-size:15px;color:var(--nuit-doux);margin-top:10px}
.badge{display:inline-block;white-space:nowrap;background:var(--soleil);color:var(--nuit);font-weight:800;font-size:14px;padding:6px 12px;border-radius:999px;letter-spacing:.01em}
.badge.lagon{background:var(--lagon);color:#fff}
.badge.sable{background:var(--sable);color:var(--nuit)}
/* Sections */
section{padding:44px 0}
section.sable{background:var(--sable)}
section.nuit{background:var(--nuit);color:#fff}
section.nuit h2,section.nuit h3{color:#fff}
section.nuit a{color:var(--soleil)}
.sur-titre{font-weight:800;color:var(--lagon);text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin-bottom:8px}
section.nuit .sur-titre{color:var(--soleil)}
/* Cartes */
.carte{background:#fff;border-radius:var(--rayon);padding:22px;box-shadow:var(--ombre)}
.carte.sable{background:var(--sable);box-shadow:none}
.grille{display:grid;gap:16px}
.grille>*,.prix>*,.etapes>*,.scene>*,.qui>*{min-width:0}
@media(min-width:700px){.grille.deux{grid-template-columns:1fr 1fr}.grille.trois{grid-template-columns:1fr 1fr 1fr}}
/* Lecteur */
.lecteur{display:flex;align-items:center;gap:14px}
.lecteur .play{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--flamboyant);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(217,74,34,.3)}
.lecteur .play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.lecteur .play.on{background:var(--flamboyant-fonce)}
.lecteur .play.on svg{margin-left:0}
.lecteur .onde{cursor:pointer}
.lecteur .onde{flex:1;min-width:0;overflow:hidden;height:44px;display:flex;align-items:center;gap:3px}
.lecteur .onde i{display:block;width:4px;border-radius:2px;background:var(--sable-fonce)}
.lecteur .onde i.lu{background:var(--flamboyant)}
.lecteur .temps{font-variant-numeric:tabular-nums;font-size:14px;color:var(--nuit-doux);flex:0 0 auto}
.paroles{font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.45;white-space:pre-line;color:var(--nuit);overflow-wrap:anywhere}
.paroles .refrain{font-weight:800;color:var(--flamboyant)}
.lien-paroles{margin-top:10px;background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--lagon);text-decoration:underline;cursor:pointer}
.lien-paroles:hover{color:var(--flamboyant)}
.etiquette{font-size:14px;color:var(--nuit-doux);font-weight:700}
/* Étapes */
.etapes{display:grid;gap:18px}
@media(min-width:760px){.etapes{grid-template-columns:1fr 1fr 1fr}}
.etape{position:relative;padding:22px;background:#fff;border-radius:var(--rayon);box-shadow:var(--ombre)}
.etape .num{width:40px;height:40px;border-radius:50%;background:var(--soleil);color:var(--nuit);font-weight:800;display:flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-size:20px;margin-bottom:10px}
/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-block;margin:0;background:#fff;border:2px solid var(--sable-fonce);border-radius:999px;padding:10px 16px;font-weight:700;font-size:16px;cursor:pointer;user-select:none;line-height:1.3}
.chip.on,.chip:has(input:checked){background:var(--lagon);color:#fff;border-color:var(--lagon)}
.chip input{display:none}
/* Prix */
.prix{display:grid;gap:16px}
@media(min-width:760px){.prix{grid-template-columns:1.2fr 1fr 1fr}}
.offre{background:#fff;border-radius:var(--rayon);padding:24px;box-shadow:var(--ombre);border:2px solid transparent;display:flex;flex-direction:column}
.offre.principale{border-color:var(--flamboyant)}
.offre .montant{font-family:Fraunces,serif;font-weight:800;font-size:44px;line-height:1;margin:6px 0 4px}
.offre .montant small{font-size:18px;font-family:Nunito,sans-serif;font-weight:700;color:var(--nuit-doux)}
.offre ul{padding-left:20px;margin:10px 0 16px}
.offre li{margin-bottom:6px}
.offre .btn{margin-top:auto}
/* Tableau comparatif */
.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.compare th,.compare td{padding:14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sable)}
.compare th{background:var(--sable);font-size:15px}
.compare th:last-child{background:var(--lagon);color:#fff}
.compare td:last-child{font-weight:700}
.compare tr:last-child td{border-bottom:0}
/* FAQ */
details{background:#fff;border-radius:14px;padding:4px 18px;box-shadow:var(--ombre);margin-bottom:10px}
summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:Fraunces,serif;font-size:26px;color:var(--flamboyant);flex:0 0 auto}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:14px}
/* Formulaires */
label{display:block;font-weight:800;margin:18px 0 8px}
label .aide{display:block;font-weight:400;font-size:15px;color:var(--nuit-doux)}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{width:100%;font:inherit;font-size:18px;padding:14px 16px;border:2px solid var(--sable-fonce);border-radius:14px;background:#fff;color:var(--nuit)}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(14,124,134,.35);border-color:var(--lagon)}
textarea{min-height:150px;resize:vertical}
.vocal{background:#fff;border:2px dashed var(--lagon);border-radius:var(--rayon);padding:20px;text-align:center}
.vocal .mic{width:84px;height:84px;border-radius:50%;background:var(--lagon);border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(14,124,134,.35)}
.vocal .mic svg{width:36px;height:36px;fill:#fff}
.vocal .mic.rec{background:var(--flamboyant);animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,74,34,.5)}100%{box-shadow:0 0 0 18px rgba(217,74,34,0)}}
.vocal .chrono{font-family:Fraunces,serif;font-size:30px;font-weight:800;margin-top:8px}
.ou{display:flex;align-items:center;gap:12px;color:var(--nuit-doux);margin:18px 0;font-weight:700}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--sable-fonce)}
.case{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--sable-fonce);border-radius:14px;padding:14px 16px;cursor:pointer;font-weight:400}
.case input{width:22px;height:22px;margin-top:3px;flex:0 0 auto;accent-color:var(--flamboyant)}
.case:has(input:checked){border-color:var(--flamboyant);background:#FFF1EA}
.case b{display:block}
/* Attente */
.attente{text-align:center;padding:30px 0}
.attente .disque{width:120px;height:120px;margin:0 auto 18px;animation:tourne 3s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.attente ol{text-align:left;display:inline-block;margin:0 auto;padding-left:24px}
.attente li{margin:8px 0;color:var(--nuit-doux)}
.attente li.fait{color:var(--lagon);font-weight:700}
.attente li.encours{color:var(--nuit);font-weight:800}
/* Alerte */
.alerte{background:#FFF1EA;border-left:6px solid var(--flamboyant);padding:14px 16px;border-radius:10px}
.info{background:#E6F3F4;border-left:6px solid var(--lagon);padding:14px 16px;border-radius:10px}
/* Pied */
footer{padding:34px 0 110px;font-size:15px;color:var(--nuit-doux)}
footer a{color:var(--nuit-doux);margin-right:14px}
footer .logo img{height:32px;width:auto;display:block;margin-bottom:12px}
@media(min-width:760px){footer{padding-bottom:40px}}
/* Barre mobile collante */
.barre{position:fixed;left:0;right:0;bottom:0;background:rgba(255,246,233,.96);backdrop-filter:blur(8px);border-top:1px solid var(--sable-fonce);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:50}
.barre .btn{width:100%}
@media(min-width:760px){.barre{display:none}}
/* Utilitaires */
.centre{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.sep{height:1px;background:var(--sable-fonce);margin:24px 0}
.cache{display:none !important}
/* mode DEV : ajouter ?dev=1 à l'URL pour voir les notes de build */
.note-dev{display:none}
body.dev .note-dev{display:block;background:#FFEFC2;border:2px dashed #C58A00;padding:10px 14px;border-radius:10px;font-size:14px;margin:10px 0}

/* Ajout du build (20/08) : une colonne de grille ne descend jamais sous la
   largeur mini de son contenu tant qu on ne pose pas min-width:0. Mesure sur
   ecoute.html : 440 px de contenu sur un ecran de 360, donc defilement de cote
   sur le telephone. Ces deux lignes le suppriment partout. */
.grille>*,.disposition>*,.deux-col>*,.mini>*,.actions>*,.partage>*,.prix>*{min-width:0}
.paroles{overflow-wrap:anywhere;word-break:break-word}
/* Une pastille longue ne tient pas sur une ligne a 360 px : elle a le droit de
   passer a la ligne plutot que de faire defiler la page de cote. */
@media(max-width:420px){.badge{white-space:normal}}