/* Feuille de style commune aux écrans de la plateforme (installation, connexion, administration).
   Fichier statique : aucune compilation n'est nécessaire. */

:root {
    --encre: #1d2433; --gris: #5b6475; --trait: #dfe3ea; --fond: #f5f6f8; --blanc: #fff;
    --accent: #1f5fbf; --accent-fonce: #174a96; --ok: #1b7a43; --ok-fond: #ecf8f0;
    --erreur: #b42318; --erreur-fond: #fef3f2; --attention: #8a5a00; --attention-fond: #fff8e6;
    --rayon: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--fond); color: var(--encre); line-height: 1.5; }
a { color: var(--accent); }
h1 { margin: 0 0 .75rem; font-size: 1.45rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
p { margin: .5rem 0; }
.aide, small.aide { color: var(--gris); font-size: .9rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Mise en page simple (installation, connexion) */
.cadre { max-width: 40rem; margin: 2.5rem auto; padding: 0 1rem; }
.cadre.etroit { max-width: 28rem; }
.carte { background: var(--blanc); border-radius: 12px; padding: 1.75rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.marque { text-align: center; font-weight: 700; margin-bottom: 1rem; color: var(--gris); }

/* Étapes de l'assistant */
.etapes { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .85rem; color: var(--gris); flex-wrap: wrap; }
.etapes li { padding: .25rem .65rem; border-radius: 999px; background: #e8ebf0; }
.etapes li[aria-current="step"] { background: var(--accent); color: #fff; }

/* Formulaires */
label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.etiquette { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.tr-zone img, .texte-riche img { max-width: 100%; height: auto; border-radius: 8px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=datetime-local], input:not([type]),
select, textarea { width: 100%; padding: .6rem .7rem; border: 1px solid #c4cad4; border-radius: 8px; font: inherit; background: #fff; }
textarea { min-height: 6rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid #b9d0f3; border-color: var(--accent); }
.case { display: flex; gap: .5rem; align-items: flex-start; font-weight: normal; margin: .5rem 0; }
.case input { margin-top: .3rem; }
.ligne { display: grid; grid-template-columns: 1fr 7rem; gap: .75rem; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 40rem) { .grille-2 { grid-template-columns: 1fr; } }
.code-otp { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .5rem 1rem 1rem; margin: 1rem 0; }
legend { font-weight: 700; padding: 0 .3rem; }

/* Boutons */
button, .bouton { display: inline-block; margin-top: 1.25rem; padding: .65rem 1.15rem; border: 0; border-radius: 8px;
                  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .bouton:hover { background: var(--accent-fonce); }
button[disabled] { background: #9aa3b2; cursor: not-allowed; }
.bouton.secondaire, button.secondaire { background: #e8ebf0; color: var(--encre); }
.bouton.danger, button.danger { background: var(--erreur); }
.bouton.petit, button.petit { margin-top: 0; padding: .35rem .7rem; font-size: .9rem; }
.lien { background: none; color: var(--accent); padding: 0; margin: 0; font-weight: normal; text-decoration: underline; }
.lien:hover { background: none; }
.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
form.en-ligne { display: inline; }

/* Messages */
.alerte { border-left: 4px solid var(--erreur); background: var(--erreur-fond); padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0; }
.alerte ul { margin: 0; padding-left: 1.1rem; }
.succes { border-left: 4px solid var(--ok); background: var(--ok-fond); padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0; }
.attention { border-left: 4px solid var(--attention); background: var(--attention-fond); padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0; }

/* Listes de contrôle (installation) */
.controles { list-style: none; padding: 0; margin: 1rem 0; }
.controles li { padding: .5rem 0; border-bottom: 1px solid var(--trait); }
.controles .etat { font-weight: 600; margin-right: .4rem; }
.controles .ok .etat { color: var(--ok); }
.controles .ko .etat { color: var(--erreur); }
.controles .ko small { display: block; color: var(--gris); }
code.bloc { display: block; padding: .75rem; background: #f0f2f5; border-radius: 8px; word-break: break-all; font-size: .9rem; }
ol.consignes { padding-left: 1.2rem; }
.codes-secours { columns: 2; font-family: ui-monospace, monospace; font-size: 1.05rem; padding-left: 1.2rem; }

/* Portail */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.entete .interieur { max-width: 75rem; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; }
.entete .nom { font-weight: 700; }
.entete .utilisateur { margin-left: auto; display: flex; gap: 1rem; align-items: center; font-size: .95rem; }
.portail { max-width: 75rem; margin: 0 auto; padding: 1.5rem 1rem; display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; }
@media (max-width: 55rem) { .portail { grid-template-columns: 1fr; } }
.menu-portail { display: flex; flex-direction: column; gap: .35rem; align-self: start; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu a { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; border-radius: 8px; text-decoration: none; color: var(--encre); line-height: 1.25; }
.menu a:hover { background: #e8ebf0; }
.menu a[aria-current="page"] { background: var(--accent); color: #fff; }
.menu a.parent-actif { font-weight: 600; }
.icone-menu { flex-shrink: 0; opacity: .8; }
.menu a[aria-current="page"] .icone-menu { opacity: 1; }
.menu-rubrique { background: #fff; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.menu-rubrique + .menu-rubrique { margin-top: .25rem; }
.menu-rubrique > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; user-select: none; color: var(--encre); }
.menu-rubrique > summary::-webkit-details-marker { display: none; }
.menu-rubrique > summary .icone-menu { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: #e6eefa; color: var(--accent); opacity: 1; }
.menu-rubrique > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(-45deg); transition: transform .15s; }
.menu-rubrique[open] > summary { border-bottom: 1px solid var(--trait); background: #f7f9fc; }
.menu-rubrique[open] > summary::after { transform: rotate(45deg); }
.menu-rubrique > summary:hover { background: #eef2f7; }
.menu-rubrique > summary:focus-visible { outline: 3px solid #b9d0f3; outline-offset: -3px; }
.menu-rubrique > .menu { padding: .2rem .4rem .45rem; }
.menu-rubrique > .menu-groupe + .menu { padding-top: 0; }
.menu-groupe { display: flex; align-items: center; gap: .5rem; margin: .7rem .75rem .25rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7480; }
.menu-groupe::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.menu-rubrique .menu a { font-size: .95rem; }
.menu-sous { list-style: none; margin: .05rem 0 .2rem 1.45rem; padding: 0 0 0 .6rem; border-left: 2px solid #d5dce6; }
.menu-sous a { color: #3d4652; }
.menu-sous a { font-size: .93rem; padding: .32rem .6rem; }
.lien-compte { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 55rem) { .menu-portail { position: static; max-height: none; } }
.contenu { background: var(--blanc); border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); min-width: 0; }
.titre-page { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.titre-page h1 { margin: 0; }
.titre-page .bouton { margin: 0 0 0 auto; }

/* Tableaux */
.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: .85rem; color: var(--gris); font-weight: 600; }
.pastille { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; background: #e8ebf0; }
.pastille.ok { background: var(--ok-fond); color: var(--ok); }
.pastille.ko { background: var(--erreur-fond); color: var(--erreur); }
.pastille.attention { background: var(--attention-fond); color: var(--attention); }
.pastille.attention { border: 0; margin: 0; padding: .1rem .5rem; }
.vide { color: var(--gris); font-style: italic; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.tuile { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem; }
.tuile h3 { margin: 0 0 .3rem; font-size: 1rem; }
.pagination { margin-top: 1rem; }
.permissions-module { margin: .5rem 0 1rem; }
.permissions-module h3 { font-size: .95rem; margin: .75rem 0 .25rem; }

/* Notifications, modules */
.liste-notifications{list-style:none;padding:0;margin:0}
.liste-notifications li{padding:12px 0;border-bottom:1px solid var(--trait)}
.liste-notifications li.non-lue{border-left:4px solid var(--accent);padding-left:12px}
.liste-notifications p{margin:4px 0}
.fil{list-style:none;padding:0;margin:0}
.fil li{padding:10px 0;border-bottom:1px solid var(--trait)}
.fil .public{border-left:4px solid var(--ok);padding-left:10px}
.galerie-privee{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.galerie-privee img{width:160px;height:120px;object-fit:cover;border-radius:8px}
.carte-portail{height:280px;border-radius:var(--rayon);border:1px solid var(--trait)}
.statut-nouveau{background:#fff8e6;color:#8a5a00}.statut-encours{background:#eef4fb;color:#1d4ed8}.statut-fini{background:var(--ok-fond);color:var(--ok)}.statut-ferme{background:#eef1f5;color:#5b6475}
.deux-colonnes{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}
@media (max-width:900px){.deux-colonnes{grid-template-columns:1fr}}
.calendrier{width:100%;border-collapse:collapse;table-layout:fixed}
.calendrier th{text-align:center}
.calendrier td{height:110px;vertical-align:top;border:1px solid var(--trait);padding:4px}
.calendrier td.autre-mois{background:#fafbfc;color:#9aa3b2}
.calendrier td.aujourdhui{background:#f2f6fd}
.calendrier .jour{font-weight:700;font-size:.85rem}
.evt{display:block;font-size:.8rem;border-radius:4px;padding:2px 4px;margin:2px 0;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.semaine>div{border:1px solid var(--trait);border-radius:8px;padding:6px;min-height:200px}
@media (max-width:900px){.calendrier td{height:70px}.semaine{grid-template-columns:1fr}}
.tuile .compte{font-size:2rem;font-weight:700;display:block}

/* Courrier */
.verification{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1.3fr);gap:1.5rem;align-items:start}
.verification-document{position:sticky;top:1rem}
@media (max-width:1000px){.verification{grid-template-columns:1fr}.verification-document{position:static}}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){.deux-champs{grid-template-columns:1fr}}
.cases-colonnes{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.1rem 1rem}
.suggestions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.35rem;min-height:1.5rem}
.propose{border-color:#1d4ed8 !important;background:#eef4fb !important}
.propose.incertain{border-color:#c2410c !important;background:#fff4ec !important}
.legende-propositions{display:none}
.lecture-faite .legende-propositions{display:block}
.choix-correspondant{position:relative}
.choix-correspondant .resultats{position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid var(--trait);border-radius:8px;list-style:none;margin:2px 0 0;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.choix-correspondant .resultats li{padding:6px 8px;border-radius:6px;cursor:pointer}
.choix-correspondant .resultats li[aria-selected=true],.choix-correspondant .resultats li:hover{background:#eef4fb}
dl.fiche{display:grid;grid-template-columns:11rem 1fr;gap:.35rem 1rem;margin:0 0 1rem}
dl.fiche dt{font-weight:600;color:var(--gris)}
dl.fiche dd{margin:0}
@media (max-width:640px){dl.fiche{grid-template-columns:1fr}}
.lecteur{border:1px solid var(--trait);border-radius:var(--rayon);background:#f6f7f9}
.lecteur:fullscreen{overflow:auto}
.lecteur-barre{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem;border-bottom:1px solid var(--trait);background:#fff;position:sticky;top:0;z-index:2}
.lecteur-pages{max-height:78vh;overflow:auto;padding:.75rem;display:flex;flex-direction:column;gap:.75rem;align-items:center}
.lecteur:fullscreen .lecteur-pages{max-height:none}
.lecteur-page{position:relative;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.lecteur-page canvas,.lecteur-page img{display:block;width:100%;height:auto}
.lecteur-page .zone{position:absolute;background:rgba(255,213,0,.35);outline:2px solid #e0a800;border-radius:2px;pointer-events:none}
.lecteur-progression{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;flex:1 1 120px}
.lecteur-progression span{display:block;height:100%;background:#1d4ed8;transition:width .2s}

/* Devis */
.alerte-lecture{color:#b42318;font-weight:600;margin:.25rem 0 0;font-size:.9rem}
#controle-totaux.ok,.aide.ok{color:var(--ok)}
.lignes-devis input{padding:.35rem .45rem}
.lignes-devis td{padding:.25rem}
ol.circuit{list-style:none;padding:0;margin:0;counter-reset:niveau}
ol.circuit li{position:relative;padding:.5rem 0 .5rem 2.2rem;border-left:2px solid var(--trait);margin-left:.8rem;counter-increment:niveau}
ol.circuit li::before{content:counter(niveau);position:absolute;left:-.85rem;top:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;background:#e8ebf0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
ol.circuit li.fait::before{background:var(--ok);color:#fff;content:"✓"}
ol.circuit li.refus::before{background:var(--erreur);color:#fff;content:"✕"}
ol.circuit li.courant::before{background:var(--accent);color:#fff}
table.comparatif tr.retenu td{background:var(--ok-fond)}
.lignes-devis td:first-child input{min-width:16rem}
.etapes-demo{list-style:none;padding:0}.etapes-demo li{padding:.35rem 0}
.choix-modeles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:.75rem 0 1rem}
.choix-modele{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px;border:2px solid var(--trait);border-radius:10px;cursor:pointer;font-weight:400}
.choix-modele:has(input:checked){border-color:var(--accent);background:#eef4fb}
.choix-modele input{position:absolute;opacity:0}
.choix-modele:focus-within{outline:3px solid #b9d0f3}
.choix-modele-dessin{position:relative;display:block;height:90px;border-radius:6px;background:#fff;border:1px solid var(--trait);overflow:hidden}
.choix-modele-dessin i,.choix-modele-dessin b,.choix-modele-dessin em{position:absolute;display:block;border-radius:3px}
.modele-grande_image i{left:0;right:0;top:0;height:46px;background:linear-gradient(135deg,#7aa6d8,#14365a)}
.modele-grande_image b{left:8px;right:40%;top:56px;height:8px;background:#c4cad4;box-shadow:0 14px 0 #e3e7ee}
.modele-grande_image em{right:8px;width:30%;top:54px;height:30px;background:#eef1f5}
.modele-deux_colonnes i{left:8px;width:58%;top:8px;height:40px;background:linear-gradient(135deg,#7aa6d8,#14365a)}
.modele-deux_colonnes b{left:8px;width:58%;top:56px;height:8px;background:#c4cad4;box-shadow:0 14px 0 #e3e7ee}
.modele-deux_colonnes em{right:8px;width:28%;top:8px;bottom:8px;background:#eef1f5}
.modele-sobre i{left:8px;width:58%;top:50px;height:32px;background:linear-gradient(135deg,#7aa6d8,#14365a)}
.modele-sobre b{left:8px;width:58%;top:10px;height:8px;background:#c4cad4;box-shadow:0 14px 0 #e3e7ee,0 28px 0 #e3e7ee}
.modele-sobre em{right:8px;width:28%;top:8px;bottom:8px;background:#eef1f5}
/* Modèles de pages */
.mp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin: 1.25rem 0 1.75rem; }
.mp-type { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border: 1px solid var(--trait); border-radius: 10px; background: #fff; text-decoration: none; color: var(--encre); line-height: 1.3; }
.mp-type-nom { font-weight: 700; }
.mp-type-modele { font-size: .85rem; color: #5b6472; }
.mp-type:hover { border-color: var(--accent); }
.mp-type[aria-current] { border-color: var(--accent); background: var(--accent); color: #fff; }
.mp-type[aria-current] .mp-type-modele { color: #dfe9f8; }
.mp-section h2 { margin: 0 0 .2rem; }
.mp-section > .aide { margin: 0 0 1rem; }
.mp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.mp-carte { display: flex; flex-direction: column; border: 2px solid var(--trait); border-radius: 12px; background: #fff; overflow: hidden; }
.mp-carte.mp-actuel { border-color: var(--accent); box-shadow: 0 0 0 3px #d6e4f7; }
.mp-dessin { padding: .75rem .75rem 0; }
.mp-dessin svg { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--trait); }
.mp-carte-corps { padding: .6rem .9rem 0; flex: 1; }
.mp-carte-corps h3 { margin: 0 0 .25rem; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mp-carte-corps .aide { margin: 0; font-size: .9rem; }
.mp-carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem .9rem .9rem; }
.mp-carte-actions button { margin-top: 0; }
.mp-badge { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: #e3f1e8; color: #1b7a43; }
.mp-utilise { font-weight: 600; color: #1b7a43; font-size: .92rem; }
.mp-dialogue { width: min(1200px, 94vw); height: min(860px, 92vh); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mp-dialogue::backdrop { background: rgba(15,23,42,.55); }
.mp-dialogue-cadre { display: flex; flex-direction: column; height: 100%; }
.mp-dialogue-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--trait); }
.mp-dialogue-entete h2 { margin: 0; font-size: 1.1rem; margin-right: auto; }
.mp-dialogue-entete button { margin-top: 0; }
.mp-ecrans { display: inline-flex; gap: 4px; }
.mp-ecrans button[aria-pressed=true] { background: var(--accent); color: #fff; }
.mp-ecran { position: relative; flex: 1; overflow: hidden; background: #e9edf2; }
.mp-ecran iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.mp-dialogue-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--trait); }
.mp-dialogue-pied .aide { margin: 0 auto 0 0; }
.mp-dialogue-pied button { margin-top: 0; }
.mp-dialogue [hidden] { display: none; }
.avec-portrait { display: inline-flex; vertical-align: middle; align-items: center; gap: .6rem; }
.portrait { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.portrait-vide { display: inline-flex; align-items: center; justify-content: center; background: #e6eefa; color: var(--accent); font-weight: 700; font-size: .85rem; }
/* Vidéos dans les textes (portail) */
.video{position:relative;aspect-ratio:16/9;max-width:720px;margin:1rem 0;background:#111;border-radius:10px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-consentement{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:#fff}
.video-consentement a{color:#fff}
.video-consentement .bouton{margin-top:0}
/* Pages ouvertes dans une fenêtre du portail */
.mode-fenetre { background: #fff; }
.mode-fenetre .portail { display: block; max-width: none; margin: 0; padding: 0; }
.mode-fenetre .contenu { box-shadow: none; border-radius: 0; padding: 1.25rem 1.5rem; max-width: none; }
.mode-fenetre .hors-fenetre { display: none; }
.fenetre-portail { width: min(980px, 94vw); height: min(900px, 92vh); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.fenetre-portail::backdrop { background: rgba(15,23,42,.55); }
.fenetre-portail-cadre { display: flex; flex-direction: column; height: 100%; }
.fenetre-portail-entete { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--trait); }
.fenetre-portail-entete h2 { margin: 0 auto 0 0; font-size: 1.1rem; }
.fenetre-portail-entete button { margin-top: 0; }
.fenetre-portail iframe { flex: 1; width: 100%; border: 0; }
/* Choix du thème (Apparence) */
.choix-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: .75rem; }
.choix-theme { position: relative; display: flex; flex-direction: column; margin: 0; border: 2px solid var(--trait); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; font-weight: 400; }
.choix-theme:hover { border-color: #9db8e0; }
.choix-theme:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px #d6e4f7; }
.choix-theme:focus-within { outline: 3px solid #b9d0f3; outline-offset: 2px; }
.choix-theme input { position: absolute; opacity: 0; pointer-events: none; }
.choix-theme img { display: block; width: 100%; height: auto; aspect-ratio: 64 / 45; object-fit: cover; object-position: top; border-bottom: 1px solid var(--trait); }
.choix-theme-texte { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem .85rem; }
.choix-theme-texte strong { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.choix-theme-texte .aide { margin: 0; }
.choix-theme-couleurs { display: flex; gap: 4px; margin-top: .35rem; }
.choix-theme-couleurs span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ccd3dc; }