/* Coups de cœur, coups de gueule : pages publiques (24/10/2026). Uniquement les jetons du site (site.css) : thème clair et sombre,
   pas de liseret de couleur, pas de dégradé. Cibles de 44 px, focus visible, mouvement réduit respecté. */

.cc-corps [hidden], .cc-vitrine [hidden]{display:none !important}

/* En-tête des trois pages : le même que les autres pages du site (section, titre vert, phrase grise), pas de bandeau pleine largeur. */
.cc-entete{padding-bottom:var(--pas-4)}
.cc-intro{margin-top:.5rem; max-width:60ch; color:var(--encre-douce); line-height:1.55}
.cc-hero-bouton{margin-top:var(--pas-5); min-height:54px; padding:0 1.6rem; font-size:1.02rem; width:100%}
.cc-retour-hero{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; margin:-.5rem 0 .3rem; font-weight:700; font-size:.92rem;
  color:var(--encre-douce); text-decoration:underline; text-underline-offset:3px}
.cc-retour-hero:hover{color:var(--encre)}
@media(min-width:560px){ .cc-hero-bouton{width:auto} }

/* ------------------------------------------------------------------ formulaire */
.cc-corps{padding:var(--pas-5) 0 var(--pas-6)}
.cc-form{max-width:720px; margin:0 auto; background:var(--papier-casse); border:1px solid var(--trait); border-radius:var(--rayon); padding:var(--pas-5)}
@media(min-width:800px){ .cc-form{padding:var(--pas-6)} }
.cc-bloc{border:0; margin:0; padding:0; min-width:0}
.cc-bloc + .cc-bloc, .cc-bloc + .cc-plus, .cc-plus + .cc-bloc{margin-top:var(--pas-5)}
.cc-legende{display:block; padding:0; font-weight:800; font-size:1.02rem; margin-bottom:.7rem; color:var(--encre)}

.cc-erreurs{margin-bottom:var(--pas-5); padding:.9rem 1rem; border:2px solid #9B1616; border-radius:var(--rayon); background:var(--papier); color:var(--encre);
  font-size:.92rem; line-height:1.5}
.cc-erreurs strong{display:block; margin-bottom:.3rem; color:#9B1616}
.cc-erreurs ul{margin:.3rem 0 0; padding-left:1.1rem}
.cc-erreurs:focus{outline:3px solid var(--magenta); outline-offset:2px}
:root[data-theme="sombre"] .cc-erreurs strong{color:#FF9B9B}
@media(prefers-color-scheme:dark){ :root:not([data-theme="clair"]) .cc-erreurs strong{color:#FF9B9B} }

.cc-choix{display:grid; grid-template-columns:1fr; gap:.6rem}
@media(min-width:560px){ .cc-choix{grid-template-columns:1fr 1fr} }
.cc-tuile{position:relative}
.cc-tuile input{position:absolute; opacity:0; pointer-events:none; inset:0}
.cc-tuile label{display:flex; align-items:center; gap:.85rem; min-height:76px; padding:.8rem 1rem; border:1px solid var(--encre-pale); border-radius:var(--rayon);
  background:var(--papier); cursor:pointer}
.cc-tuile .ic{flex:none; width:44px; height:44px; border-radius:50%; background:var(--survol); color:var(--titre-fort); display:grid; place-items:center}
.cc-tuile .tx{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.cc-tuile .t{font-weight:800; font-size:1rem}
.cc-tuile .h{font-size:.84rem; line-height:1.35; color:var(--encre-douce)}
.cc-tuile input:checked + label{background:var(--violet-600); border-color:var(--violet-600); color:#fff}
.cc-tuile input:checked + label .ic{background:rgba(255,255,255,.16); color:#fff}
.cc-tuile input:checked + label .h{color:#E4D2EE}
.cc-tuile input:focus-visible + label{outline:3px solid var(--magenta); outline-offset:2px}

.cc-format{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--encre-pale); border-radius:var(--rayon); overflow:hidden; background:var(--papier)}
.cc-format .seg{position:relative}
.cc-format .seg + .seg{border-left:1px solid var(--trait)}
.cc-format input{position:absolute; opacity:0; pointer-events:none; inset:0}
.cc-format label{display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:52px; font-weight:700; font-size:.95rem; cursor:pointer}
.cc-format input:checked + label{background:var(--violet-600); color:#fff}
.cc-format input:focus-visible + label{outline:3px solid var(--magenta); outline-offset:-3px}

.cc-panneau{margin-top:.9rem}
.cc-fichier-input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.cc-fichier{display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:60px; width:100%; border:2px dashed var(--encre-pale); border-radius:var(--rayon);
  background:var(--papier); color:var(--titre-fort); font-weight:700; font-size:.98rem; cursor:pointer; padding:.6rem 1rem}
.cc-fichier-input:focus-visible + .cc-fichier{outline:3px solid var(--magenta); outline-offset:2px}
.cc-fichier-choisi{display:flex; align-items:center; gap:.8rem; padding:.8rem; background:var(--papier); border:1px solid var(--encre-pale); border-radius:var(--rayon)}
.cc-fichier-icone{width:44px; height:44px; border-radius:var(--rayon-sm); background:var(--survol); color:var(--titre-fort); display:grid; place-items:center; flex:none}
.cc-fichier-nom{font-weight:700; font-size:.94rem; overflow-wrap:anywhere}
.cc-fichier-meta{font-size:.82rem; color:var(--encre-douce)}
.cc-lien-bouton{margin-left:auto; flex:none; min-height:44px; display:inline-flex; align-items:center; padding:0 .4rem; background:none; border:0; font:inherit; font-weight:700;
  font-size:.9rem; color:var(--titre-fort); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
@media(max-width:479px){ .cc-fichier-icone{display:none} }
.cc-aide{font-size:.82rem; color:var(--encre-douce); margin-top:.5rem; line-height:1.45}
.cc-aide-ligne{font-weight:400; font-size:.8rem; color:var(--encre-douce)}
.cc-centre{text-align:center}

.cc-champ label{display:block; font-weight:700; font-size:.92rem; margin-bottom:.4rem}
.cc-champ input[type=text], .cc-champ textarea{width:100%; min-height:48px; padding:.7rem .8rem; font:inherit; font-size:1rem; color:var(--encre); background:var(--papier);
  border:1px solid var(--encre-pale); border-radius:var(--rayon-sm)}
.cc-champ textarea{min-height:170px; resize:vertical; line-height:1.5}
.cc-champ input:focus-visible, .cc-champ textarea:focus-visible{outline:3px solid var(--magenta); outline-offset:2px}
.cc-champ [aria-invalid="true"]{border-color:#9B1616; border-width:2px}
.cc-champ + .cc-champ{margin-top:var(--pas-4)}
.cc-compteur{display:block; text-align:right; font-size:.8rem; color:var(--encre-douce); margin-top:.3rem}

.cc-plus summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; min-height:44px; font-weight:700; color:var(--titre-fort)}
.cc-plus summary::-webkit-details-marker{display:none}
.cc-plus summary svg{transition:transform .15s}
.cc-plus[open] summary svg{transform:rotate(180deg)}
.cc-plus-corps{padding-top:var(--pas-3)}
.cc-deux{display:grid; gap:var(--pas-4); grid-template-columns:1fr}
@media(min-width:560px){ .cc-deux{grid-template-columns:1fr 1fr} }
.cc-deux + .cc-champ{margin-top:var(--pas-4)}
.cc-deux > .cc-champ + .cc-champ{margin-top:0}

.cc-piege{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}

.cc-case{display:flex; align-items:flex-start; gap:.75rem; min-height:44px; font-size:.95rem; line-height:1.45}
.cc-case input{width:24px; height:24px; margin:.1rem 0 0; flex:none; accent-color:var(--violet-600)}
.cc-case input:focus-visible{outline:3px solid var(--magenta); outline-offset:2px}
.cc-case + .cc-case{margin-top:var(--pas-3)}
#bloc-cases{margin-top:var(--pas-4)}
.cc-conditions{margin-top:var(--pas-2)}
.cc-conditions summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:700; color:var(--titre-fort)}
.cc-conditions summary::-webkit-details-marker{display:none}
.cc-conditions summary svg{transition:transform .15s}
.cc-conditions[open] summary svg{transform:rotate(180deg)}
.cc-conditions p{font-size:.88rem; line-height:1.6; color:var(--encre-douce); max-width:62ch}
.cc-conditions p + p{margin-top:.6rem}

.cc-envoyer{width:100%; min-height:54px; font-size:1.02rem}
.cc-envoyer[disabled]{opacity:.6; cursor:progress}
.cc-note-envoi{margin-top:.8rem; text-align:center; font-size:.85rem; color:var(--encre-douce)}
.cc-progres{margin-bottom:var(--pas-4)}
.cc-progres progress{width:100%; height:12px; accent-color:var(--violet-600)}

/* ------------------------------------------------------------------ confirmation et retrait */
.cc-merci{max-width:560px; margin:0 auto; background:var(--papier-casse); border:1px solid var(--trait); border-radius:var(--rayon); padding:var(--pas-6) var(--pas-5); text-align:center}
.cc-merci:focus{outline:3px solid var(--magenta); outline-offset:2px}
.cc-merci-pastille{width:64px; height:64px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; margin:0 auto var(--pas-4)}
.cc-merci h2{font-size:1.5rem; font-weight:800; line-height:1.2}
.cc-merci p{margin-top:.8rem; line-height:1.6; color:var(--encre-douce)}
.cc-code{margin:var(--pas-5) 0 var(--pas-4); padding:var(--pas-4); background:var(--papier); border:1px solid var(--encre-pale); border-radius:var(--rayon)}
.cc-code small{display:block; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-douce)}
.cc-code strong{display:block; margin-top:.35rem; font-size:1.7rem; letter-spacing:.08em; font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--encre); user-select:all}
.cc-autre{display:inline-flex; align-items:center; min-height:44px; margin-top:var(--pas-4); font-weight:700; color:var(--titre-fort); text-decoration:underline; text-underline-offset:3px}
.cc-titre-form{font-size:1.4rem; font-weight:800; line-height:1.2}
.cc-texte-form{margin-top:.7rem; line-height:1.6; color:var(--encre-douce)}
.cc-pied-page{margin-top:var(--pas-5); text-align:center; font-size:.9rem; color:var(--encre-douce)}
.cc-pied-page a{display:inline-flex; align-items:center; min-height:44px; color:var(--titre-fort); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ------------------------------------------------------------------ vitrine */
.cc-vitrine{padding:var(--pas-6) 0 var(--pas-7)}
.cc-vide{text-align:center; color:var(--encre-douce); padding:var(--pas-5) 0}
.cc-grille{display:grid; gap:var(--pas-4); grid-template-columns:1fr}
@media(min-width:640px){ .cc-grille{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .cc-grille{grid-template-columns:repeat(3,1fr)} }
.cc-carte{display:flex; flex-direction:column; background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); overflow:hidden; min-width:0}
.cc-carte-corps{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.45rem}
.cc-carte-titre{font-size:1.02rem; font-weight:700; line-height:1.3; color:var(--encre); overflow-wrap:anywhere}
.cc-carte-meta{font-size:.8rem; color:var(--encre-pale); overflow-wrap:anywhere}
.cc-badge{display:inline-flex; align-items:center; gap:.3rem; align-self:flex-start; padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase}
.cc-badge-coeur{background:#E1F5EE; color:var(--teal)}
.cc-badge-gueule{background:#FBE3F7; color:var(--magenta-sombre)}
.cc-media-video{aspect-ratio:16/9; background:var(--violet-700)}
.cc-media-video video{display:block; width:100%; height:100%; object-fit:cover; background:var(--violet-700)}
.cc-audio{display:flex; align-items:center; padding:1rem; background:var(--survol); aspect-ratio:16/9}
.cc-audio audio{width:100%}
.cc-texte, .cc-texte-entier{margin:0; padding:1rem; background:var(--survol); font-weight:600; line-height:1.55; font-size:.96rem; overflow-wrap:anywhere}
.cc-carte > .cc-texte{min-height:11rem; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden}
.cc-texte-long{background:var(--survol)}
.cc-texte-long > summary{list-style:none; cursor:pointer; display:block}
.cc-texte-long > summary::-webkit-details-marker{display:none}
.cc-texte-long > summary .cc-texte{display:block}
.cc-lire{display:flex; align-items:center; gap:.4rem; min-height:44px; padding:0 1rem; font-size:.88rem; font-weight:700; color:var(--titre-fort)}
.cc-texte-long[open] .cc-lire svg{transform:rotate(180deg)}
.cc-texte-long[open] > summary .cc-texte{display:none}
.cc-texte-long[open] > summary .cc-lire{display:none}
.cc-texte-entier{white-space:pre-wrap}
.cc-voir-plus{margin-top:var(--pas-6); text-align:center}
.cc-voir-plus .bouton{min-height:48px; padding:0 1.4rem; font-size:.95rem}

/* Thème sombre : seules les pastilles ont besoin d'une valeur propre. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .cc-badge-coeur{background:rgba(48,177,157,.2); color:#8FE3D3}
  :root:not([data-theme="clair"]) .cc-badge-gueule{background:rgba(214,79,221,.2); color:#F0B3F4}
}
:root[data-theme="sombre"] .cc-badge-coeur{background:rgba(48,177,157,.2); color:#8FE3D3}
:root[data-theme="sombre"] .cc-badge-gueule{background:rgba(214,79,221,.2); color:#F0B3F4}

@media(prefers-reduced-motion:reduce){ .cc-plus summary svg, .cc-conditions summary svg, .cc-entete .bouton, .cc-corps .bouton, .cc-vitrine .bouton{transition:none} }