/* tonprofdanglais.com */

@font-face { font-family: "Fredoka"; src: url("../polices/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../polices/nunito.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --marine: #0b2a7a;
  --marine-fonce: #071c54;
  --rouge: #e30613;
  --rouge-fonce: #b9040f;
  --bleu: #2f7df6;
  --ciel: #eaf2ff;
  --ciel-2: #f6f9ff;
  --jaune: #ffc83d;
  --vert: #12925a;
  --texte: #1b2540;
  --gris: #5a6685;
  --trait: #d9e3f5;
  --blanc: #fff;
  --rayon: 22px;
  --ombre: 0 10px 30px rgba(11, 42, 122, .10);
  --titres: "Fredoka", "Nunito", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; color: var(--texte); background: var(--blanc); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marine); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }
h1, h2, h3 { font-family: var(--titres); color: var(--marine); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

.conteneur { width: min(1160px, 100% - 40px); margin-inline: auto; }
.conteneur-etroit { width: min(760px, 100% - 40px); }
.rouge { color: var(--rouge); }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--marine); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.evitement:focus { left: 8px; }

.surtitre { font-family: var(--titres); font-weight: 600; color: var(--rouge); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0 0 .5em; }
.chapeau { font-size: 1.15rem; color: var(--gris); max-width: 62ch; }
.pastille { display: inline-block; background: var(--blanc); color: var(--marine); font-weight: 700; font-size: .9rem; padding: 6px 16px; border-radius: 99px; box-shadow: var(--ombre); margin-bottom: 1.1em; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--titres); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: 12px 22px; border-radius: 99px; border: 2px solid var(--marine); background: var(--marine); color: #fff; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; box-shadow: 0 4px 0 var(--marine-fonce); }
.bouton:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 6px 0 var(--marine-fonce); }
.bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--marine-fonce); }
.bouton-rouge { background: var(--rouge); border-color: var(--rouge); box-shadow: 0 4px 0 var(--rouge-fonce); }
.bouton-rouge:hover { box-shadow: 0 6px 0 var(--rouge-fonce); }
.bouton-rouge:active { box-shadow: 0 1px 0 var(--rouge-fonce); }
.bouton-clair { background: #fff; color: var(--marine); border-color: var(--trait); box-shadow: 0 4px 0 var(--trait); }
.bouton-clair:hover { color: var(--marine); box-shadow: 0 6px 0 var(--trait); }
.bouton-grand { font-size: 1.1rem; padding: 15px 28px; }
/* Boutons « Quiz » de l'accueil et « Commencer le test » : bleu marine, ombre bleu clair. */
.bouton-quiz { box-shadow: 0 4px 0 #adc6f1; }
.bouton-quiz:hover { box-shadow: 0 6px 0 #adc6f1; }
.bouton-quiz:active { box-shadow: 0 1px 0 #adc6f1; }
.bouton[disabled] { opacity: .6; cursor: wait; transform: none; }

/* Logo en texte */
.logo { font-family: var(--titres); font-weight: 700; font-size: 1.55rem; letter-spacing: -.01em; white-space: nowrap; }
.logo-a { color: var(--marine); }
.logo-b { color: var(--rouge); }
.logo-c { color: var(--marine); font-weight: 400; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.entete-logo { text-decoration: none; }
.entete .logo { font-size: 1.95rem; }
/* Avec le grand logo, les intitulés du menu passeraient sur deux lignes : ils restent sur une seule. */
.menu a:not(.bouton), .menu-groupe > button { white-space: nowrap; }
.menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.menu a:not(.bouton), .menu-groupe > button { font: inherit; font-weight: 700; color: var(--texte); text-decoration: none; background: none; border: 0; padding: 10px 12px; border-radius: 12px; cursor: pointer; display: block; }
.menu a:not(.bouton):hover, .menu-groupe > button:hover, .menu a[aria-current] { color: var(--marine); background: var(--ciel); }
.menu-groupe { position: relative; }
.menu-groupe > button::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg) translateY(-3px); margin-left: 8px; }
.menu-groupe > ul { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: #fff; border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); display: none; }
@media (min-width: 1181px) {
  .menu-groupe.ouvert > ul, .menu-groupe:hover > ul, .menu-groupe:focus-within > ul { display: block; }
}
.menu-groupe > ul::before { content: ""; position: absolute; inset: -8px 0 auto; height: 8px; }
.menu-action { margin-left: 8px; }
.menu-bouton { display: none; width: 46px; height: 46px; border: 0; background: var(--ciel); border-radius: 12px; cursor: pointer; padding: 12px; flex-direction: column; justify-content: space-between; }
.menu-bouton span { display: block; height: 3px; background: var(--marine); border-radius: 3px; }

.menu-tete, .menu-voile { display: none; }
.menu { margin-left: auto; }
.entete-actions { display: flex; align-items: center; gap: 14px; }
.entete-compte { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--marine); text-decoration: none; border-radius: 99px; }
.entete-compte:hover { color: var(--marine); }
/* Le personnage garde toujours la même petite taille dans la barre. Au survol, la silhouette blanche passe au rouge. */
.entete-compte .icone { width: 30px; height: 30px; }
.icone .perso { transition: fill .15s; }
.entete-compte:hover .perso, .menu-compte-grand:hover .perso { fill: var(--rouge); }
.entete-compte span { display: none; }
@media (min-width: 1331px) {
  .entete-compte span { display: inline; } /* le mot « Connexion » seulement quand la place le permet */
}

/* Petits écrans : panneau latéral qui glisse depuis la droite */
@media (max-width: 1180px) {
  /* backdrop-filter ferait de l'en-tête le repère des éléments fixes, ce qui emprisonnerait le panneau. */
  .entete { backdrop-filter: none; background: #fff; }
  .menu-bouton { display: flex; flex: none; }
  .entete-actions { margin-left: auto; }
  .menu { margin-left: 0; }
  .menu-voile { display: block; position: fixed; inset: 0; background: rgba(7, 28, 84, .5); z-index: 55; }
  .menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(400px, 88vw); background: #fff; padding: 18px 28px 40px; overflow-y: auto; box-shadow: -20px 0 60px rgba(7, 28, 84, .25); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }
  .menu.ouvert { transform: none; visibility: visible; }
  html.menu-ouvert { overflow: hidden; }

  .menu-tete { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid var(--trait); }
  .menu-fermer { align-self: flex-end; width: 44px; height: 44px; border: 0; background: none; color: var(--marine); cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
  .menu-fermer:hover { background: var(--ciel); }
  .menu-fermer .icone { width: 30px; height: 30px; }
  .menu a.menu-compte-grand { display: flex; flex-direction: column; align-items: center; gap: 6px; width: auto; padding: 0; text-align: center; font-family: var(--titres); font-weight: 600; font-size: 1.2rem; color: var(--marine); text-decoration: none; }
  .menu a.menu-compte-grand:hover { background: none; color: var(--marine); }
  .menu-compte-grand .icone { width: 64px; height: 64px; }
  .menu-tete .bouton { min-width: 200px; }

  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > ul > li { border-bottom: 1px solid var(--trait); }
  .menu a:not(.bouton), .menu-groupe > button { width: 100%; text-align: left; font-family: var(--titres); font-weight: 600; font-size: 1.15rem; color: var(--marine); padding: 16px 4px; border-radius: 0; }
  .menu > ul > li > a:not(.bouton):hover, .menu-groupe > button:hover { background: none; color: var(--rouge); }
  .menu-groupe > button { display: flex; align-items: center; justify-content: space-between; }
  .menu-groupe > button::after { margin: 0 8px 0 0; transition: transform .2s; }
  .menu-groupe.ouvert > button { color: var(--rouge); }
  .menu-groupe.ouvert > button::after { transform: rotate(-135deg) translateY(-3px); }
  .menu-groupe > ul { position: static; display: none; min-width: 0; border: 0; padding: 0; margin: 4px 0 18px; background: var(--ciel-2); border-radius: 16px; box-shadow: 0 10px 26px rgba(11, 42, 122, .12); overflow: hidden; }
  .menu-groupe > ul::before { display: none; }
  .menu-groupe.ouvert > ul { display: block; }
  .menu-groupe > ul li + li { border-top: 1px solid var(--trait); }
  .menu-groupe > ul a:not(.bouton) { font-family: inherit; font-weight: 700; font-size: 1.05rem; padding: 14px 18px; }
  .menu-groupe > ul a:not(.bouton):hover, .menu-groupe > ul a[aria-current] { background: var(--ciel); color: var(--marine); }
}

/* Hero */
.hero { background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel-2) 100%); padding: clamp(36px, 6vw, 80px) 0; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero-court .hero-in { grid-template-columns: 1.4fr .8fr; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6em 0 1.4em; }
.hero-preuves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; color: var(--marine); font-size: .95rem; }
.hero-preuves li::before { content: "✓"; color: var(--vert); font-weight: 800; margin-right: 6px; }
.hero-img { position: relative; }
.hero-img img { border-radius: 28px; box-shadow: 0 20px 50px rgba(11, 42, 122, .18); border: 6px solid #fff; transform: rotate(1.5deg); }
.bulle { position: absolute; background: #fff; color: var(--marine); font-family: var(--titres); font-weight: 600; padding: 10px 18px; border-radius: 20px 20px 20px 4px; box-shadow: var(--ombre); animation: flotter 4s ease-in-out infinite; }
.bulle-1 { left: -14px; top: 10%; }
.bulle-2 { right: -8px; bottom: 12%; border-radius: 20px 20px 4px 20px; background: var(--rouge); color: #fff; animation-delay: 1.2s; }
@keyframes flotter { 50% { transform: translateY(-8px); } }

section { padding: clamp(44px, 6vw, 84px) 0; }

/* Cartes de publics (accueil) */
.publics-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-top: 1.8em; }
.public-carte { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: var(--texte); transition: transform .2s, box-shadow .2s, border-color .2s; }
.public-carte:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: var(--bleu); color: var(--texte); }
.public-carte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.public-txt { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.public-txt small { color: var(--rouge); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.public-txt strong { font-family: var(--titres); font-size: 1.25rem; color: var(--marine); font-weight: 600; }
.public-txt span { color: var(--gris); font-size: .95rem; flex: 1; }
.public-txt em { font-style: normal; font-weight: 800; color: var(--marine); margin-top: 8px; }
.public-txt em::after { content: " →"; }

/* Intro image + texte */
.intro-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.intro-inverse .intro-img { order: 2; }
.intro-img img { border-radius: 28px; box-shadow: var(--ombre); }
.note-parents { background: var(--ciel); border-left: 5px solid var(--bleu); padding: 14px 18px; border-radius: 0 14px 14px 0; font-size: .97rem; }

/* Points forts */
.points { background: var(--ciel-2); }
.points-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 1.6em; }
.point { background: #fff; border-radius: var(--rayon); padding: 26px 22px; box-shadow: var(--ombre); }
.point-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ciel); font-size: 1.7rem; margin-bottom: 14px; }
.point p { color: var(--gris); margin: 0; font-size: .98rem; }

/* Tableau des tests */
.tableau-defile { overflow-x: auto; margin-top: 1.4em; border-radius: var(--rayon); border: 2px solid var(--trait); }
table { border-collapse: collapse; width: 100%; min-width: 620px; background: #fff; }
th, td { text-align: left; padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--trait); }
thead th { background: var(--marine); color: #fff; font-family: var(--titres); font-weight: 600; }
tbody th { font-family: var(--titres); color: var(--rouge); font-size: 1.1rem; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
.tableau-note { color: var(--gris); margin-top: 1em; font-size: .97rem; }

/* Module de quiz */
.module-quiz { background: var(--marine); color: #fff; position: relative; }
.mq-accueil h2, .mq-accueil > .chapeau { color: #fff; }
.mq-accueil .surtitre { color: var(--jaune); }
.mq-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 1.8em; }
.mq-carte { background: #fff; color: var(--texte); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s; }
.mq-carte:hover { transform: translateY(-6px) rotate(-.5deg); }
.mq-carte-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mq-carte-txt { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.mq-carte-txt h3 { margin-bottom: .3em; }
.mq-carte-txt > p:not(.mq-meta) { color: var(--gris); font-size: .95rem; flex: 1; }
.mq-carte-txt .bouton { align-self: flex-start; }
.mq-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .7em; }
.mq-meta span { background: var(--ciel); color: var(--marine); font-weight: 800; font-size: .72rem; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.mq-meta span:first-child { background: var(--marine); color: #fff; }
.mq-carte-test { border: 4px solid var(--jaune); }
.mq-carte-test .mq-meta span:first-child { background: var(--rouge); }
@media (min-width: 900px) {
  .mq-carte-test { grid-column: span 2; flex-direction: row; }
  .mq-carte-test .mq-carte-img { flex: 0 0 46%; }
  .mq-carte-test .mq-carte-img img { height: 100%; aspect-ratio: auto; }
  .mq-carte-test .mq-carte-txt { justify-content: center; padding: 26px; }
  .mq-carte-test .mq-carte-txt > p:not(.mq-meta) { flex: 0; font-size: 1.05rem; }
  .mq-carte-test h3 { font-size: 1.6rem; }
}
.mq-plus { text-align: center; margin: 1.8em 0 0; }
.mq-plus a { color: #fff; font-weight: 700; }

.mq-lecteur, .mq-fin { background: #fff; color: var(--texte); border-radius: 28px; padding: clamp(18px, 3vw, 36px); max-width: 940px; margin-inline: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.lecteur-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.lecteur-quitter { font: inherit; font-weight: 700; font-size: .9rem; color: var(--gris); background: none; border: 2px solid var(--trait); border-radius: 99px; padding: 5px 14px; cursor: pointer; }
.lecteur-quitter:hover { color: var(--rouge); border-color: var(--rouge); }
.progression { flex: 1; height: 14px; background: var(--ciel); border-radius: 99px; overflow: hidden; }
.progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu), var(--marine)); border-radius: 99px; transition: width .4s; }
.compteur { font-family: var(--titres); font-weight: 600; color: var(--marine); white-space: nowrap; }
.lecteur-corps { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.lecteur-img img { border-radius: 20px; }
.q-titre { color: var(--gris); font-weight: 700; font-size: .9rem; margin-bottom: .6em; }
.serie { color: var(--rouge); margin-left: 8px; white-space: nowrap; }
.q-texte { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 1em; }
.q-texte:focus { outline: none; }
.trou { display: inline-block; width: 3.2em; border-bottom: 4px solid var(--rouge); margin: 0 .15em; transform: translateY(2px); }
.q-choix { display: grid; gap: 12px; }
.choix { font: inherit; font-weight: 700; font-size: 1.05rem; text-align: left; padding: 14px 18px; background: #fff; color: var(--texte); border: 2px solid var(--trait); border-radius: 16px; cursor: pointer; box-shadow: 0 4px 0 var(--trait); transition: transform .12s, border-color .12s, background .12s; }
.choix:not(:disabled):hover { border-color: var(--bleu); background: var(--ciel-2); transform: translateY(-2px); }
.choix:disabled { cursor: default; box-shadow: none; }
.choix.choisi { border-color: var(--marine); background: var(--ciel); }
.choix.juste { border-color: var(--vert); background: #e6f7ee; color: #0a5c38; animation: rebond .4s; }
.choix.faux { border-color: var(--rouge); background: #fdeaeb; color: var(--rouge-fonce); animation: secouer .35s; }
.choix.juste::after { content: " ✓"; }
.choix.faux::after { content: " ✗"; }
@keyframes rebond { 40% { transform: scale(1.04); } }
@keyframes secouer { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.q-retour { margin-top: 16px; padding: 12px 16px; border-radius: 14px; font-size: .98rem; }
.q-retour.ok { background: #e6f7ee; color: #0a5c38; }
.q-retour.ko { background: #fdeaeb; color: #7d0810; }
.q-suivant { margin-top: 18px; }

/* Résultat */
.mq-resultat { text-align: center; position: relative; padding-bottom: 8px; }
.mq-resultat .chapeau { margin-inline: auto; }
.scores { display: flex; justify-content: center; gap: 18px; margin: 1em 0 1.2em; flex-wrap: wrap; }
.score { min-width: 150px; padding: 16px 22px; border-radius: 22px; display: flex; flex-direction: column; }
.score strong { font-family: var(--titres); font-size: 3rem; line-height: 1; }
.score span { font-weight: 700; font-size: .95rem; }
.score-juste { background: #e6f7ee; color: #0a5c38; }
.score-faux { background: #fdeaeb; color: var(--rouge-fonce); }
.confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confettis i { position: absolute; top: -12px; left: var(--x); width: 10px; height: 16px; background: var(--c); border-radius: 3px; animation: tomber 2.2s var(--d) ease-in forwards; }
@keyframes tomber { to { transform: translateY(340px) rotate(540deg); opacity: 0; } }

/* Formulaire */
.mq-form { border-top: 2px dashed var(--trait); margin-top: 22px; padding-top: 26px; }
.mq-form h3 { font-size: 1.5rem; }
.mq-form-intro { color: var(--gris); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grille-3 { display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: 0 18px; } /* code postal, ville, pays */
.champ { margin-bottom: 16px; }
.champ label, .champ-choix legend { display: block; font-weight: 800; color: var(--marine); margin-bottom: 6px; padding: 0; }
.champ small, .champ-choix small { font-weight: 600; color: var(--gris); }
.champ-zone { position: relative; display: block; }
.champ input[type=text], .champ input[type=email], .champ input[type=tel], .champ input[type=password], .champ input[type=date], .champ input[type=time], .champ select, .champ textarea { width: 100%; font: inherit; color: var(--texte); background: #fff; border: 2px solid var(--trait); border-radius: 14px; padding: 12px 42px 12px 14px; transition: border-color .15s, box-shadow .15s; }
/* Listes déroulantes : sans « appearance: none », Safari garde sa propre forme et ignore hauteur et coins arrondis.
   La flèche du navigateur disparaît avec, elle est redessinée en image de fond. */
.champ select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b2a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.champ textarea { resize: vertical; min-height: 90px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(47, 125, 246, .18); }
.croix { position: absolute; right: 8px; top: 9px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ciel); color: var(--marine); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.croix:hover { background: var(--marine); color: #fff; }
.en-erreur input, .en-erreur select, .en-erreur textarea { border-color: var(--rouge) !important; }
.champ-erreur { color: var(--rouge-fonce); font-weight: 700; font-size: .9rem; margin: 6px 0 0; }
.champ-erreur::before { content: "⚠ "; }
.champ-choix { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.champ-choix legend { width: 100%; }
.puce { cursor: pointer; }
.puce input { position: absolute; opacity: 0; }
.puce span { display: inline-block; padding: 8px 16px; border: 2px solid var(--trait); border-radius: 99px; font-weight: 700; font-size: .95rem; background: #fff; transition: all .15s; }
.puce:hover span { border-color: var(--bleu); }
.puce input:checked + span { background: var(--marine); border-color: var(--marine); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.champ-case label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--texte); font-size: .95rem; cursor: pointer; }
.champ-case input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--marine); flex: none; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mq-form-erreur { background: #fdeaeb; color: #7d0810; padding: 12px 16px; border-radius: 14px; font-weight: 700; }
.mq-mineur { color: var(--gris); font-size: .88rem; margin: 14px 0 0; }
.mq-merci { text-align: center; padding: 20px 0 6px; }
.mq-merci h3 { font-size: 1.8rem; }
.niveau-estime { font-family: var(--titres); font-size: 1.3rem; color: var(--marine); }
.niveau-estime strong { display: inline-block; background: var(--jaune); padding: 4px 18px; border-radius: 99px; font-size: 1.8rem; margin-left: 8px; }

/* Conseil du prof */
.conseil-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.conseil-img img { border-radius: 28px; box-shadow: var(--ombre); }
.conseil blockquote { margin: 0 0 1em; font-family: var(--titres); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4; color: var(--marine); background: var(--ciel); padding: 26px 28px; border-radius: 26px 26px 26px 6px; position: relative; }
.conseil a { font-weight: 800; }

/* Étapes */
.etapes { background: var(--ciel-2); }
.etapes-liste { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.etapes-liste li { background: #fff; border-radius: var(--rayon); padding: 30px 24px 22px; box-shadow: var(--ombre); position: relative; }
.etape-num { position: absolute; top: -18px; left: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--rouge); color: #fff; font-family: var(--titres); font-weight: 700; font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 4px 0 var(--rouge-fonce); }
.etapes-liste p { color: var(--gris); margin: 0; }

/* Avis */
.avis-note { font-size: 1.05rem; }
.pastille-note .etoiles { margin-right: 4px; }
.etoiles { color: #f5a400; letter-spacing: 2px; }
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 1.4em; align-items: start; }
.avis-carte { margin: 0; background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon); padding: 22px; }
.avis-carte figcaption { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; line-height: 1.3; }
.avis-carte figcaption small { color: var(--gris); }
.avis-carte figcaption .etoiles { margin-left: auto; font-size: .9rem; }
.avis-initiale { width: 44px; height: 44px; border-radius: 50%; background: var(--marine); color: #fff; font-family: var(--titres); font-weight: 600; font-size: 1.2rem; display: grid; place-items: center; flex: none; }
.avis-texte { margin: 0; color: var(--texte); font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.deplie .avis-texte { display: block; }
.avis-suite { font: inherit; font-weight: 800; color: var(--marine); background: none; border: 0; padding: 8px 0 0; cursor: pointer; text-decoration: underline; }
.avis-source { color: var(--gris); font-size: .82rem; margin: 1.4em 0 0; }
.avis-source a { color: var(--gris); }

/* Appel final */
.appel { padding-top: 0; }
.appel-in { background: linear-gradient(135deg, var(--marine), #1846b8); color: #fff; border-radius: 32px; padding: clamp(28px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.appel h2 { color: #fff; margin-bottom: .3em; }
.appel p { margin: 0; opacity: .9; max-width: 52ch; }

/* Bandeau image */
.bandeau-image { text-align: center; padding-top: 0; }
.bandeau-image img { border-radius: 32px; margin: 0 auto 1em; width: 100%; max-width: 980px; box-shadow: var(--ombre); }
.bandeau-image p { font-family: var(--titres); font-size: 1.25rem; color: var(--marine); }

/* Parcours de Claire */
.frise { list-style: none; margin: 2em 0 0; padding: 0 0 0 34px; border-left: 4px solid var(--trait); max-width: 900px; }
.frise > li { position: relative; padding-bottom: 30px; }
.frise > li::before { content: ""; position: absolute; left: -47px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--rouge); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--rouge); }
.frise p { color: var(--gris); margin: 0; }
.frise-photo { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.frise-photo figure { margin: 0; }
.frise-photo img { border-radius: 20px; border: 6px solid #fff; box-shadow: var(--ombre); transform: rotate(2deg); }
.frise-photo figcaption { text-align: center; color: var(--gris); font-size: .88rem; margin-top: 10px; }

/* Paiement */
.offres { padding-top: 20px; }
.offres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; align-items: stretch; }
.offre { background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon); padding: 30px 26px; text-align: center; display: flex; flex-direction: column; }
.offre-vedette { border-color: var(--rouge); box-shadow: var(--ombre); }
.offre h2 { font-size: 1.4rem; }
.offre-prix { font-family: var(--titres); font-weight: 700; font-size: 3rem; color: var(--marine); margin: 0; line-height: 1.1; }
.offre-unite { color: var(--gris); font-weight: 700; }
.offre > p:not([class]) { flex: 1; }
.offre-indispo { color: var(--gris); font-size: .92rem; background: var(--ciel); padding: 12px; border-radius: 14px; margin: 0; }
.offres-note { color: var(--gris); font-size: .92rem; text-align: center; margin-top: 2em; }

/* Pages de texte */
.texte-legal h1 { font-size: 2.2rem; }
.texte-legal h2 { font-size: 1.3rem; margin-top: 1.6em; }
/* Texte justifié sur les pages légales et dans la fenêtre des conditions de vente, sans coupure des mots. */
.texte-legal p, .texte-legal li, .cgv-modale .cgv p, .cgv-modale .cgv li { text-align: justify; }

/* Pied de page */
.pied { background: var(--marine-fonce); color: #c9d6f5; padding: 54px 0 22px; font-size: .95rem; }
.pied .logo-a, .pied .logo-c { color: #fff; }
.pied .logo-b { color: #ff5a64; }
.pied-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.pied h2 { color: #fff; font-size: 1.05rem; margin-bottom: .8em; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied a { color: #c9d6f5; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied p { margin-top: 12px; max-width: 34ch; }
.pied-bas { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; }

@media (max-width: 820px) {
  .hero-in, .hero-court .hero-in, .intro-in, .conseil-in, .frise-photo { grid-template-columns: 1fr; }
  .hero-img { max-width: 520px; margin-inline: auto; }
  .hero-court .hero-img { display: none; }
  .intro-inverse .intro-img { order: 0; }
  .etapes-liste { grid-template-columns: 1fr; gap: 34px; }
  .lecteur-corps { grid-template-columns: 1fr; }
  .lecteur-img { display: none; }
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
  .pied-in { grid-template-columns: 1fr 1fr; }
  .frise-photo figure { max-width: 240px; }
  .bulle-1 { left: 4px; }
  .bulle-2 { right: 4px; }
}
@media (max-width: 560px) {
  /* Barre d'en-tête serrée : logo, personnage, Réserver et menu doivent tenir sur une ligne. */
  .conteneur.entete-in { width: calc(100% - 20px); gap: 8px; }
  .entete .logo { font-size: 1.55rem; }
  .entete-actions { gap: 8px; }
  .entete-actions .bouton { padding: 9px 13px; font-size: .92rem; }
  .menu-bouton { width: 41px; height: 41px; padding: 10px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .logo { font-size: 1.25rem; }
  .entete .logo { font-size: 1.35rem; }
  .hero-actions .bouton { width: 100%; }
  .pied-in { grid-template-columns: 1fr; }
  .mq-form .bouton-grand { width: 100%; }
}
@media (max-width: 400px) {
  /* Petits téléphones (375 px et moins) : à 1.35rem, le logo pousse le bouton du menu hors de l'écran. */
  .entete .logo { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Boutons flottants, panneau de questions, fenêtre de contact */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icone { flex: none; }
.flottants-droite { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 12px; }
.flottant { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); transition: transform .15s; }
.flottant:hover { transform: scale(1.08); color: #fff; }
.flottant .icone { width: 32px; height: 32px; }
.flottant-whatsapp { background: #25d366; }
.flottant-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* Même aspect que la bulle rouge « Ready? Let's go! » : forme, couleur, ombre et flottement. */
.faq-bouton { position: fixed; left: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; font-family: var(--titres); font-weight: 600; font-size: 17px; line-height: 1.6; color: #fff; background: var(--rouge); border: 0; border-radius: 20px 20px 4px 20px; padding: 10px 18px; cursor: pointer; box-shadow: var(--ombre); animation: flotter 4s ease-in-out infinite; }
.faq-bouton:hover { background: var(--rouge-fonce); }
/* La même enseignante que dans la fenêtre des questions (.faq-avatar), en petit rond. */
.faq-bouton { padding-left: 8px; }
.faq-bouton-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; flex: none; background: var(--ciel) url("../img/enseignante_souriante.jpg") 50% 30% / 330% auto no-repeat; }
.faq-panneau { position: fixed; left: 18px; bottom: 86px; z-index: 45; width: min(400px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 70px rgba(7, 28, 84, .35); padding: 0; }
.faq-tete { background: var(--marine); color: #fff; padding: 24px 56px 20px 26px; position: relative; }
.faq-tete h2 { color: #fff; font-size: 1.5rem; margin: 0 0 .2em; }
.faq-tete p { margin: 0; opacity: .8; font-size: .95rem; }
.faq-fermer, .contact-fermer { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .15); color: #fff; }
.faq-fermer:hover { background: rgba(255, 255, 255, .3); }
.faq-corps { padding: 18px 22px; overflow-y: auto; flex: 1; }
.faq-recherche { position: relative; margin-bottom: 14px; }
.faq-recherche > .icone { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; color: var(--gris); z-index: 1; pointer-events: none; }
.faq-recherche input[type=text] { background: var(--ciel); border-color: var(--ciel); padding-left: 44px; }
.faq-liste details { border: 2px solid var(--trait); border-radius: 16px; margin-bottom: 10px; }
.faq-liste summary { list-style: none; cursor: pointer; font-family: var(--titres); font-weight: 600; color: var(--marine); padding: 14px 44px 14px 16px; position: relative; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-liste details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-liste details[open] { border-color: var(--bleu); }
.faq-liste details p { margin: 0; padding: 0 16px 16px; color: var(--gris); font-size: .96rem; }
.faq-vide { color: var(--gris); text-align: center; padding: 10px 0; }
.faq-ecrire { background: var(--ciel); border-radius: 18px; padding: 16px; margin-top: 6px; }
.faq-ecrire h3 { text-align: center; margin-bottom: .7em; }
.faq-pied { background: var(--ciel); border-top: 1px solid var(--trait); padding: 12px 22px; display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--gris); }
.faq-rond { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #d9e3f5; color: var(--marine); transition: transform .15s; }
.faq-rond:hover { transform: scale(1.1); color: var(--marine); }
.faq-rond-wa, .faq-rond-wa:hover { background: #d3f5df; color: #128c3e; }

.msg-form .champ { margin-bottom: 10px; }
.msg-form .bouton { width: 100%; }
.msg-form textarea { min-height: 84px; }
.msg-erreur { background: #fdeaeb; color: #7d0810; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: .92rem; }
.msg-merci { background: #e6f7ee; color: #0a5c38; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: .95rem; margin: 12px 0 0; text-align: center; }

.contact-modale { border: 0; border-radius: 26px; padding: 30px 28px 26px; width: min(480px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(7, 28, 84, .4); color: var(--texte); }
.contact-modale h2:focus { outline: none; }
.contact-modale::backdrop { background: rgba(7, 28, 84, .55); }
.confirmer-modale { border: 0; border-radius: 26px; padding: 30px 28px 26px; width: min(480px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(7, 28, 84, .4); color: var(--texte); }
.confirmer-modale::backdrop { background: rgba(7, 28, 84, .55); }
.confirmer-modale h2 { font-size: 1.5rem; margin-bottom: .4em; }
.confirmer-modale p { line-height: 1.55; margin-bottom: 20px; }
.confirmer-modale .boutons-ligne { justify-content: flex-end; }
/* Facture du professeur : grande fenêtre, le PDF occupe toute la place sous la barre. */
.facture-modale { border: 0; border-radius: 22px; padding: 0; width: min(920px, calc(100vw - 24px)); height: min(92vh, 1200px); box-shadow: 0 30px 80px rgba(7, 28, 84, .4); overflow: hidden; }
.facture-modale[open] { display: flex; flex-direction: column; }
.facture-modale::backdrop { background: rgba(7, 28, 84, .55); }
.facture-barre { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 2px solid var(--trait); }
.facture-barre strong { font-family: var(--titres); color: var(--marine); font-size: 1.2rem; margin-right: auto; }
.facture-barre .bouton { padding: 8px 18px; font-size: .93rem; }
.facture-barre { flex-wrap: wrap; }
.facture-barre .bouton:disabled { opacity: .45; cursor: not-allowed; }
/* Coordonnées bancaires du professeur, pour faire le virement, et bandeaux Email / Réglé. */
.facture-virement { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 16px; background: var(--ciel); font-size: .92rem; }
.facture-virement-titre { font-family: var(--titres); font-weight: 600; color: var(--marine); }
.facture-coord { display: inline-flex; align-items: center; gap: 8px; }
.facture-coord b { letter-spacing: .3px; user-select: all; }
.facture-coord .lien-copier { padding: 4px 12px; font-size: .8rem; }
.facture-panneau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-top: 2px solid var(--trait); background: #fffbea; font-size: .95rem; }
.facture-panneau[hidden] { display: none; }
.facture-panneau span { margin-right: 4px; }
.facture-panneau .bouton { padding: 7px 16px; font-size: .9rem; }
.facture-confirmation { flex-basis: 100%; line-height: 1.5; }
.facture-confirmation p { margin: 0 0 4px; }
.facture-confirmation ul { margin: 0 0 6px; padding-left: 20px; }
.facture-alerte { color: var(--rouge); font-weight: 700; }
.facture-annuler { border: 0; background: none; color: var(--texte); text-decoration: underline; cursor: pointer; font: inherit; }
/* Factures du mois : une ligne par professeur (nom, cours, montant, lien vers sa facture PDF), puis le total. */
.factures-liste { list-style: none; margin: 0; padding: 6px 16px; max-height: 30vh; overflow-y: auto; border-bottom: 2px solid var(--trait); font-size: .92rem; }
.factures-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px 100px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.factures-liste li:last-child { border-bottom: 0; }
.factures-liste b { text-align: right; color: var(--marine); }
.factures-liste a { font-weight: 700; font-size: .88rem; text-align: right; }
.factures-nom { font-weight: 700; color: var(--marine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.factures-total { color: var(--marine); }
.factures-total b { font-size: 1.05rem; }
.facture-panneau .vide { flex-basis: 100%; font-size: .88rem; }
@media (max-width: 720px) { .factures-liste li { grid-template-columns: minmax(0, 1fr) auto; } .factures-liste li > span:not(.factures-nom) { display: none; } }
.facture-modale iframe { flex: 1; width: 100%; border: 0; background: #525659; }
.contact-modale h2 { font-size: 1.7rem; margin-bottom: .3em; padding-right: 44px; }
.contact-fermer { background: var(--ciel); color: var(--gris); }
.contact-fermer:hover { background: var(--trait); }
.contact-modale address { font-style: normal; color: var(--gris); line-height: 1.5; margin-bottom: 18px; }
.contact-ligne { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.contact-ligne .icone { width: 20px; height: 20px; color: var(--rouge); }
.contact-ligne a { color: var(--gris); text-decoration: none; }
.contact-ligne a:hover { color: var(--marine); text-decoration: underline; }

.pied { padding-bottom: 96px; }
@media (max-width: 480px) {
  .faq-bouton { left: 12px; bottom: 12px; font-size: .95rem; padding: 7px 15px 7px 7px; }
  .faq-panneau { left: 12px; bottom: 74px; }
  .flottants-droite { right: 12px; bottom: 12px; }
  .flottant { width: 52px; height: 52px; }
}

/* Fil d'Ariane, en haut du bandeau bleu ciel */
.fil { background: var(--ciel); padding-top: 14px; }
.fil-blanc { background: none; } /* pages sans bandeau bleu ciel en tête */
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-family: var(--titres); font-weight: 600; font-size: 1rem; }
.fil li { display: flex; align-items: center; }
.fil li + li::before { content: "›"; color: var(--gris); font-size: 1.3em; line-height: 1; margin: 0 10px; transform: translateY(-1px); }
.fil a { display: inline-flex; align-items: center; gap: 6px; color: var(--marine); text-decoration: none; }
.fil a:hover { text-decoration: underline; color: var(--marine); }
.fil .icone { width: 19px; height: 19px; }
.fil [aria-current] { color: var(--rouge); }
.fil + .texte-legal { padding-top: 36px; }

/* Fenêtre « Réserver » */
.reserver-modale { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.resa-intro { color: var(--gris); margin-bottom: 20px; }
.resa-form .bouton-grand { width: 100%; }
.resa-merci { text-align: center; padding: 10px 0; }
.resa-merci h3 { font-size: 1.7rem; }

/* Panneau de questions, aux couleurs du site : bulle rouge reliée au bouton, cartes en relief comme les réponses des quiz */
.faq-panneau { border-radius: 26px 26px 26px 6px; border: 3px solid var(--rouge); box-shadow: 0 24px 60px rgba(7, 28, 84, .30); animation: faq-ouvre .22s ease-out; transform-origin: bottom left; }
@keyframes faq-ouvre { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.faq-tete { background: var(--rouge); display: flex; align-items: center; gap: 14px; padding: 18px 58px 18px 20px; }
/* Portrait de l'enseignante, cadré sur le visage. */
.faq-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; flex: none; background: var(--ciel) url("../img/enseignante_souriante.jpg") 50% 30% / 330% auto no-repeat; }
.faq-hello { display: inline-block; font-family: var(--titres); font-weight: 600; font-size: .8rem !important; background: #fff; color: var(--rouge); padding: 1px 10px; border-radius: 10px 10px 10px 2px; opacity: 1 !important; margin-bottom: 4px !important; }
.faq-tete h2 { font-size: 1.45rem; line-height: 1.1; }
.faq-tete p { opacity: .92; font-size: .9rem; line-height: 1.35; }
.faq-fermer { background: rgba(255, 255, 255, .22); }
.faq-fermer:hover { background: #fff; color: var(--rouge); }
.faq-corps { background: var(--ciel-2); padding: 16px 18px; }
.faq-recherche input[type=text] { background: #fff; border-color: var(--trait); border-radius: 99px; }
.faq-liste details { background: #fff; border: 2px solid var(--trait); border-radius: 16px; box-shadow: 0 4px 0 var(--trait); margin-bottom: 14px; transition: transform .12s, border-color .12s; }
.faq-liste details:not([open]):hover { transform: translateY(-2px); border-color: var(--bleu); }
.faq-liste details[open] { border-color: var(--marine); box-shadow: 0 4px 0 var(--marine); }
.faq-liste details[open] summary { color: var(--rouge); }
.faq-liste summary::after { border-color: var(--rouge); border-width: 0 3px 3px 0; }
.faq-liste details p { color: var(--texte); }
.faq-ecrire { background: #fff; border: 2px solid var(--trait); }
.faq-pied { background: #fff; border-top: 2px solid var(--trait); font-family: var(--titres); font-weight: 600; color: var(--marine); }
/* Ronds parfaits : aucune ombre intérieure ni décalée, seulement une ombre grise douce et régulière tout autour. */
.faq-rond { background: var(--marine); color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(60, 70, 90, .28); transition: background .15s; }
.faq-rond * { cursor: pointer; }
.faq-rond:hover { color: #fff; transform: none; background: #2a55c4; } /* le bleu s'éclaircit au survol */
.faq-rond-wa { background: #25d366; color: #fff; }
.faq-rond-wa:hover { background: #4be083; color: #fff; }

/* Connexion, espace client et gestion */
.page-compte { padding-top: 34px; }
.carte { background: #fff; border: 2px solid var(--trait); border-radius: var(--rayon); padding: clamp(20px, 3vw, 32px); box-shadow: var(--ombre); margin-bottom: 26px; }
.carte h2 { font-size: 1.45rem; }
.carte-etroite { max-width: 480px; margin-inline: auto; }
.carte-etroite .bouton { width: 100%; }
.liens-compte { text-align: center; margin: 16px 0 0; font-weight: 700; }
.alerte { padding: 12px 16px; border-radius: 14px; font-weight: 700; margin-bottom: 18px; }
.alerte-ok { background: #e6f7ee; color: #0a5c38; }
.alerte-ko { background: #fdeaeb; color: #7d0810; }
.alerte-info { background: #fff6dc; color: #6b4a00; }
.espace-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.espace-tete h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0; }
.espace-tete form { margin: 0; }
.espace-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.espace-grille > * { min-width: 0; } /* une longue adresse email ne doit pas élargir la colonne */
.tableau-simple { min-width: 0; border: 2px solid var(--trait); border-radius: 16px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.tableau-simple th, .tableau-simple td { padding: 11px 14px; }
.tableau-simple thead th { font-size: .9rem; }
.tableau-simple tbody th { font-family: inherit; color: var(--texte); font-size: 1rem; white-space: normal; font-weight: 700; }
/* Sur téléphone, tableaux plus serrés pour tenir dans la largeur de l'écran. */
@media (max-width: 480px) { .tableau-simple { width: 100%; font-size: .88rem; } .tableau-simple th, .tableau-simple td { padding: 9px 7px; } .tableau-simple thead th { font-size: .8rem; } .tableau-simple tbody th { font-size: .9rem; } }
.note { font-family: var(--titres); font-weight: 600; color: var(--marine); white-space: nowrap; }
.note small { display: inline-block; background: var(--jaune); border-radius: 99px; padding: 0 9px; margin-left: 6px; color: var(--marine-fonce); }
.vide { color: var(--gris); }
/* « echanges » et non « fil » : ce dernier nom est déjà celui du fil d'Ariane. */
.echanges { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; padding: 4px 6px 4px 0; margin-bottom: 18px; }
.fil-msg { max-width: 86%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--ciel); align-self: flex-start; }
.fil-msg.moi { align-self: flex-end; background: var(--marine); color: #fff; border-radius: 18px 18px 4px 18px; }
.fil-meta { display: block; font-size: .78rem; font-weight: 800; opacity: .75; margin-bottom: 4px; }
.fil-msg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.gestion-recherche { max-width: 420px; margin-bottom: 18px; }
/* Planning de la gestion */
.planning-barre { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
/* Période à gauche, les deux filtres côte à côte à droite, sur la même ligne (en semaine comme en mois). */
/* La semaine (titre et flèches) garde toujours sa place sur une ligne ; les filtres, compacts, rétrécissent. */
.planning-periode { flex: none; }
.planning-filtres { flex: 0 1 auto; min-width: 0; }
@media (max-width: 900px) { .planning-barre { flex-wrap: wrap; } .planning-periode { flex: 1 1 100%; min-width: 0; } .planning-filtres { flex: 1 1 100%; } }
.planning-periode { display: flex; flex-direction: column; gap: 10px; }
/* Semaine / Mois : deux pastilles accolées, celle affichée en bleu marine. */
.planning-vues { display: inline-flex; align-self: flex-start; background: var(--ciel); border: 2px solid var(--trait); border-radius: 99px; padding: 3px; }
.planning-vues a { font-family: var(--titres); font-weight: 600; font-size: .93rem; color: var(--marine); text-decoration: none; padding: 6px 18px; border-radius: 99px; }
.planning-vues a[aria-current] { background: var(--marine); color: #fff; }
/* Semaine / Mois et le bouton « Ajouter un cours », sur une ligne. */
.planning-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bouton-ajout-cours { padding: 8px 18px; font-size: .93rem; }
/* Fenêtre « Ajouter un cours » : plus large que les fenêtres de confirmation. */
.creer-cours-modale { width: min(860px, calc(100vw - 24px)); }
.creer-cours-modale .champ { margin-bottom: 12px; min-width: 0; }
.creer-cours-modale input, .creer-cours-modale select { min-width: 0; max-width: 100%; }
.creer-cours-modale .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
/* Date / Heure / Durée : la date (« Ven 16/10/2026 ») et les deux listes de l'heure ont besoin de place, la durée peu. */
.creer-cours-modale .grille-paiement { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.creer-cours-modale .grille-quand { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.35fr) minmax(0, .8fr); }
.date-bouton span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creer-cours-modale .grille-tarif { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .66fr) minmax(0, .8fr) minmax(0, 1.04fr); gap: 0 12px; }
.creer-cours-modale .champ-autre { margin-top: 8px; }
/* Date : bouton à l'allure d'un champ, qui ouvre le calendrier ; heure en deux listes (heures, minutes). */
.date-bouton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: inherit; color: var(--gris); background: #fff; border: 2px solid var(--trait); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; }
.date-bouton.rempli { color: var(--texte); font-weight: 600; }
.date-bouton svg { color: var(--marine); flex: none; }
.date-bouton:focus-visible, .date-bouton[aria-expanded="true"] { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(47, 125, 246, .18); }
.en-erreur .date-bouton { border-color: var(--rouge); }
/* Calendrier : fenêtre flottante sous le champ Date, par-dessus le contenu (rien ne se décale). Grandes cases,
   faciles à toucher sur téléphone. */
.champ-date { position: relative; }
.calendrier { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 340px; max-width: calc(100vw - 48px); border: 2px solid var(--trait); border-radius: 16px; padding: 12px; background: #fff; box-shadow: 0 18px 50px rgba(7, 28, 84, .25); }
.calendrier[hidden] { display: none; }
.calendrier-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendrier-tete strong { font-family: var(--titres); color: var(--marine); font-size: 1.1rem; text-transform: capitalize; }
.calendrier-tete button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--ciel); color: var(--marine); font-size: 1.4rem; cursor: pointer; }
.calendrier-jours, .calendrier-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.calendrier-jours span { font-size: .8rem; font-weight: 700; color: var(--gris); padding: 4px 0; }
.calendrier-grille button { min-height: 42px; border: 0; border-radius: 12px; background: none; font: inherit; font-weight: 600; color: var(--texte); cursor: pointer; }
.calendrier-grille button:hover { background: var(--ciel); }
.calendrier-grille button.aujourdhui { box-shadow: inset 0 0 0 2px var(--bleu); }
.calendrier-grille button.choisi { background: var(--marine); color: #fff; }
.heure-choix { display: flex; align-items: center; gap: 6px; }
.heure-choix select { flex: 1 1 0; min-width: 0; padding: 12px 24px 12px 10px; background-position: right 7px center; background-size: 13px; }
.heure-choix span { font-weight: 700; color: var(--marine); }
.creer-cours-aide { font-size: .9rem; margin: -2px 0 12px; }
@media (max-width: 560px) { .creer-cours-modale .grille-quand .champ:first-child { grid-column: 1 / -1; } .calendrier { width: 100%; max-width: none; } .creer-cours-modale .grille-3, .creer-cours-modale .grille-quand, .creer-cours-modale .grille-tarif { grid-template-columns: 1fr 1fr; } .creer-cours-modale .grille-tarif > .champ:first-child { grid-column: 1 / -1; } }
.planning-semaine { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.planning-semaine .bouton { padding: 6px 16px; font-size: 1.2rem; line-height: 1; }
.planning-semaine strong { font-family: var(--titres); color: var(--marine); font-size: 1.1rem; white-space: nowrap; }
.planning-aujourdhui { font-weight: 700; font-size: .93rem; }
.planning-filtres { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
/* Bouton Facture : carré, à la hauteur des listes, juste après celle des professeurs. */
.bouton-facture { flex: none; display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 2px solid var(--trait); border-radius: 12px; background: #fff; color: var(--marine); cursor: pointer; transition: background .15s, border-color .15s; }
.bouton-facture { position: relative; }
.bouton-facture-nb { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--rouge); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
.bouton-facture:hover:not(:disabled) { background: var(--ciel); border-color: var(--bleu); }
/* Mois entièrement réglé : bouton rouge pour annuler les règlements. */
.bouton-facture-annuler { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton-facture-annuler:hover:not(:disabled) { background: #b8000e; border-color: #b8000e; color: #fff; }
.bouton-facture:disabled { opacity: .4; cursor: not-allowed; }
.planning-filtres .champ { margin: 0; flex: 0 1 135px; min-width: 90px; }
.planning-filtres .champ:last-of-type { flex-basis: 115px; }
.planning-filtres .planning-eleve { flex-basis: 175px; }
.planning-filtres .champ input[type=text], .planning-filtres .champ select { padding: 7px 30px 7px 11px; font-size: .9rem; border-radius: 12px; background-position: right 9px center; background-size: 13px; }
.planning-filtres .champ input[type=text] { padding-right: 28px; }
.planning-filtres .croix { width: 22px; height: 22px; top: 50%; transform: translateY(-50%); right: 5px; font-size: 1.05rem; }
.planning-filtres label { font-size: .85rem; }
@media (max-width: 900px) { .planning-filtres .champ, .planning-filtres .champ:last-of-type { flex: 1 1 0; } }
/* Filtre « Élève » : liste des élèves proposés pendant la frappe, sous le champ. */
.planning-eleve { position: relative; }
.eleve-suggestions { position: absolute; z-index: 20; left: 0; width: max-content; min-width: 100%; max-width: min(340px, 90vw); top: calc(100% + 4px); list-style: none; margin: 0; padding: 6px; background: var(--blanc); border: 2px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); max-height: 280px; overflow-y: auto; }
.eleve-suggestions li { padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px; cursor: pointer; }
.eleve-suggestions li.actif, .eleve-suggestions li:hover { background: var(--ciel); color: var(--marine); }
.eleve-suggestions li.vide { cursor: default; background: none; }
.planning-totaux { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; background: var(--ciel); border-radius: 14px; margin-bottom: 8px; font-size: .95rem; }
.planning-totaux b { color: var(--marine); }
.planning-bloc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.planning-bloc + .planning-bloc { padding-left: 22px; border-left: 2px solid var(--trait); }
.planning-bloc em { font-style: normal; font-family: var(--titres); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.planning-totaux .planning-apayer b { color: var(--rouge); }
.planning-legende { font-size: .82rem; margin: 0 0 6px; }
@media (max-width: 720px) { .planning-bloc + .planning-bloc { padding-left: 0; border-left: 0; } }
.planning-jour { font-size: 1.15rem; margin: 22px 0 8px; }
.planning-jour span { font-size: .8rem; background: var(--rouge); color: #fff; border-radius: 99px; padding: 2px 10px; vertical-align: middle; margin-left: 6px; }
.planning-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.planning-cours { display: grid; grid-template-columns: 74px minmax(0, 1fr) 190px 210px; gap: 6px 16px; align-items: start; padding: 12px 16px; background: #fff; border: 2px solid var(--trait); border-left: 6px solid var(--bleu); border-radius: 14px; }
.planning-heure { font-family: var(--titres); font-weight: 700; color: var(--marine); font-size: 1.1rem; display: flex; flex-direction: column; }
.planning-heure small, .planning-statut small { font-family: inherit; font-weight: 600; font-size: .8rem; color: var(--gris); }
.planning-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planning-qui > a { font-weight: 800; color: var(--marine); text-decoration: none; }
.planning-qui a:hover { text-decoration: underline; }
.planning-qui > span { font-size: .93rem; color: var(--gris); }
.planning-qui .planning-note { font-style: italic; }
/* Demande de report de l'élève, sous le cours, avec le bouton pour l'accepter. */
/* Fenêtre Modifier : « Supprimer ce cours », à gauche des autres boutons, en rouge discret. */
/* Planning : « Modifier » puis « Effacer » sur la même ligne ; Effacer en texte rouge sur fond rose. */
.planning-boutons { display: flex; flex-wrap: wrap; gap: 0 6px; }
.bouton-effacer { margin-top: 6px; font-family: var(--titres); font-weight: 600; font-size: .8rem; color: var(--rouge); background: #fde8ea; border: 2px solid #f6b8bf; border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.bouton-effacer:hover:not(:disabled) { background: #fbd3d7; border-color: var(--rouge); }
.bouton-effacer:disabled { opacity: .45; cursor: not-allowed; }
/* Fenêtre « Effacer » : le choix (ce cours ou toute la réservation), puis qui prévenir. */
.effacer-choix { margin: 6px 0 14px; display: grid; gap: 4px; }
.effacer-qui { margin: 0 0 4px; font-weight: 700; color: var(--marine); }
.planning-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fff6dd; color: #8a6200; font-size: .9rem; }
.planning-report b { color: #8a6200; }
.bouton-accepter-report { font: inherit; font-weight: 700; font-size: .85rem; color: #fff; background: #1a8a4c; border: 0; border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.bouton-accepter-report:hover { background: #157a42; }
.planning-qui .planning-note b { font-style: normal; color: var(--marine); margin-right: 4px; }
/* Choix du professeur d'un cours, dans le planning. */
.planning-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0; }
.planning-prof label { font-size: .93rem; color: var(--gris); }
.planning-prof select { font: inherit; font-size: .93rem; color: var(--texte); max-width: 260px; padding: 5px 34px 5px 12px; border: 2px solid var(--trait); border-radius: 12px; cursor: pointer; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b2a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; }
.planning-prof select:focus { outline: none; border-color: var(--bleu); }
.planning-prof select:disabled { cursor: default; background-color: var(--ciel-2); }
.planning-erreur { margin: 6px 0 0; padding: 6px 10px; font-size: .88rem; }
/* Professeur d'un cours : liste, statut (affecté, envoyé, modifié, confirmé) et bouton Envoyer sur une ligne. */
.planning-prof-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0; }
.planning-prof-ligne .planning-prof { margin: 0; }
.statut-prof { font-weight: 700; font-size: .88rem; }
.statut-prof-affecte { color: #6b7488; }
.statut-prof-envoye { color: var(--bleu); }
.statut-prof-modifie { color: var(--rouge); }
.statut-prof-confirme { color: #1a8a4c; }
.statut-prof-demande { color: #8a5cd6; }
.statut-prof-disponible { color: #11847d; }
.statut-prof-indisponible { color: var(--rouge); }
/* La liste du professeur prend la couleur de son statut : cadre et nom sélectionné. */
.planning-prof select.prof-affecte { border-color: #6b7488; color: #6b7488; }
.planning-prof select.prof-demande { border-color: #8a5cd6; color: #8a5cd6; }
.planning-prof select.prof-disponible { border-color: #11847d; color: #11847d; }
.planning-prof select.prof-indisponible, .planning-prof select.prof-modifie { border-color: var(--rouge); color: var(--rouge); }
.planning-prof select.prof-envoye { border-color: var(--bleu); color: var(--bleu); }
.planning-prof select.prof-confirme { border-color: #1a8a4c; color: #1a8a4c; }
.planning-prof select[class*="prof-"] { font-weight: 700; }
.planning-prof select option { color: var(--texte); font-weight: 400; }
/* Cours supprimé ou annulé : la liste est figée et grisée, quel que soit le statut du professeur. */
.planning-prof select.prof-bloque { color: #9aa3b5; border-color: #dfe3ea; background-color: #f1f3f6; font-weight: 400; cursor: not-allowed; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa3b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.dispo-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bouton-vert { background: #1a8a4c; border-color: #1a8a4c; color: #fff; box-shadow: 0 4px 0 #136b3a; }
.bouton-vert:hover { background: #157a42; color: #fff; }
.bouton-discret { opacity: .55; }
.bouton-dispo { background: #8a5cd6; } .bouton-dispo:hover { background: #7446c4; }
/* Page de réponse du professeur (lien « Je suis disponible ») */
.dispo-liste { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.dispo-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ciel); border-radius: 12px; }
.dispo-liste span { color: var(--gris); font-size: .93rem; }
.planning-envoi { margin: 0; }
.bouton-envoi { font-family: var(--titres); font-weight: 600; font-size: .85rem; color: #fff; background: var(--marine); border: 0; border-radius: 99px; padding: 6px 16px; cursor: pointer; transition: background .15s; }
.bouton-envoi:hover { background: var(--marine-fonce); }
.bouton-envoi:disabled { background: #d5dbe7; color: #8a93a6; cursor: not-allowed; }
.planning-statut { font-weight: 700; font-size: .93rem; display: flex; flex-direction: column; align-items: flex-start; }
.bouton-modifier { margin-top: 6px; font-family: var(--titres); font-weight: 600; font-size: .8rem; color: var(--marine); background: var(--ciel); border: 2px solid var(--trait); border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.bouton-modifier:hover { border-color: var(--bleu); }
.case-envoi { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 600; cursor: pointer; }
.case-envoi input { width: 18px; height: 18px; accent-color: var(--marine); }
.case-envoi:has(input:disabled) { color: var(--gris); cursor: default; }
.eleve-modif { font-size: .85rem; font-weight: 700; color: #b07d00; }
.eleve-modif-ok { color: #1a8a4c; }
#modifier-cours { width: min(560px, calc(100vw - 24px)); }
#modifier-cours .champ input { width: 100%; }
.planning-argent { display: flex; flex-direction: column; font-size: .9rem; color: var(--gris); text-align: right; }
.planning-paye { color: #1a8a4c; font-weight: 700; }
.planning-hors { color: #9aa3b5; font-style: italic; }
/* Pastille transparente « à régler » / « réglé » : un clic bascule le règlement du professeur. */
.prof-regle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.prof-regle form { display: inline; margin: 0; }
.pastille-regle { font: inherit; font-weight: 700; background: transparent; border: 1.5px solid currentColor; border-radius: 99px; padding: 0 9px; line-height: 1.5; cursor: pointer; }
.pastille-regle:hover { background: rgba(0, 0, 0, .05); }
.pastille-regle:disabled { opacity: .5; cursor: progress; }
.planning-argent em { font-style: normal; }
.planning-apayer { color: var(--rouge); font-weight: 700; }
/* Couleur de l'état du cours : bordure gauche et libellé (voir ETATS_COURS dans inc/cours.php). */
.etat-attente { border-left-color: #9aa3b5; } .etat-attente .planning-statut { color: #6b7488; }
.etat-prevu { border-left-color: var(--bleu); } .etat-prevu .planning-statut { color: var(--bleu); }
.etat-effectue { border-left-color: #1a8a4c; } .etat-effectue .planning-statut { color: #1a8a4c; }
.etat-annule { border-left-color: var(--rouge); } .etat-annule .planning-statut { color: var(--rouge); }
.etat-supprime { border-left-color: #f2a3b9; } .etat-supprime .planning-statut { color: #e0608a; }
.etat-a_reporter { border-left-color: #e0a100; } .etat-a_reporter .planning-statut { color: #b07d00; }
@media (max-width: 720px) {
  .planning-cours { grid-template-columns: 62px minmax(0, 1fr); }
  /* Sur téléphone, le titre de la semaine au-dessus, les deux flèches côte à côte en dessous. */
  .planning-semaine { flex-wrap: wrap; }
  .planning-semaine strong { order: -1; flex-basis: 100%; white-space: normal; }
  .planning-filtres { flex-wrap: wrap; }
  .planning-filtres .champ, .planning-filtres .champ:last-of-type { min-width: 0; flex: 1 1 120px; }
  .planning-filtres .planning-eleve { flex-basis: 100%; }
  .planning-statut, .planning-argent { grid-column: 2; text-align: left; }
}
/* Paramètres, formules : une ligne par formule sur ordinateur, une carte par formule sur téléphone. */
.formules-tete, .formule-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(110px, 1fr) minmax(130px, 1.2fr) .7fr .9fr .6fr; gap: 10px; align-items: center; }
.formules-tete { font-family: var(--titres); font-weight: 600; font-size: .85rem; color: var(--gris); margin: 18px 0 6px; }
.formule-ligne { padding: 8px 0; border-top: 1px solid var(--trait); }
.formule-ligne .champ { margin: 0; }
.formule-ligne .champ label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formule-nouvelle input[type=text] { background: var(--ciel-2); }
.formule-heure { margin: 0; color: var(--gris); font-weight: 700; }
.formule-case { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; }
.formule-case span { display: none; }
@media (max-width: 720px) {
  .formules-tete { display: none; }
  .formule-ligne { grid-template-columns: 1fr 1fr; padding: 14px 0; }
  .formule-ligne .champ:first-of-type { grid-column: 1 / -1; }
  .formule-ligne .champ label { position: static; width: auto; height: auto; clip-path: none; }
  .formule-case span { display: inline; }
}
.gestion-recherche [data-aucun-client] { margin: 8px 0 0; }
.gestion-sous-titre { font-size: .9rem; margin: -6px 0 10px; }
.gestion-sous-titre:empty { display: none; }
.gestion-liste { list-style: none; margin: 0; padding: 0; }
.gestion-liste a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 13px 16px; border: 2px solid var(--trait); border-radius: 14px; margin-bottom: 10px; text-decoration: none; color: var(--texte); background: #fff; }
.gestion-liste a:hover { border-color: var(--bleu); color: var(--texte); }
.gestion-liste strong { color: var(--marine); font-family: var(--titres); font-weight: 600; }
.gestion-liste .extrait { flex: 1 1 100%; color: var(--gris); font-size: .93rem; }
.pastille-nb { background: var(--rouge); color: #fff; font-weight: 800; font-size: .8rem; border-radius: 99px; padding: 2px 10px; }
.fiche { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
.fiche dt { color: var(--gris); font-weight: 700; }
.fiche dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .espace-grille { grid-template-columns: minmax(0, 1fr); } }

/* Page « Bientôt en ligne » affichée tant que le site est protégé par un mot de passe d'accès */
.page-acces { background: linear-gradient(180deg, var(--ciel), var(--ciel-2)); min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.page-acces main { width: 100%; }
.page-acces h1 { font-size: 1.9rem; text-align: center; margin-top: .4em; }
.page-acces .vide { text-align: center; }

/* Œil des champs mot de passe : à droite du champ, la croix d'effacement se décale à sa gauche */
.oeil { position: absolute; right: 8px; top: 9px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--gris); cursor: pointer; display: grid; place-items: center; padding: 0; }
.oeil:hover { background: var(--ciel); color: var(--marine); }
.oeil[aria-pressed=true] { color: var(--marine); }
.champ-zone.avec-oeil .croix { right: 44px; }
.champ .champ-zone.avec-oeil input { padding-right: 82px; }

/* Coche de lecture après l'heure d'un message : verte quand il a été lu, rouge sinon */
.fil-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; }
.fil-meta, .fil-msg.moi .fil-meta { opacity: 1; }
.fil-msg .fil-meta { color: rgba(27, 37, 64, .72); }
.fil-msg.moi .fil-meta { color: rgba(255, 255, 255, .8); }
.coche { display: inline-flex; }
.coche-lue { color: var(--vert); }
.coche-non-lue { color: var(--rouge); }
/* Sur les bulles bleu marine, des teintes plus claires pour rester lisibles */
.fil-msg.moi .coche-lue { color: #5fe39b; }
.fil-msg.moi .coche-non-lue { color: #ff7a82; }

/* Espace client : volets « Modifier mes coordonnées » et « Changer mon mot de passe », fermés par défaut */
.volets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.volet summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--titres); font-weight: 600; font-size: .98rem; color: var(--marine); background: rgba(47, 125, 246, .10); border: 2px solid rgba(47, 125, 246, .28); border-radius: 99px; padding: 8px 18px; transition: background .15s, border-color .15s; }
.volet summary::-webkit-details-marker { display: none; }
/* Lien présenté comme une pastille de volet (fiche client, « Demander un paiement »). */
.volet-lien { display: inline-flex; align-items: center; font-family: var(--titres); font-weight: 600; font-size: .98rem; color: var(--marine); text-decoration: none; background: rgba(47, 125, 246, .10); border: 2px solid rgba(47, 125, 246, .28); border-radius: 99px; padding: 8px 18px; transition: background .15s, border-color .15s; }
.volet-lien:hover { background: rgba(47, 125, 246, .18); border-color: var(--bleu); color: var(--marine); }
/* Croix d'un paiement saisi à la main, dans le tableau des paiements de la fiche client. */
/* Champ de nombre avec flèches (heures payées) : le champ, puis deux petits boutons empilés. */
.champ-pas { display: flex; align-items: stretch; gap: 6px; }
.champ-pas .champ-zone, .champ-pas > input { flex: 1; min-width: 0; }
.pas-boutons { display: flex; flex-direction: column; gap: 4px; }
.pas-boutons button { flex: 1; width: 40px; border: 2px solid var(--trait); border-radius: 10px; background: #fff; color: var(--marine); font-size: .7rem; line-height: 1; cursor: pointer; padding: 0; }
.pas-boutons button:hover { background: var(--ciel); border-color: var(--bleu); }
/* Écran Factures : une ligne par facture conservée (libellé, date du règlement, liens), le récapitulatif en premier. */
.factures-mois-titre { font-size: 1.1rem; margin: 22px 0 8px; text-transform: none; }
.factures-conservees { list-style: none; margin: 0; padding: 0; border: 2px solid var(--trait); border-radius: 14px; }
.factures-conservees li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.factures-conservees li:last-child { border-bottom: 0; }
.factures-conservees li.recap { background: var(--ciel); }
.factures-conservees .factures-nom { white-space: normal; }
.factures-liens { display: flex; gap: 14px; font-weight: 700; font-size: .92rem; }
@media (max-width: 560px) { .factures-conservees li { grid-template-columns: minmax(0, 1fr) auto; } .factures-conservees li > .vide { grid-row: 2; } }
.paiement-supprimer { margin-left: 8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fde8ea; color: var(--rouge); font-size: 1rem; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0 0 2px; }
.paiement-supprimer:hover { background: var(--rouge); color: #fff; }
.volet-lien-rose { font: inherit; font-family: var(--titres); font-weight: 600; font-size: .98rem; color: var(--rouge); background: #fde8ea; border-color: #f6b8bf; cursor: pointer; }
.volet-lien-rose:hover { background: #fbd3d7; border-color: var(--rouge); color: var(--rouge); }
.lp-etat { margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--marine); }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.volet summary:hover { background: rgba(47, 125, 246, .18); border-color: var(--bleu); }
.volet[open] { flex: 1 1 100%; order: 2; }
.volet[open] summary { background: var(--marine); border-color: var(--marine); color: #fff; }
.volet[open] summary::after { content: "×"; font-size: 1.25em; line-height: 1; }
.volet form { margin-top: 16px; padding: 18px; background: var(--ciel-2); border: 2px solid var(--trait); border-radius: 18px; }

/* Gestion : boutons « Mon compte » et « Quitter » côte à côte */
.gestion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Après l'envoi d'une question ou d'un message : le formulaire disparaît, seul le cadre vert de confirmation reste */
.msg-form.envoye > *:not(.msg-merci) { display: none; }
.msg-form.envoye .msg-merci { margin: 0; padding: 18px 16px; border-radius: 16px; font-size: 1rem; }
.faq-ecrire.envoye { background: none; border: 0; padding: 0; }
.faq-ecrire.envoye h3 { display: none; }

/* Avis sans note (recommandations Superprof) : une pastille à la place des étoiles */
.avis-carte figcaption .avis-recommande { margin-left: auto; white-space: nowrap; font-weight: 800; font-size: .8rem; color: var(--rouge); background: #fdeaeb; padding: 3px 11px; border-radius: 99px; }

/* Page de paiement */
.carte-paiement { max-width: 760px; margin-inline: auto; }
.carte-paiement h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.carte-paiement h2 { font-size: 1.25rem; margin: 26px 0 12px; }
.champ-offres { border: 0; padding: 0; margin: 18px 0 0; }
.champ-offres legend { font-family: var(--titres); font-weight: 600; font-size: 1.25rem; color: var(--marine); padding: 0; margin-bottom: 12px; }
/* Quatre cartes sur une ligne sur ordinateur, deux par deux sur téléphone. */
.offres-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 12px; }
.offre-choix { cursor: pointer; position: relative; }
.offre-choix input { position: absolute; opacity: 0; }
.offre-choix > span { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; text-align: center; padding: 18px 12px; background: #fff; border: 2px solid var(--trait); border-radius: 18px; box-shadow: 0 4px 0 var(--trait); transition: transform .12s, border-color .12s, background .12s; }
.offre-choix:hover > span { border-color: var(--bleu); transform: translateY(-2px); }
.offre-choix strong { font-family: var(--titres); font-weight: 600; color: var(--marine); white-space: nowrap; }
.offre-choix small { white-space: nowrap; }
.offre-choix b { font-family: var(--titres); font-weight: 700; font-size: 1.8rem; line-height: 1.1; color: var(--marine); }
.offre-choix small { color: var(--gris); font-weight: 700; }
.offre-choix input:checked + span { border-color: var(--rouge); box-shadow: 0 4px 0 var(--rouge-fonce); background: #fff6f6; }
.offre-choix input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 3px; }
.recap-paiement { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ciel); border-radius: 22px; padding: 18px; margin: 18px 0; color: var(--marine); font-weight: 700; }
.recap-paiement strong { font-family: var(--titres); font-size: 2.6rem; line-height: 1.1; }
.merci-coche { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; background: #e6f7ee; color: var(--vert); font-size: 2.6rem; font-weight: 800; display: grid; place-items: center; }
.total-heures { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.total-heures div { flex: 1 1 130px; background: var(--ciel); border-radius: 16px; padding: 12px 14px; text-align: center; color: var(--marine); font-weight: 700; font-size: .92rem; }
.total-heures strong { display: block; font-family: var(--titres); font-size: 1.7rem; line-height: 1.15; }
.total-rouge div { color: var(--rouge); background: #fdecec; }
.total-vert div { background: #e6f6ec; color: #17763f; }
.solde-titre { font-size: 1.1rem; margin: 4px 0 10px; }
/* Fiche client de la gestion : liste des cours qui défile, le prochain cours mis en avant. */
.cours-client { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; border: 2px solid var(--trait); border-radius: 16px; position: relative; }
/* Deux lignes par cours, même police et même taille partout : date, heure et durée puis prix sur la première,
   professeur puis statut sur la seconde. Le statut reprend la couleur du planning (classes etat-… sur la ligne,
   planning-statut sur le statut). */
.cours-client li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "date report prix" "qui report statut";
  gap: 2px 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--trait); border-left-width: 5px; border-left-style: solid;
  font-size: .93rem; line-height: 1.45; }
.cours-client li:last-child { border-bottom: 0; }
.cours-client .cc-date { grid-area: date; font-weight: 700; color: var(--marine); }
.cours-client .cc-prix { grid-area: prix; text-align: right; font-weight: 700; color: var(--texte); white-space: nowrap; }
.cours-client .cc-qui { grid-area: qui; color: var(--texte); }
.cours-client .planning-statut { grid-area: statut; display: block; text-align: right; font-size: inherit; font-weight: 700; white-space: nowrap; }
/* Espace de l'élève : icône pour demander le report d'un cours, entre la date et le prix. */
.cours-client .cc-report { grid-area: report; align-self: center; width: 34px; height: 34px; margin: 0 8px; display: grid; place-items: center; border: 2px solid var(--trait); border-radius: 12px; background: #fff; color: var(--marine); cursor: pointer; }
.cours-client .cc-report:hover { background: var(--ciel); border-color: var(--bleu); }
@media (max-width: 480px) {
  /* Sur téléphone : la date et l'icône de report, puis le professeur, puis le statut (à gauche) et le prix. */
  .cours-client li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date report" "qui report" "prix prix" "statut statut"; }
  .cours-client li .planning-statut, .cours-client li .cc-prix { text-align: left; }
  .cours-client .cc-report { margin: 0 0 0 8px; }
}
/* Légende de l'icône de report, sous la liste des cours de l'espace. */
.cc-legende { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: .9rem; color: var(--gris); }
.cc-legende .cc-report-legende { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--trait); border-radius: 10px; color: var(--marine); }
.calendrier-grille button:disabled { color: #c4cad6; cursor: default; background: none; }
.cours-client .cc-report-demande { grid-column: 1 / -1; margin-top: 8px; }
.cours-client .cc-note { grid-column: 1 / -1; font-style: italic; color: var(--texte); margin-top: 2px; }
.cours-client .cc-prix em { font-style: normal; margin-left: 6px; }
.cours-client .cours-passe { background: #fafbfd; }
.cours-client .cours-prochain { background: var(--ciel); }

.lien-genere { display: flex; align-items: center; gap: 12px; background: var(--ciel); border-radius: 12px; padding: 8px 8px 8px 12px; font-size: .9rem; margin: 10px 0 0; }
.lien-genere span { flex: 1; min-width: 0; word-break: break-all; user-select: all; }
.lien-copier { flex: none; font-family: var(--titres); font-weight: 600; font-size: .9rem; color: #fff; background: var(--marine); border: 0; border-radius: 99px; padding: 7px 16px; cursor: pointer; transition: background .15s; }
.lien-copier:hover { background: var(--marine-fonce); }
.lien-copier.copie { background: #1a8a4c; }

/* Conditions de vente : fenêtre centrée et page */
/* Petite fenêtre : une vingtaine de lignes visibles, le reste se lit en faisant défiler. */
.cgv-modale { width: min(560px, calc(100vw - 24px)); max-height: min(600px, calc(100vh - 32px)); padding: 0; overflow: hidden; }
.cgv-modale[open] { display: flex; flex-direction: column; }
.cgv-modale h2 { font-size: 1.35rem; margin: 0; padding: 20px 60px 14px 24px; border-bottom: 2px solid var(--trait); }
.cgv-modale .cgv { overflow-y: auto; padding: 14px 24px 22px; }
.cgv-modale .cgv h3 { font-size: 1.02rem; margin-top: 1.2em; }
.cgv-modale .cgv p, .cgv-modale .cgv li { font-size: .93rem; line-height: 1.5; }
.cgv h3 { font-size: 1.12rem; margin: 1.5em 0 .4em; }
.cgv p, .cgv li { color: var(--texte); font-size: .98rem; }
.cgv ul { margin: 0 0 1em; padding-left: 1.2em; }
.cgv-date { color: var(--gris) !important; font-size: .9rem !important; }
/* Lien en pastille translucide, sur la page de paiement */
/* Sous le dernier champ : les conditions de vente à gauche, le bouton de paiement à l'extrémité droite. */
/* Lien discret sous le champ de précision : une pastille à côté du bouton ne tenait pas sur téléphone. */
.lien-cgv { margin: -22px 0 0; font-size: .95rem; } /* marge négative : rattrape l'espace laissé sous le champ */
.lien-cgv a { color: var(--rouge); font-style: italic; text-decoration: none; }
.lien-cgv a:hover { text-decoration: underline; }
.paiement-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* ---------- Planning du professeur (pages/planning_prof.php) : page blanche, sans en-tête ni pied du site ---------- */
body.page-prof { background: #fff; }
.prof-planning { max-width: 920px; margin: 0 auto; padding: 28px 16px 40px; }
.prof-planning h1 { margin-bottom: 18px; }
.prof-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-bottom: 18px; }
.prof-barre .planning-semaine { flex-wrap: wrap; }
.prof-filtres { display: flex; align-items: flex-end; gap: 10px; margin-left: auto; }
.prof-filtres .champ { margin: 0; min-width: 170px; }
.prof-filtres label { font-size: .85rem; }
.prof-filtres select { padding: 8px 32px 8px 12px; font-size: .93rem; }
/* Filtre « A confirmer » : bleu sur fond blanc ; actif (il affiche alors « Tous ») : bleu ciel, texte bleu marine. */
.bouton-a-confirmer { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--titres); font-weight: 600; font-size: .93rem; color: var(--bleu); text-decoration: none; background: #fff; border: 2px solid var(--bleu); border-radius: 99px; padding: 8px 16px; }
.bouton-a-confirmer:hover { background: var(--ciel-2); }
.bouton-a-confirmer.actif { background: var(--ciel); color: var(--marine); }
.bac-libelles { display: grid; }
.bac-libelles > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bouton-a-confirmer:not(.actif) .bac-tous, .bouton-a-confirmer.actif .bac-a { visibility: hidden; }
.bouton-a-confirmer .bouton-facture-nb { position: static; }
.prof-cours-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.prof-cours { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 2px solid var(--trait); border-left: 6px solid #1a8a4c; border-radius: 14px; background: #fff; }
.prof-cours.a-confirmer { border-left-color: #e0a100; background: #fffcf2; }
.prof-cours.prof-cours-annule { border-left-color: var(--rouge); }
.prof-heure b { display: block; font-family: var(--titres); color: var(--marine); font-size: 1.05rem; }
.prof-heure small { color: var(--gris); }
.prof-eleve summary { display: inline-block; cursor: pointer; list-style: none; font-weight: 700; color: var(--marine); background: var(--ciel); border-radius: 99px; padding: 5px 14px; }
.prof-eleve summary::-webkit-details-marker { display: none; }
.prof-eleve[open] summary { background: var(--marine); color: #fff; }
.prof-eleve-details { margin-top: 8px; font-size: .92rem; }
.prof-eleve-details p { margin: 0 0 3px; }
.prof-note { font-style: italic; border-left: 3px solid var(--rouge); padding-left: 8px; margin-top: 6px !important; }
.prof-statut { font-weight: 700; font-size: .9rem; color: #1a8a4c; text-align: right; }
.prof-statut.statut-prof-envoye, .prof-statut.statut-prof-modifie { color: #b07d00; }
.prof-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bouton-confirmer { font: inherit; font-weight: 700; font-size: .9rem; color: #fff; background: #1a8a4c; border: 0; border-radius: 99px; padding: 7px 16px; cursor: pointer; }
.bouton-confirmer:hover { background: #157a42; }
.bouton-reporter { font: inherit; font-weight: 700; font-size: .9rem; color: var(--marine); background: #fff; border: 2px solid var(--trait); border-radius: 99px; padding: 5px 14px; cursor: pointer; }
.bouton-reporter:hover { background: var(--ciel); border-color: var(--bleu); }
.prof-report { grid-column: 1 / -1; }
.prof-pied { margin-top: 30px; text-align: center; color: var(--gris); font-size: .85rem; }
@media (max-width: 640px) {
  .prof-filtres { margin-left: 0; width: 100%; }
  .prof-filtres .champ { flex: 1; min-width: 0; }
  .prof-cours { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .prof-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Planning du professeur, fenêtre Confirmer : la liste de ses cours à confirmer. */
.prof-liste-confirmer { margin: 0 0 18px; padding-left: 20px; color: var(--marine); line-height: 1.6; max-height: 40vh; overflow-y: auto; }

/* Page de réponse, report proposé : l'ancienne date, barrée et discrète, au-dessus du nouveau créneau. */
.dispo-liste .dispo-ancien strong { text-decoration: line-through; color: var(--gris); font-weight: 600; }

/* « Ajouter un cours » : pastille du solde après le nom de l'élève. Rose si l'élève doit de l'argent, bleu ciel à
   zéro, vert clair s'il a de l'argent disponible. */
.creer-pour { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pastille-solde { display: inline-block; padding: 3px 12px; border-radius: 99px; font-family: var(--titres); font-weight: 600; font-size: .88rem; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.planning-eleve label .pastille-solde { margin-left: 6px; }
.solde-neg { background: #fde4e6; color: var(--rouge-fonce); }
.solde-zero { background: var(--ciel); color: var(--marine); }
.solde-pos { background: #e3f3e8; color: #1a6b3c; }
/* Abonnement « Autre… » : petite fenêtre sous la liste (heures et prix horaire), comme le calendrier. */
.champ-abonnement { position: relative; }
.abonnement-autre { position: absolute; z-index: 30; top: calc(100% - 4px); left: 0; width: 260px; max-width: calc(100vw - 48px); border: 2px solid var(--trait); border-radius: 16px; padding: 12px 12px 14px; background: #fff; box-shadow: 0 18px 50px rgba(7, 28, 84, .25); }
.abonnement-autre .champ { margin-bottom: 10px; }
.abonnement-autre .bouton { width: 100%; }
/* Total : calculé, non modifiable. */
.champ-total { background: var(--ciel-2); font-weight: 700; color: var(--marine); cursor: default; }
/* « Autre… » : nombre de cours (la durée d'un cours dans le titre, « de 1h30 ») et les heures dessous (« soit 6h »). */
.autre-heures { margin: 6px 0 0; font-size: .88rem; color: var(--gris); min-height: 1.2em; }
/* « Ajouter un cours », après « Ajouter » : petite fenêtre de choix (enregistrer seulement, ou envoyer aussi à l'élève). */
.ajout-choix { width: min(460px, calc(100vw - 24px)); }
.ajout-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.ajout-boutons .bouton { flex: 1 1 auto; }
.bouton-ciel { background: var(--ciel); border-color: var(--ciel); color: var(--marine); box-shadow: 0 4px 0 #c6d8f7; }
.bouton-ciel:hover { background: #dbe8ff; color: var(--marine); }
.ajout-note { margin: 4px 0 0; font-size: .92rem; color: var(--marine); }
.ajout-retour { margin: 12px 0 0; text-align: right; }
/* Fenêtres qui s'ouvrent sur leur titre (pas sur un bouton ni une case) : aucun contour de sélection au départ. */
.confirmer-modale h2[autofocus]:focus { outline: none; }
/* Planning : code de réservation sous la durée, dans la couleur de l'état du cours. Un clic ouvre une bulle avec
   les dates de création et de dernière modification de la réservation (classe « ouvert », voir site.js). */
.planning-heure .planning-resa { position: relative; align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--gris); cursor: pointer; text-align: left; }
.planning-resa:hover { text-decoration: underline; }
.etat-attente .planning-resa { color: #6b7488; } .etat-prevu .planning-resa { color: var(--bleu); } .etat-effectue .planning-resa { color: #1a8a4c; }
.etat-annule .planning-resa { color: var(--rouge); } .etat-supprime .planning-resa { color: #e0608a; } .etat-a_reporter .planning-resa { color: #b07d00; }
.planning-resa.ouvert::after { content: attr(data-tip); position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; white-space: pre; padding: 8px 12px; border-radius: 10px; background: var(--marine); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; box-shadow: 0 10px 28px rgba(7, 28, 84, .25); }
/* Planning, filtre « Effacé » : cours effacé, grisé, avec « Récupérer ». */
.etat-efface { border-left-color: #b8c0d4; background: #f7f8fb; } .etat-efface .planning-statut { color: var(--gris); }
.etat-efface .planning-statut form { margin: 0; }
/* Planning : champ « Code » (réservation), avant « Élève ». */
.planning-filtres .planning-code { flex: 0 1 110px; min-width: 90px; }
.planning-code input { text-transform: uppercase; letter-spacing: .04em; }
.planning-code input::placeholder { text-transform: none; letter-spacing: 0; }
/* « Créer le lien » grisé quand le mode de paiement n'est pas Stripe. */
.bouton[data-creer-lien]:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Gestion, Visites : résumé du jour ou du mois, tableau du jour qui défile sur mobile, cartes des totaux du mois. */
.visites-resume { font-size: 1.05rem; margin: 0 0 14px; }
.visites-defile { overflow-x: auto; }
.visites-defile .tableau-simple { min-width: 680px; }
.visites-defile td { white-space: nowrap; }
.visites-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 22px; align-items: start; }
.visites-grille .carte { padding: 18px; }
.visites-grille .carte h2 { font-size: 1.2rem; }
.visites-grille td.note { text-align: right; width: 1%; }