/* confiance-v1 — l'écran « Confiance en soi » et son lecteur (sans ombres portées, sans flash) ; accent abricot doux */
#ec-confiance .cs-tete .retour{margin-bottom:10px}
/* l'interrupteur Adulte / Enfant */
#ec-confiance .cs-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;border-radius:999px;border:1px solid var(--trait,rgba(255,255,255,.16))}
#ec-confiance .cs-mode{min-height:48px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:1rem;cursor:pointer}
#ec-confiance .cs-mode.actif{background:#F4A882;color:#3A2016}
#ec-confiance.cs-mode-enfant .cs-mode.actif{background:#FFD66B;color:#3A2A12}
#ec-confiance .cs-mode:focus-visible,#ec-confiance .cs-onglet:focus-visible,#ec-confiance .cs-carte:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* la phrase d'accueil et les marches dessinées */
#ec-confiance .cs-intro{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(244,168,130,.24);background:linear-gradient(135deg,rgba(244,168,130,.11),rgba(255,208,138,.06))}
#ec-confiance .cs-ornement{flex:0 0 72px;width:72px;height:54px;display:block;color:inherit}
#ec-confiance .cs-ornement svg{display:block;width:100%;height:100%}
#ec-confiance .cs-intro p{margin:0;line-height:1.45;font-size:.95rem}
html.theme-clair #ec-confiance .cs-intro{border-color:rgba(190,100,60,.20);background:linear-gradient(135deg,rgba(220,120,70,.08),rgba(200,150,30,.06))}
/* le mode Enfant : plus chaud, plus grand */
#ec-confiance.cs-mode-enfant .cs-intro{border-color:rgba(255,214,107,.30);background:linear-gradient(135deg,rgba(255,214,107,.12),rgba(255,160,120,.08))}
#ec-confiance.cs-mode-enfant .cs-intro p{font-size:1.02rem}
#ec-confiance.cs-mode-enfant .cs-onglet{min-height:52px;font-size:1.02rem}
#ec-confiance.cs-mode-enfant .cs-onglet.actif{background:#FFD66B;color:#3A2A12;border-color:#FFD66B}
#ec-confiance.cs-mode-enfant .cs-fiche-exemple{border-inline-start-color:#FFD66B;background:rgba(255,214,107,.10)}
#ec-confiance.cs-mode-enfant .cs-carte{min-height:124px;border-radius:20px;padding:14px 14px 14px 16px;background:rgba(255,214,107,.07);border-color:rgba(255,214,107,.26)}
#ec-confiance.cs-mode-enfant .cs-carte b{font-size:1.14rem}
#ec-confiance.cs-mode-enfant .cs-carte span{font-size:.92rem;line-height:1.4}
html.theme-clair #ec-confiance.cs-mode-enfant .cs-carte{background:rgba(255,190,60,.10);border-color:rgba(200,140,30,.28)}
html.theme-clair #ec-confiance.cs-mode-enfant .cs-intro{border-color:rgba(200,140,30,.25);background:linear-gradient(135deg,rgba(255,190,60,.12),rgba(255,140,100,.07))}
#ec-confiance .cs-onglets{display:flex;flex-wrap:nowrap;gap:8px;margin:2px 0 0;padding:2px 0 4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;max-width:100%}
#ec-confiance .cs-onglets::-webkit-scrollbar{display:none}
/* la barre défile : un léger fondu sur le bord où il reste des onglets à voir */
#ec-confiance .cs-onglets.plus-droite{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
#ec-confiance .cs-onglets.plus-gauche{-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
#ec-confiance .cs-onglets.plus-gauche.plus-droite{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
[dir=rtl] #ec-confiance .cs-onglets.plus-droite:not(.plus-gauche){-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
[dir=rtl] #ec-confiance .cs-onglets.plus-gauche:not(.plus-droite){-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
#ec-confiance .cs-onglet{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--trait,rgba(255,255,255,.16));background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
#ec-confiance .cs-onglet.actif{background:#F4A882;color:#3A2016;border-color:#F4A882}
#ec-confiance .cs-fiche h2{margin:0 0 10px;font-size:1.2rem;line-height:1.25}
#ec-confiance .cs-fiche-etiquette{margin:0 0 2px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
#ec-confiance .cs-fiche-sens{margin:0 0 12px;line-height:1.5}
#ec-confiance .cs-fiche-exemple{margin:0;padding:10px 12px;border-radius:14px;border-inline-start:3px solid #F4A882;background:rgba(244,168,130,.10);line-height:1.5;font-style:italic;color:var(--encre-douce,#D8CBC2)}
#ec-confiance .cs-vide{margin:12px 4px;text-align:center;opacity:.75;line-height:1.5}
#ec-confiance .cs-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#ec-confiance .cs-carte{position:relative;display:flex;flex-direction:column;gap:4px;text-align:start;min-width:0;min-height:96px;padding:12px 12px 12px 14px;border-radius:16px;border:1px solid var(--trait,rgba(255,255,255,.14));background:rgba(255,255,255,.05);color:inherit;font:inherit;cursor:pointer}
#ec-confiance .cs-carte b{font-size:1rem;line-height:1.25;padding-inline-end:20px;overflow-wrap:anywhere}
#ec-confiance .cs-carte span{font-size:.8rem;line-height:1.35;color:var(--encre-douce,#D8CBC2)}
#ec-confiance .cs-carte small{font-size:.72rem;opacity:.65}
#ec-confiance .cs-pied{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
#ec-confiance .cs-genre,#ec-confiance .cs-libre{font-style:normal;font-size:.68rem;padding:2px 7px;border-radius:999px;line-height:1.4}
#ec-confiance .cs-genre-jeu{background:rgba(232,184,107,.20);color:#F3D29C}
#ec-confiance .cs-genre-exo{background:rgba(127,207,192,.18);color:#A9E3D8}
#ec-confiance .cs-libre{background:rgba(111,207,151,.18);color:#9EE2BA}
#ec-confiance .cs-cadenas{position:absolute;top:10px;inset-inline-end:10px;width:14px;height:16px;opacity:.75;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='1' y='7' width='12' height='9' rx='2' fill='%23C9C2D8'/%3E%3Cpath d='M3.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%23C9C2D8' stroke-width='1.6'/%3E%3C/svg%3E")}
html.theme-clair #ec-confiance .cs-carte{background:rgba(0,0,0,.03)}
html.theme-clair #ec-confiance .cs-fiche-exemple{background:rgba(220,120,70,.08);border-inline-start-color:#C0714B}
html.theme-clair #ec-confiance .cs-genre-jeu{background:rgba(170,110,30,.12);color:#7A4E12}
html.theme-clair #ec-confiance .cs-genre-exo{background:rgba(30,130,115,.12);color:#1D6B60}
html.theme-clair #ec-confiance .cs-libre{background:rgba(40,150,90,.12);color:#1F7A48}
@media (max-width:340px){#ec-confiance .cs-grille{grid-template-columns:1fr}}

/* le lecteur plein écran */
html.cs-ouvert,html.cs-ouvert body{overflow:hidden}
.cs-lecteur{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 14px);background:var(--brume,#130E20);color:var(--encre,#F1ECF7)}
.cs-lecteur[hidden]{display:none}
html.theme-clair .cs-lecteur{background:#F7F5FB;color:#2A2433}
.cs-barre{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;min-height:44px;width:100%;max-width:560px;margin:0 auto}
.cs-fermer{width:44px;height:44px;border-radius:50%;border:1px solid var(--trait,rgba(255,255,255,.16));background:transparent;color:inherit;font-size:18px;cursor:pointer}
html.theme-clair .cs-fermer{border-color:rgba(0,0,0,.18)}
.cs-titre{font-weight:700;font-size:1.05rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-info{font-size:.85rem;opacity:.75}
.cs-consigne{margin:6px auto 8px;max-width:560px;min-height:1.4em;font-size:1rem;line-height:1.4;text-align:center;opacity:.9}
.cs-zone{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:12px;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:manipulation}
.cs-zone button{font:inherit}
/* les boutons « bouton » des contenus (comme sur le banc d'essai) : l'application n'a pas de style global pour cette classe */
.cs-lecteur .bouton{-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#F4A882;color:#2A2233;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.cs-lecteur .bouton.secondaire{background:transparent;color:inherit;border:1px solid var(--trait,rgba(255,255,255,.22))}
html.theme-clair .cs-lecteur .bouton.secondaire{border-color:rgba(0,0,0,.2)}
.cs-lecteur .bouton:disabled{opacity:.45;cursor:default}
.cs-fin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(19,14,32,.82);z-index:5}
html.theme-clair .cs-fin{background:rgba(247,245,251,.88)}
.cs-fin-boite{max-width:420px;width:100%;text-align:center;padding:22px 18px;border-radius:22px;border:1px solid var(--trait,rgba(255,255,255,.16));background:var(--brume,#1B1430)}
html.theme-clair .cs-fin-boite{background:#fff}
.cs-fin-boite h3{margin:0 0 8px;font-size:1.3rem}
.cs-fin-boite p{margin:0 0 16px;line-height:1.5;opacity:.9}
.cs-fin-boutons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cs-fin-boutons .bouton{min-height:48px;min-width:0}
.cs-erreur{opacity:.8;text-align:center}

/* le lecteur en mode Enfant : texte plus grand, boutons plus larges, couleur chaude */
.cs-lecteur.cs-lecteur-enfant .cs-consigne{font-size:1.12rem}
.cs-lecteur.cs-lecteur-enfant .cs-titre{font-size:1.15rem}
.cs-lecteur.cs-lecteur-enfant .bouton{min-height:56px;padding:0 22px;font-size:1.05rem;background:#FFD66B;color:#3A2A12}
.cs-lecteur.cs-lecteur-enfant .bouton.secondaire{background:transparent;color:inherit}
.cs-lecteur.cs-lecteur-enfant .cs-fermer{width:52px;height:52px}
.cs-lecteur.cs-lecteur-enfant .cs-barre{grid-template-columns:52px 1fr auto}
.cs-lecteur.cs-lecteur-enfant .cs-fin{padding:16px 8px}
.cs-lecteur.cs-lecteur-enfant .cs-fin-boite{padding:22px 12px}
.cs-lecteur.cs-lecteur-enfant .cs-fin-boutons{gap:8px}
.cs-lecteur.cs-lecteur-enfant .cs-fin-boutons .bouton{min-height:56px;min-width:0;padding:4px 6px;font-size:1rem;white-space:normal;overflow-wrap:anywhere;line-height:1.2}

/* « Le coin des enfants » : l'entrée « Ma confiance » (même style que les autres groupes) */
.menu-enfants .section-e.cs-enf{background:#FCE6D8}