/* Charte Trame : fond blanc, bandeau rose, cartes pastel, encres accessibles (contraste ≥ 4,5:1).
   Polices hébergées ici (licence OFL, voir static/polices/LICENSE-*.txt) : rien n'est demandé à Google. */

@font-face { font-family: "Carlito"; src: url("/static/polices/carlito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("/static/polices/carlito-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("/static/polices/caladea-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("/static/polices/caladea-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/static/polices/cormorant-garamond-500-italique.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --fond: #FFFFFF;
  --rose: #F6DEE3;
  --peche: #FBE3C7;
  --menthe: #D8EEE5;
  --texte: #24312C;
  --texte-doux: #4E5F58;      /* sur fond rose ou pastel */
  --texte-discret: #63756E;   /* sur fond blanc */
  --texte-carte: #3B4A44;
  --vert: #2F6450;
  --rose-fonce: #9A3D54;
  --brun: #8F4F14;
  --bord: #E3E8E5;
  --bord-fort: #C9D3CE;
  --erreur: #A3283B;
  --police-titre: "Caladea", Cambria, Georgia, serif;
  --police-texte: "Carlito", Calibri, "Segoe UI", system-ui, sans-serif;
  --police-slogan: "Cormorant Garamond", Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--fond); color: var(--texte);
  font: 17px/1.5 var(--police-texte);
}
a { color: var(--vert); }
a:hover { color: var(--texte); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; line-height: 1.15; }
h1 { font-size: 2rem; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; margin: 0 0 .75rem; }
[hidden] { display: none !important; }

.invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement { position: absolute; left: -999px; top: 0; z-index: 10; padding: .6rem 1rem; background: var(--fond); }
.evitement:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }

/* --- Logo : 3 barres arrondies empilées + « Trame » -------------------------- */

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--texte); }
.logo-barres { display: inline-flex; flex-direction: column; gap: 4px; }
.logo-barres span { display: block; height: 6px; border-radius: 3px; }
.logo-barres span:nth-child(1) { width: 30px; background: #EFC0CA; }
.logo-barres span:nth-child(2) { width: 23px; background: #F5C48D; }
.logo-barres span:nth-child(3) { width: 17px; background: #9FD3BE; }
.logo-mot { font-family: var(--police-titre); font-weight: 700; font-size: 26px; letter-spacing: .2px; line-height: 1; }
.logo-grand { gap: 14px; }
.logo-grand .logo-barres { gap: 5px; }
.logo-grand .logo-barres span { height: 8px; border-radius: 4px; }
.logo-grand .logo-barres span:nth-child(1) { width: 38px; }
.logo-grand .logo-barres span:nth-child(2) { width: 29px; }
.logo-grand .logo-barres span:nth-child(3) { width: 21px; }
.logo-grand .logo-mot { font-size: 44px; }

.slogan {
  margin: .35rem 0 0; font-family: var(--police-slogan); font-style: italic; font-weight: 500;
  font-size: 1.45rem; line-height: 1.25; color: var(--texte-doux);
}

/* --- En-tête -------------------------------------------------------------- */

.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding: 14px 32px; border-bottom: 1px solid var(--bord); background: var(--fond);
}
.entete-gauche, .entete-droite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entete-droite { margin-left: auto; }
.entete-droite form { margin: 0; }
.marque { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-radius: 8px; }
.pastille-beta {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--rose-fonce); background: var(--rose); padding: 4px 10px; border-radius: 999px;
}
.lien-entete {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  color: var(--texte-doux); text-decoration: none; border-radius: 10px;
}
.lien-entete:hover { background: #F3F6F4; color: var(--texte); }
.compte .initiale {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--rose); color: var(--texte); font-weight: 700;
}

/* Menu du compte : remplace les liens de l'en-tête sur téléphone (details/summary, sans JavaScript). */
.menu-compte { display: none; position: relative; margin-left: auto; }
.menu-compte summary {
  list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--rose); cursor: pointer;
}
.menu-compte summary::-webkit-details-marker { display: none; }
.menu-compte .initiale { font-weight: 700; font-size: 18px; color: var(--texte); }
.menu-compte[open] summary { background: var(--texte); }
.menu-compte[open] .initiale { color: #FFFFFF; }
.menu-compte-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 15rem;
  display: flex; flex-direction: column; padding: 8px; border-radius: 14px;
  background: var(--fond); border: 1px solid var(--bord); box-shadow: 0 8px 24px rgba(36, 49, 44, .14);
}
.menu-compte-nom { margin: 4px 12px 6px; font-weight: 700; }
.menu-compte-liste a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--texte); text-decoration: none;
}
.menu-compte-liste a:hover { background: #F3F6F4; }
.menu-compte-liste form { margin: 6px 0 0; }
.menu-compte-liste form > button[type=submit] { width: 100%; margin: 0; }

/* --- Boutons et champs ----------------------------------------------------- */

button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: 0 1.1rem; margin-top: 1rem;
  font: inherit; font-weight: 700; color: #FFFFFF; background: var(--vert);
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
}
button:hover, .bouton:hover { background: #24503F; color: #FFFFFF; }
form > button[type=submit] { width: 100%; }
button.secondaire { background: #EEF2F0; color: var(--texte); }
button.secondaire:hover { background: var(--bord); color: var(--texte); }
button.danger { background: var(--fond); color: var(--erreur); border: 1px solid var(--erreur); }
button.danger:hover { background: #FBEAEC; color: var(--erreur); }
.bouton-contour, .entete-droite form > button[type=submit] {
  width: auto; margin: 0; background: var(--fond); color: var(--texte); font-weight: 400;
  border: 1px solid var(--bord-fort); padding: 0 16px;
}
.bouton-contour:hover, .entete-droite form > button[type=submit]:hover { background: #F3F6F4; color: var(--texte); }
.bouton-lien, form > button.bouton-lien[type=submit] {
  width: auto; margin: .25rem 0 0; padding: 0 .25rem; background: none; color: var(--texte-carte);
  font-weight: 400; text-decoration: underline; text-underline-offset: 3px;
}
.bouton-lien:hover, form > button.bouton-lien[type=submit]:hover { background: none; color: var(--texte); }

label { display: block; margin: .9rem 0 .3rem; font-weight: 700; }
label.choix { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin: .2rem 0; min-height: 44px; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: .55rem .85rem;
  font: inherit; font-size: 17px; color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord-fort); border-radius: 10px;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texte-discret); opacity: 1; }
input[type=radio], input[type=checkbox] { width: 1.25rem; height: 1.25rem; accent-color: var(--vert); }
fieldset { border: 1px solid var(--bord); border-radius: 12px; margin: 1rem 0; padding: .5rem 1rem; }
legend { font-weight: 700; padding: 0 .3rem; }
.sous-choix { margin-top: .4rem; padding-left: .75rem; border-left: 2px solid var(--bord); }

/* --- Pages simples (sécurité, comptes, mot de passe…) ---------------------- */

.page { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page.etroite { max-width: 30rem; }
.carte {
  background: var(--fond); border: 1px solid var(--bord); border-radius: 16px;
  padding: 1.25rem; margin-bottom: 1rem;
}
.carte.important { border: 2px solid var(--vert); }
.centre { text-align: center; }
.discret { color: var(--texte-discret); font-size: .92rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.actions form { margin: 0; }
.actions button { width: auto; margin-top: .5rem; }
.ligne { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.ligne > div { flex: 1 1 12rem; }
.ligne > div.court { flex: 0 0 6rem; }
.ligne > button { width: auto; flex: 0 0 auto; }
.prenom-ligne { margin-top: .25rem; }
.prenom-ligne label { font-weight: 400; font-size: .92rem; }

.alerte { padding: .75rem 1rem; border-radius: 12px; margin: 0 0 1rem; }
.alerte.ok { background: var(--menthe); color: var(--texte); }
.alerte.erreur { background: #FBEAEC; color: var(--erreur); border: 1px solid #E8B9C1; }

.badge {
  display: inline-block; padding: .1rem .55rem; margin-left: .3rem; font-size: .78rem; font-weight: 700;
  color: var(--texte-doux); background: #F3F6F4; border-radius: 999px; vertical-align: middle;
}
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .85rem 0; border-bottom: 1px solid var(--bord); }
.liste li:last-child { border-bottom: 0; }
.suggestion-texte { margin: 0 0 .2rem; }
.liste li form button { width: auto; margin-top: .4rem; }
details.carte summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 700; }

code { background: #F3F6F4; padding: .1rem .4rem; border-radius: 6px; font-size: .95rem; word-break: break-all; }
code.grand { font-size: 1.3rem; letter-spacing: .05em; }
.codes { columns: 2; list-style: none; padding: 0; }
.codes li { margin: .3rem 0; }
.qr { background: #fff; padding: 8px; border-radius: 10px; max-width: 100%; height: auto; border: 1px solid var(--bord); }
.defilement { overflow-x: auto; }
.journal { width: 100%; border-collapse: collapse; font-size: .88rem; }
.journal th, .journal td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.code-erreur { font-family: var(--police-titre); font-size: 3rem; font-weight: 700; color: var(--rose-fonce); margin: 0; }

/* --- Connexion et double authentification : fond rose, deux grands cercles -- */

body.fond-rose { position: relative; overflow-x: hidden; background: var(--rose); }
body.fond-rose::before, body.fond-rose::after {
  content: ""; position: fixed; z-index: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none;
}
body.fond-rose::before { width: 360px; height: 360px; right: -110px; top: -130px; }
body.fond-rose::after { width: 320px; height: 320px; left: -120px; bottom: -140px; }
.page-accueil {
  position: relative; z-index: 1; max-width: 26rem; min-height: 100vh; margin: 0 auto;
  padding: 12vh 24px 32px; display: flex; flex-direction: column; gap: 28px;
}
.accueil-tete { display: flex; flex-direction: column; align-items: center; text-align: center; }
.accueil-tete h1, .logo-seul { margin: 0; font-size: inherit; }
.carte-accueil {
  padding: 24px; border-radius: 20px; background: var(--fond); box-shadow: 0 2px 10px rgba(36, 49, 44, .08);
}
.carte-accueil h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
.carte-accueil label:first-of-type { margin-top: 0; }
.carte-accueil button[type=submit] { min-height: 50px; font-size: 1.05rem; margin-top: 1.25rem; border-radius: 12px; }
.accueil-pied { margin: auto 0 0; text-align: center; font-size: .9rem; color: var(--texte-doux); }

/* --- Bandeaux (bibliothèque en rose, mes outils en menthe) ------------------ */

.bandeau { position: relative; overflow: hidden; padding: 44px 32px 48px; }
.bandeau::before, .bandeau::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none;
}
.bandeau::before { width: 260px; height: 260px; right: -60px; top: -80px; }
.bandeau::after { width: 200px; height: 200px; left: -70px; bottom: -110px; }
.bandeau-rose { background: var(--rose); }
.bandeau-menthe { background: var(--menthe); }
.bandeau-menthe::after { display: none; }
.bandeau-interieur { position: relative; max-width: 1200px; margin: 0 auto; }
.bandeau-interieur.centre { max-width: 760px; }
.bandeau h1 { font-size: 2.5rem; margin: 0; }
.bandeau .slogan { font-size: 1.5rem; }
.bandeau-menthe .slogan { color: #3B4A44; }
.surtitre { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--vert); }
.recherche { margin-top: 24px; }
.champ-recherche {
  display: flex; align-items: center; gap: 12px; margin: 0; min-height: 60px; padding: 0 20px;
  border-radius: 16px; background: var(--fond); box-shadow: 0 2px 10px rgba(36, 49, 44, .10);
  color: var(--vert); font-weight: 400; text-align: left;
}
.champ-recherche:focus-within { outline: 3px solid var(--vert); outline-offset: 2px; }
.champ-recherche input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0; border: 0; outline: none; background: transparent; font-size: 18px;
}
.champ-recherche input::-webkit-search-cancel-button { cursor: pointer; }

/* --- Navigation principale : liens dans l'en-tête (ordinateur), barre fixe en bas (téléphone) -- */

.nav-principale { display: flex; align-items: center; gap: 4px; }
.nav-principale a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; color: var(--texte-doux); text-decoration: none;
}
.nav-principale a:hover { background: #F3F6F4; color: var(--texte); }
.nav-principale .plein { fill: none; }
.nav-principale a[aria-current=page] { font-weight: 700; }

/* --- Icônes d'outils « signature Trame » : carré arrondi pastel, dessin deux tons, 3 barres -- */

.teinte-rose { --teinte: var(--rose); --encre: var(--rose-fonce); --clair: #EFC0CA; }
.teinte-peche { --teinte: var(--peche); --encre: var(--brun); --clair: #F5C48D; }
.teinte-menthe { --teinte: var(--menthe); --encre: var(--vert); --clair: #9FD3BE; }

.icone {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; background: var(--teinte); color: var(--encre);
  box-shadow: 0 2px 6px rgba(36, 49, 44, .10);
}
.icone svg { width: 30px; height: 30px; }
.icone .plein { fill: var(--clair); }
.icone-barres { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.icone-barres span { display: block; height: 2.5px; border-radius: 2px; }
.icone-barres span:nth-child(1) { width: 9px; background: #EFC0CA; }
.icone-barres span:nth-child(2) { width: 7px; background: #F5C48D; }
.icone-barres span:nth-child(3) { width: 5px; background: #9FD3BE; }
.icone.grande { width: 72px; height: 72px; border-radius: 20px; }
.icone.grande svg { width: 36px; height: 36px; }
.icone.grande .icone-barres { right: 8px; bottom: 8px; }
.icone.grande .icone-barres span { height: 3px; }
.icone.grande .icone-barres span:nth-child(1) { width: 12px; }
.icone.grande .icone-barres span:nth-child(2) { width: 9px; }
.icone.grande .icone-barres span:nth-child(3) { width: 6px; }
.icone.petite { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 1px 3px rgba(36, 49, 44, .10); }
.icone.petite svg { width: 22px; height: 22px; }
.icone.petite .icone-barres { right: 3px; bottom: 3px; gap: 1px; }
.icone.petite .icone-barres span { height: 1.5px; }
.icone.petite .icone-barres span:nth-child(1) { width: 6px; }
.icone.petite .icone-barres span:nth-child(2) { width: 4.5px; }
.icone.petite .icone-barres span:nth-child(3) { width: 3px; }

/* --- Bibliothèque : blocs catégories, résultats de recherche ------------------ */

.page-bibliotheque { max-width: 1264px; padding: 32px; }
.picto { flex: none; }

.blocs-categories {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px;
}
.bloc-categorie {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 20px;
  border-radius: 18px; background: var(--teinte); color: var(--texte); text-decoration: none;
}
.bloc-categorie:hover { color: var(--texte); box-shadow: 0 2px 10px rgba(36, 49, 44, .12); }
.bloc-texte { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bloc-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bloc-nom { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.bloc-compte { flex: none; font-size: 14px; font-weight: 700; color: var(--encre); }
.bloc-idees { font-size: 15px; line-height: 1.4; color: var(--texte-carte); }
.bloc-fleche {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--fond); color: var(--encre);
}

.zone-outils { min-width: 0; }
.zone-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.zone-titre h2 { margin: 0; font-size: 1.75rem; }
.compteur { color: var(--texte-discret); }

.grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.carte-outil {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border-radius: 18px; border: 1px solid var(--bord); background: var(--fond); color: var(--texte);
}
.carte-haut { display: flex; align-items: center; gap: 14px; }
.carte-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carte-outil .nom { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.statut { font-size: 14px; font-weight: 700; color: var(--vert); }
.statut.bientot { color: var(--texte-doux); }
.carte-outil .categorie { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--encre); }
.page-categorie .carte-outil > .categorie { display: none; }
.carte-outil .description { margin: 0; font-size: 15px; line-height: 1.4; color: var(--texte-carte); }
.carte-outil .badge { align-self: flex-start; margin: 0; }
.carte-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.carte-actions form { margin: 0; }
.carte-actions .bouton, .carte-actions button { width: auto; margin: 0; }
.carte-actions button.bouton-contour, .carte-actions a.bouton-contour { font-weight: 700; }
.essai-admin { flex-basis: 100%; margin: 0; font-size: 14px; }
.lien-apercu { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
button:disabled, button:disabled:hover { cursor: not-allowed; color: var(--texte-discret); background: var(--fond); border-color: var(--bord); }

/* « Mes outils » : grandes cartes pastel, puis le bouton en pointillés. */
.carte-mienne { border: 0; background: var(--teinte); padding: 20px; gap: 16px; }
.carte-mienne .nom { font-size: 1.4rem; }
.carte-mienne .badge { background: var(--fond); }
.aucun-outil { margin: 0 0 16px; color: var(--texte-doux); }
.bouton-pointilles {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; margin-top: 20px;
  padding: 0 16px; border: 1.5px dashed #9FD3BE; border-radius: 18px;
  color: var(--vert); font-weight: 700; text-decoration: none; text-align: center;
}
.bouton-pointilles span { font-size: 24px; line-height: 1; }
.bouton-pointilles:hover { background: #F3F8F6; color: var(--vert); }

/* Page d'une catégorie : bandeau dans sa couleur, lien retour. */
.bandeau-categorie { background: var(--teinte); padding-top: 20px; }
.bandeau-categorie::after { display: none; }
.lien-retour {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -10px; padding: 0 10px;
  border-radius: 10px; color: var(--texte); font-weight: 700; text-decoration: none;
}
.lien-retour:hover { background: rgba(255, 255, 255, .6); color: var(--texte); }
.bandeau-categorie h1 { margin-top: 10px; }
.bandeau-idees { margin: 8px 0 0; max-width: 40rem; font-size: 1.05rem; line-height: 1.45; color: var(--texte-carte); }

.vide {
  padding: 40px 32px; margin-bottom: 20px; border: 1.5px dashed var(--bord-fort); border-radius: 16px;
  text-align: center; color: var(--texte-doux);
}
.vide p { margin: 0 0 .5rem; }
.vide-titre { font-family: var(--police-titre); font-size: 1.4rem; color: var(--texte); }
.suggestion { margin-top: 1rem; }
.suggestion summary { list-style: none; display: inline-flex; margin: 0; }
.suggestion summary::-webkit-details-marker { display: none; }
.suggestion-formulaire { max-width: 32rem; margin: 1rem auto 0; text-align: left; }
.suggestion-formulaire label { margin-top: 0; color: var(--texte); }
.suggestion-formulaire .discret { margin-top: .4rem; }

/* Admin : choix du pictogramme. */
.choix-pictos .discret { margin: 0 0 .5rem; }
.grille-pictos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 6px 10px; }
.choix-picto { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 48px; font-weight: 400; cursor: pointer; }
.choix-picto input { flex: none; }
.picto-auto {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; border: 1.5px dashed var(--bord-fort); color: var(--texte-doux); font-weight: 700;
}
details.carte summary .icone { margin-right: .2rem; }

/* --- Trames à compléter : liste des carnets et carnet ---------------------------- */

.liste-carnets { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte-carnet { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--bord); border-radius: 18px; }
.carnet-lien { display: flex; flex-direction: column; gap: 2px; color: var(--texte); text-decoration: none; }
.carnet-lien:hover .carnet-titre { color: var(--vert); }
.carnet-surtitre { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--vert); }
.carnet-titre { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.carnet-dates { color: var(--texte-discret); }
.carnet-supprimer { margin: 0; }
.carnet-supprimer summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.carnet-supprimer summary::-webkit-details-marker { display: none; }
.carnet-supprimer p { margin: 0; }
.carnet-supprimer button { width: auto; margin-top: .5rem; }
.page-carnets form > button.bouton-pointilles { width: 100%; background: none; }

.page-carnet { max-width: 46rem; }
.carnet-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; }
.carnet-etat { font-size: 14px; color: var(--texte-discret); }
.carnet-etat.alerte-etat { color: var(--erreur); font-weight: 700; }
.carnet-entete {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px;
  background: var(--teinte, var(--menthe));
}
.carnet-entete .carnet-titre { margin: 0; font-size: 2rem; }
.carnet-entete .carnet-surtitre { margin: 0; color: var(--encre); }
.carnet-sous-titre { margin: 0; color: var(--texte-carte); }
.bouton-edition, button.bouton-edition {
  align-self: flex-end; width: auto; margin: 0 0 4px; background: var(--fond); color: var(--texte);
  border: 1px solid var(--bord-fort);
}
.bouton-edition:hover { background: #F3F6F4; color: var(--texte); }
.bouton-edition.actif, .bouton-edition.actif:hover { background: var(--vert); color: #FFFFFF; border-color: var(--vert); }
.carnet-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.puce { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--fond); font-size: 14px; color: var(--texte-carte); }
.frise-corps .puce { background: #F3F6F4; }

.carnet-onglets {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; margin: 12px -4px; padding: 8px 4px;
  overflow-x: auto; scrollbar-width: none; background: var(--fond);
}
.carnet-onglets::-webkit-scrollbar { display: none; }
button.carnet-onglet {
  flex: none; width: auto; margin: 0; padding: 0 16px; border-radius: 999px; font-weight: 700;
  background: #F3F6F4; color: var(--texte-doux);
}
button.carnet-onglet:hover { background: var(--bord); color: var(--texte); }
button.carnet-onglet[aria-selected=true] { background: var(--texte); color: #FFFFFF; }
button.carnet-onglet.ajout { background: var(--fond); border: 1.5px dashed #9FD3BE; color: var(--vert); }

.carnet-panneau { display: flex; flex-direction: column; gap: 14px; }
.jour-titre { margin: 0; font-size: 1.5rem; }
.jour-resume { margin: -8px 0 0; color: var(--texte-discret); }
.progression { height: 6px; border-radius: 999px; background: #EEF2F0; overflow: hidden; }
.progression-barre { height: 100%; width: 0; border-radius: 999px; background: var(--vert); }
.frise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.frise-etape { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.frise-etape:last-child { border-bottom: 0; }
.frise-heure { padding-top: 3px; font-size: 14px; font-weight: 700; color: var(--encre, var(--vert)); font-variant-numeric: tabular-nums; }
.frise-titre { margin: 0; font-family: var(--police-texte); font-size: 1.05rem; }
.frise-detail { margin: 4px 0 0; color: var(--texte-carte); font-size: 15px; white-space: pre-line; }
.frise-etape.fait .frise-titre { color: var(--texte-discret); text-decoration: line-through; }
button.coche {
  width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%;
  background: var(--fond); border: 1.5px solid var(--bord-fort);
}
button.coche:hover { background: #F3F6F4; }
button.coche[aria-pressed=true] { background: var(--vert); border-color: var(--vert); }
button.coche[aria-pressed=true]::after { content: ""; display: block; width: 12px; height: 7px; margin: -3px auto 0; border: solid #FFFFFF; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

.bloc-choix { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1.5px dashed var(--bord-fort); }
.bloc-choix h3 { margin: 0; font-size: 1.15rem; }
.bloc-choix .discret { margin: 0; }
.choix-ligne { display: flex; gap: 8px; align-items: stretch; }
button.choix-option {
  flex: 1; min-width: 0; justify-content: flex-start; gap: 12px; margin: 0; padding: 10px 14px; text-align: left;
  background: var(--fond); color: var(--texte); font-weight: 400; border: 1.5px solid var(--bord-fort); border-radius: 14px;
}
button.choix-option:hover { background: #F7F9F8; color: var(--texte); }
button.choix-option.retenu { border-color: var(--encre, var(--vert)); background: var(--teinte, var(--menthe)); }
.choix-rond { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--bord-fort); background: var(--fond); }
.retenu .choix-rond { border: 6px solid var(--encre, var(--vert)); }
.choix-textes { display: flex; flex-direction: column; }
.choix-nom { font-weight: 700; }
.choix-note { font-size: 14px; color: var(--texte-carte); }
.choix-voir { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 14px; border: 1px solid var(--bord); font-weight: 700; text-decoration: none; }

.carte-info { padding: 16px; border: 1px solid var(--bord); border-radius: 16px; }
.carte-info h3 { margin: 0 0 6px; font-size: 1.15rem; }
.liste-coches { list-style: none; margin: 0; padding: 0; }
.liste-coches li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.liste-coches li:last-child { border-bottom: 0; }
.coche-texte { display: flex; flex-direction: column; }
.coche-texte small { color: var(--texte-discret); font-size: 14px; }
.liste-coches li.fait .coche-texte { color: var(--texte-discret); text-decoration: line-through; }
.liste-adresses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adresse { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px; border: 1px solid var(--bord); border-radius: 16px; }
.adresse-textes { display: flex; flex-direction: column; min-width: 0; }
.adresse-textes small { color: var(--texte-discret); font-size: 14px; }
.adresse-actions { display: flex; gap: 8px; }
.adresse-actions .bouton-contour { min-height: 44px; }

/* Préparer un voyage : invitation, votes, résultats */
.bouton-large, form > button.bouton-large { width: 100%; min-height: 50px; margin-top: 1rem; }
.carte-accueil form { margin: 0; }
.logo-petit .logo-mot { font-size: 22px; }
.voyage-message { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--rose); white-space: pre-line; }
.rubrique { display: flex; flex-direction: column; gap: 10px; }
.rubrique h2 { margin: 0; font-size: 1.35rem; }
.rubrique .discret { margin: 0; }
.proposition { padding: 12px 0; border-top: 1px solid var(--bord); }
.proposition h3 { margin: 0 0 4px; font-size: 1.1rem; }
.proposition p { margin: 0 0 6px; color: var(--texte-carte); font-size: 15px; }
.proposition-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--vert); }
.votes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
button.vote { width: auto; margin: 0; padding: 0 6px; font-size: 14px; background: var(--fond); color: var(--texte-doux); border: 1.5px solid var(--bord-fort); }
button.vote:hover { background: #F3F6F4; color: var(--texte); }
button.vote-1[aria-pressed=true], .vote-cellule.vote-1 { background: var(--rose-fonce); border-color: var(--rose-fonce); color: #FFFFFF; }
button.vote-2[aria-pressed=true], .vote-cellule.vote-2 { background: var(--vert); border-color: var(--vert); color: #FFFFFF; }
button.vote-3[aria-pressed=true], .vote-cellule.vote-3 { background: #E3E8E5; border-color: var(--texte-discret); color: var(--texte); }
button.vote-4[aria-pressed=true], .vote-cellule.vote-4 { background: var(--fond); border-color: var(--texte); color: var(--texte); text-decoration: line-through; }
.question { margin: 0; }
.liste-simple { margin: 0; padding-left: 1.2rem; }
.liste-simple li { margin: 4px 0; }
.carte-info h4 { margin: 10px 0 4px; }
.commentaire { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #F3F6F4; }
.commentaire p { margin: 4px 0 0; white-space: pre-line; }
.resultats td.vote-cellule { font-size: 13px; text-align: center; }

/* Mode « Modifier » */
.carte-edition { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px dashed var(--bord-fort); border-radius: 14px; background: #FBFCFB; }
.champ { display: flex; flex-direction: column; gap: 2px; margin: 0; font-weight: 400; flex: none; }
.champs-ligne > .champ { flex: 1 1 12rem; }
.champs-ligne > .champ.court { flex: 0 1 10rem; }
.champ-libelle { font-size: 14px; font-weight: 700; color: var(--texte-doux); }
.champ-aide { font-size: 14px; color: var(--erreur); }
.champs-ligne { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.carnet-entete .champ input, .carnet-entete .champ textarea { background: var(--fond); }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
button.mini { width: auto; min-width: 44px; margin: 0; padding: 0 12px; background: var(--fond); color: var(--texte); border: 1px solid var(--bord-fort); font-weight: 400; }
button.mini:hover { background: #F3F6F4; color: var(--texte); }
button.mini.danger { color: var(--erreur); border-color: #E8B9C1; }
.carnet-panneau > button.bouton-pointilles, .bloc-choix > button.bouton-pointilles, .carte-info > button.bouton-pointilles {
  width: 100%; min-height: 52px; margin: 0; background: none;
}
.carnet-panneau > button.danger { align-self: flex-start; width: auto; }

/* --- Téléphone : barre de navigation en bas, contenu en une colonne -------------- */

@media (max-width: 700px) {
  body { font-size: 16px; }
  .logo-mot { font-size: 22px; }
  .pastille-beta { font-size: 10px; letter-spacing: 1px; padding: 3px 8px; white-space: nowrap; }

  .bandeau { padding: 24px 16px 26px; }
  .bandeau-interieur.centre { text-align: left; }
  .bandeau h1 { font-size: 1.75rem; }
  .bandeau .slogan { font-size: 1.25rem; }
  .bandeau::after { display: none; }
  .bandeau-categorie { padding-top: 8px; }
  .bandeau-idees { font-size: 15px; }
  .recherche { margin-top: 14px; }
  .champ-recherche { min-height: 52px; padding: 0 14px; border-radius: 14px; }
  .champ-recherche input { min-height: 48px; font-size: 16px; }
  .page-bibliotheque { padding: 20px 16px 24px; }
  .blocs-categories { grid-template-columns: 1fr; gap: 12px; }
  .votes { grid-template-columns: repeat(2, 1fr); }
  .bloc-categorie { padding: 16px; }
  .zone-titre h2 { font-size: 1.4rem; }
  .grille { grid-template-columns: 1fr; gap: 14px; }
  .carte-outil { padding: 16px; }
  .vide { padding: 28px 18px; }
  .page-accueil { padding-top: 10vh; }
  .logo-grand .logo-mot { font-size: 40px; }
}

@media (max-width: 340px) {
  .pastille-beta { display: none; }
}

/* --- Favoris, accueil, fiches : éléments communs au téléphone et à l'ordinateur ------ */

.teinte-bleu { --teinte: #E4E6F4; --encre: #3E4A8A; --clair: #B9C0E6; }
.icone.mini { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.icone.mini svg { width: 17px; height: 17px; }
.icone.mini .icone-barres { display: none; }
.etoile-form { margin: 0; flex: none; }
button.etoile {
  width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%;
  background: none; color: #7E8B86; font-size: 22px; font-weight: 400; line-height: 1;
}
button.etoile:hover { background: #F3F6F4; color: var(--texte); }
button.etoile.active, button.etoile.active:hover { color: #A86F0F; }
.etoile-form.grande button.etoile { font-size: 28px; }
.vue-ordi { display: none; }

.bonjour { position: relative; margin: 0 0 4px; color: var(--texte-doux); font-size: 1.05rem; }
.accueil-bloc { margin-bottom: 28px; }
.accueil-bloc h2 { margin: 0 0 14px; font-size: 1.4rem; }
.accueil-bloc .zone-titre { margin-bottom: 14px; }
.accueil-bloc .zone-titre h2 { margin: 0; font-size: 1.4rem; }
.grille-favoris, .grille-idees { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.carte-favori { position: relative; display: flex; border: 1px solid var(--bord); border-radius: 18px; }
.carte-favori-lien { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px; color: var(--texte); text-decoration: none; }
.carte-favori:hover { border-color: var(--bord-fort); box-shadow: 0 4px 16px rgba(36, 49, 44, .10); }
.carte-favori .etoile-form { position: absolute; top: 10px; right: 10px; }
.carte-favori-nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; }
.carte-favori-etat { font-size: 14px; color: var(--texte-doux); }
.carte-trouver {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 120px; padding: 18px;
  border: 1.5px dashed var(--bord-fort); border-radius: 18px; color: var(--vert); font-weight: 700; text-decoration: none;
}
.puces-outils { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.puce-outil { display: flex; align-items: center; border-radius: 14px; background: #F4F8F6; padding-right: 2px; }
.puce-outil a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 10px; color: var(--texte); text-decoration: none; }
.carte-idee { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 18px; background: var(--teinte); color: var(--texte); text-decoration: none; }
.carte-idee:hover { color: var(--texte); box-shadow: 0 2px 10px rgba(36, 49, 44, .12); }
.carte-idee-nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; }
.carte-idee-texte { font-size: 15px; line-height: 1.4; color: var(--texte-carte); }

.grille-projets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte-projet-lien {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px; border: 1px solid var(--bord); border-radius: 18px;
  color: var(--texte); text-decoration: none;
}
.carte-projet-lien:hover { border-color: var(--bord-fort); box-shadow: 0 2px 10px rgba(36, 49, 44, .08); color: var(--texte); }
.carte-projet-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carte-projet-outil { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--vert); }
.carte-projet-titre { font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; }
.carte-projet-detail { font-size: 14px; color: var(--texte-discret); }
.carte-projet-ouvrir { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--vert); color: #FFFFFF; font-weight: 700; }
.carte-commencer { min-height: 80px; }

.photos-admin .photo-admin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--bord); }
.photos-admin img { border-radius: 8px; height: auto; }
.photos-admin form { margin: 0; flex: 1; }
.photos-admin button { width: auto; margin: 0; }
.photos-admin input[type=file] { min-height: 44px; }


/* --- Panneau « Personnaliser » de l'atelier (barre de gauche sur ordinateur, feuille sur téléphone) --- */

.atelier-titre { margin: 4px 4px 6px; font-size: 1.4rem; }
.laterale-titre.gratuit { color: var(--vert); }
.laterale-titre.trame-plus { display: flex; align-items: center; justify-content: space-between; color: var(--brun); }
.option-carte { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--fond); border: 1px solid var(--bord); }
.option-nom { flex: 1; text-align: left; }
.palettes { display: flex; gap: 10px; }
button.palette { display: flex; width: auto; min-height: 44px; margin: 0; padding: 0; border-radius: 10px; overflow: hidden; background: none; border: 2px solid transparent; }
button.palette span { display: block; width: 20px; height: 40px; }
button.palette span:first-child { background: var(--teinte); }
button.palette span:last-child { background: var(--encre); }
button.palette[aria-pressed=true] { border-color: var(--texte); }
button.option {
  width: 100%; min-height: 48px; margin: 0; padding: 0 12px; justify-content: flex-start; gap: 12px;
  background: var(--fond); color: var(--texte); font-weight: 400; border: 1px solid var(--bord); border-radius: 12px;
}
button.option:hover { background: #F7F9F8; color: var(--texte); }
button.option:disabled { cursor: not-allowed; color: var(--texte-discret); }
button.option.payante { border-color: #F5C48D; }
.option-picto { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--menthe); color: var(--vert); font-weight: 700; }
.payante .option-picto { background: var(--peche); color: var(--brun); }
.tag-bientot, .tag-plus { padding: 2px 8px; border-radius: 999px; background: var(--peche); color: var(--brun); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.atelier-note { margin: 4px; }
.laterale-titre { margin: 14px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-discret); }
.atelier-boutons { display: inline-flex; align-items: center; }
.avec-atelier .bouton-edition.actif { display: none; }   /* « Terminer » est déjà dans la barre du haut */

/* --- Ordinateur (1024 px et plus) : barre latérale, fiche d'outil, atelier ------------- */

.laterale-ordi { display: none; }

@media (min-width: 1024px) {
  body.avec-nav { padding-bottom: 0; }
  body.avec-nav.avec-laterale { padding-left: 272px; }
  body.avec-nav.avec-atelier { padding-left: 310px; background: #F4F8F6; }
  .avec-nav .entete, .avec-nav .nav-principale { display: none; }
  .vue-telephone { display: none !important; }
  .vue-ordi { display: block; }

  .laterale-ordi {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: 272px;
    display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; overflow-y: auto;
    background: #FAF6F7; border-right: 1px solid #EDE3E6;
  }
  .atelier-options { width: 310px; padding: 20px 16px; gap: 8px; }
  .laterale-ordi .marque { padding: 0 8px 10px; }
  .laterale-ordi .logo-mot { font-size: 22px; }
  .laterale-recherche { margin: 0 0 8px; }
  .laterale-recherche label {
    display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; padding: 0 10px;
    border-radius: 10px; background: var(--fond); border: 1px solid var(--bord); color: var(--vert); font-weight: 400;
  }
  .laterale-recherche label:focus-within { outline: 3px solid var(--vert); outline-offset: 1px; }
  .laterale-recherche input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; outline: none; background: transparent; font-size: 15px; }
  .laterale-ligne {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px;
    color: var(--texte); text-decoration: none;
  }
  .laterale-ligne:hover { background: #F2EAEC; color: var(--texte); }
  .laterale-ligne[aria-current=page] { background: var(--rose); color: var(--rose-fonce); font-weight: 700; }
  .laterale-ligne.retour { font-weight: 700; }
  .laterale-ligne.laterale-section { margin-top: 12px; font-weight: 700; }
  .laterale-etoile { display: inline-flex; justify-content: center; width: 18px; color: #A86F0F; }
  .laterale-ligne.laterale-section[aria-current=page] .laterale-etoile { color: var(--rose-fonce); }
  .laterale-ligne .nombre { margin-left: auto; font-size: 13px; color: var(--texte-discret); }
  .laterale-titre { margin: 14px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-discret); }
  .laterale-vide { margin: 0 10px; font-size: 14px; color: var(--texte-discret); }
  .laterale-liste-cat, .laterale-outils { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .point { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--clair); }
  .laterale-outil { display: flex; align-items: center; border-radius: 12px; border: 1.5px solid transparent; }
  .laterale-outil.choisi { background: var(--fond); border-color: #EFC0CA; }
  .laterale-outil > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; color: var(--texte); text-decoration: none; }
  .laterale-outil:hover { background: #F2EAEC; }
  .laterale-outil-textes { display: flex; flex-direction: column; min-width: 0; }
  .laterale-outil-nom { font-weight: 700; font-size: 15px; }
  .laterale-outil-etat { font-size: 13px; color: var(--texte-discret); }
  .laterale-outil button.etoile { width: 40px; height: 40px; min-height: 40px; font-size: 18px; }
  .laterale-categorie { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 14px 12px; border-radius: 14px; background: var(--teinte); }
  .laterale-categorie-nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.3rem; }
  .laterale-categorie-idees { font-size: 14px; line-height: 1.35; color: var(--texte-carte); }
  .laterale-compte { position: relative; margin-top: auto; padding-top: 10px; border-top: 1px solid #EDE3E6; }
  .laterale-compte summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border-radius: 10px; cursor: pointer; }
  .laterale-compte summary::-webkit-details-marker { display: none; }
  .laterale-compte summary:hover { background: #F2EAEC; }
  .laterale-compte .initiale { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rose); font-weight: 700; }
  .laterale-compte-textes { display: flex; flex-direction: column; }
  .laterale-compte-textes span { font-size: 13px; color: var(--texte-discret); }
  .laterale-compte-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; padding: 8px;
    border-radius: 14px; background: var(--fond); border: 1px solid var(--bord); box-shadow: 0 8px 24px rgba(36, 49, 44, .14);
  }
  .laterale-compte-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--texte); text-decoration: none; }
  .laterale-compte-menu a:hover { background: #F3F6F4; }
  .laterale-compte-menu form { margin: 6px 0 0; }
  .laterale-compte-menu form > button[type=submit] { width: 100%; margin: 0; }

  /* Accueil */
  .bandeau-accueil { padding: 36px 48px 32px; }
  .bandeau-accueil h1 { font-size: 2.2rem; }
  .page-accueil-ordi { max-width: 1120px; margin: 0; padding: 28px 48px; }

  /* Page catégorie : la fiche de l'outil choisi, l'aperçu à droite */
  .page-categorie { max-width: none; margin: 0; padding: 0; }
  .page-categorie > .alerte { margin: 16px 40px 0; }
  .fiche-outil { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; min-height: 100vh; }
  .fiche { display: flex; flex-direction: column; gap: 22px; padding: 28px 40px 40px; }
  .fil { margin: 0; font-size: 14px; color: var(--texte-discret); }
  .fiche-tete { display: flex; align-items: center; gap: 18px; }
  .fiche-titres { flex: 1; min-width: 0; }
  .fiche-titres h1 { margin: 0; font-size: 34px; }
  .fiche-titres .slogan { margin: 4px 0 0; font-size: 1.3rem; }
  .fiche-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .fiche-action form { margin: 0; }
  button.bouton-commencer, .bouton.bouton-commencer { width: auto; min-height: 52px; margin: 0; padding: 0 26px; border-radius: 12px; font-size: 17px; }
  .bouton-commencer span { font-size: 22px; }
  .lien-projets { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
  .badge-bientot { padding: 6px 14px; border-radius: 999px; background: #F3F6F4; font-weight: 700; color: var(--texte-doux); }
  .fiche-action .essai-admin { flex-basis: 100%; }
  .fiche-presentation { margin: 0; max-width: 42rem; font-size: 17px; line-height: 1.55; color: var(--texte-carte); white-space: pre-line; }
  .fiche-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .fiche-photos li { display: flex; flex-direction: column; gap: 6px; }
  .fiche-photos img, .photo-attente { display: flex; align-items: center; justify-content: center; width: 100%; height: 140px; border-radius: 14px; object-fit: cover; background: var(--teinte); }
  .fiche-legende { font-size: 14px; color: var(--texte-doux); }
  .fiche-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
  .fiche-points li::before { content: "✓ "; color: var(--vert); font-weight: 700; }
  .fiche-apercu {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px;
    background: #F4F8F6; border-left: 1px solid var(--bord);
  }
  .fiche-apercu-tete { display: flex; align-items: baseline; justify-content: space-between; }
  .fiche-apercu-tete h2 { margin: 0; font-size: 1.25rem; }
  .fiche-apercu-tete span { font-size: 14px; color: var(--texte-discret); }
  .cadre-telephone { flex: 1; min-height: 0; border: 8px solid var(--texte); border-radius: 30px; overflow: hidden; background: var(--fond); }
  .cadre-telephone iframe { display: block; width: 100%; height: 100%; border: 0; }
  .vide-apercu { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--texte-discret); }
  .fiche-apercu .discret { margin: 0; text-align: center; }

  /* Atelier : options à gauche, l'outil en construction à droite */

  .avec-atelier .page-carnet { max-width: 880px; padding-top: 0; }
  .avec-atelier .carnet-haut {
    position: sticky; top: 0; z-index: 10; margin: 0 0 18px; padding: 10px 16px;
    background: var(--fond); border: 1px solid var(--bord); border-top: 0; border-radius: 0 0 14px 14px;
  }
  .avec-atelier .carnet-haut .lien-retour { display: none; }
  .avec-atelier .carnet-onglets { position: static; }
  .atelier-nom { font-weight: 700; }
  .vue-ordi.atelier-nom, .atelier-boutons .vue-ordi { display: inline-flex; }
  .atelier-boutons { margin-left: auto; gap: 10px; }
  .atelier-boutons button { width: auto; min-height: 44px; margin: 0; }
  .avec-atelier .carnet { padding: 20px; border-radius: 18px; background: var(--fond); box-shadow: 0 4px 18px rgba(36, 49, 44, .08); }
  .carnet.en-telephone { max-width: 390px; margin: 0 auto; border: 8px solid var(--texte); border-radius: 30px; }
}

/* --- Téléphone et tablette : éléments des pages (affichés seulement sous 1024 px, via .vue-telephone) ---- */

.carte-outil .nom-lien { color: var(--texte); text-decoration: none; }
.carte-outil .nom-lien:hover { color: var(--vert); }
.icone.blanche { background: var(--fond); }
.icone.moyenne { width: 48px; height: 48px; border-radius: 14px; }
.icone.moyenne svg { width: 26px; height: 26px; }
.icone.appli { width: 60px; height: 60px; border-radius: 17px; }
.icone.appli svg { width: 32px; height: 32px; }
.icone.tel-fiche { width: 64px; height: 64px; border-radius: 18px; }
.icone.tel-fiche svg { width: 34px; height: 34px; }

/* Accueil */
.accueil-tel { display: flex; flex-direction: column; gap: 26px; }
.tel-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.tel-titre h2 { margin: 0; font-size: 1.3rem; }
.tel-titre a { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 700; text-decoration: none; }
.defile-projets {
  list-style: none; display: flex; gap: 12px; margin: 0 -16px; padding: 2px 16px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
}
.defile-projets::-webkit-scrollbar { display: none; }
.defile-projets li { flex: none; width: 200px; scroll-snap-align: start; }
.vignette-projet {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: 18px;
  background: var(--teinte); color: var(--texte); text-decoration: none;
}
.vignette-projet:hover { color: var(--texte); }
.vignette-projet .icone { margin-bottom: 6px; }
.vignette-titre { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.vignette-outil { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--encre); }
.vignette-etat { font-size: 14px; color: var(--texte-carte); }
.applis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 16px 8px; }
.appli { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texte); text-decoration: none; text-align: center; font-size: 13px; line-height: 1.25; }
.appli:hover { color: var(--texte); }
.appli-plus {
  display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 17px;
  border: 1.5px dashed var(--bord-fort); color: var(--vert); font-size: 28px; font-weight: 400;
}
.appli-ajouter { color: var(--vert); font-weight: 700; }
.lignes-idees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ligne-idee {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--bord); border-radius: 16px;
  color: var(--texte); text-decoration: none;
}
.ligne-idee:hover { color: var(--texte); border-color: var(--bord-fort); }
.ligne-idee-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ligne-idee-textes span { font-size: 14px; line-height: 1.4; color: var(--texte-carte); }
.ligne-idee .picto { color: var(--texte-discret); }

/* Mes projets */
.tel-h1 { margin: 4px 0 14px; font-size: 1.9rem; }
.onglets-pilules { display: flex; gap: 8px; margin: 0 0 16px; }
.onglets-pilules a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #F3F6F4; color: var(--texte-doux); font-weight: 700; text-decoration: none;
}
.onglets-pilules a[aria-current=page] { background: var(--texte); color: #FFFFFF; }
.liste-projets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ligne-projet { position: relative; display: flex; align-items: center; gap: 4px; padding: 12px 6px 18px 12px; border: 1px solid var(--bord); border-radius: 18px; }
.ligne-projet-lien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--texte); text-decoration: none; }
.ligne-projet-lien:hover { color: var(--texte); }
.ligne-projet-textes { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ligne-projet-textes strong { font-family: var(--police-titre); font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.ligne-projet-textes span { font-size: 14px; color: var(--texte-discret); }
.barre-progression {
  position: absolute; left: 12px; bottom: 8px; width: calc(100% - 24px); height: 4px;
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: #EEF2F0; overflow: hidden; color: var(--encre);
}
.barre-progression::-webkit-progress-bar { background: #EEF2F0; }
.barre-progression::-webkit-progress-value { background: var(--encre); border-radius: 999px; }
.barre-progression::-moz-progress-bar { background: var(--encre); border-radius: 999px; }
.menu-projet { position: relative; flex: none; }
.menu-projet > summary {
  list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: var(--texte-doux);
}
.menu-projet > summary::-webkit-details-marker, .menu-projet-etape > summary::-webkit-details-marker { display: none; }
.menu-projet[open] > summary { background: #F3F6F4; color: var(--texte); }
.menu-projet-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 15; width: min(18rem, calc(100vw - 48px));
  display: flex; flex-direction: column; padding: 8px; border-radius: 14px;
  background: var(--fond); border: 1px solid var(--bord); box-shadow: 0 8px 24px rgba(36, 49, 44, .16);
}
.menu-projet-etape > summary { list-style: none; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; }
.menu-projet-etape > summary:hover { background: #F3F6F4; }
.menu-projet-etape > summary.rouge { color: var(--erreur); font-weight: 700; }
.menu-projet-etape form { margin: 0; padding: 4px 8px 8px; }
.menu-projet-etape p { margin: 0 0 4px; font-size: 15px; }
.menu-projet-etape form > button[type=submit] { margin-top: .6rem; }
form > button.bouton-supprimer[type=submit], .bouton-supprimer { background: var(--erreur); }
form > button.bouton-supprimer[type=submit]:hover { background: #82202F; }
.tel-vide { margin: 8px 0 0; color: var(--texte-doux); }

/* Fiche d'un outil */
.fiche-tel { display: flex; flex-direction: column; gap: 18px; }
.fiche-tel-haut { display: flex; align-items: center; justify-content: space-between; }
.fiche-tel-tete { display: flex; align-items: center; gap: 14px; }
.fiche-tel-tete h1 { margin: 0; font-size: 1.6rem; }
.fiche-tel-tete .slogan { margin: 2px 0 0; font-size: 1.2rem; }
.fiche-tel .fiche-presentation { margin: 0; line-height: 1.55; color: var(--texte-carte); white-space: pre-line; }
.carrousel-photos {
  position: relative; list-style: none; display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
}
.carrousel-photos::-webkit-scrollbar { display: none; }
.carrousel-photos li { flex: none; width: 230px; display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; font-size: 14px; color: var(--texte-doux); }
.carrousel-photos img { display: block; width: 230px; height: 300px; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--bord); }
.carrousel-points { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.carrousel-points span { width: 7px; height: 7px; border-radius: 4px; background: var(--bord-fort); transition: width .2s; }
.carrousel-points span.actif { width: 18px; background: var(--rose-fonce); }
.bouton.bouton-apercu { margin: 0; font-weight: 700; }
.fiche-tel-action {
  position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 5;
  margin: 0 -16px; padding: 10px 16px; background: var(--fond);
}
.fiche-tel-action form { margin: 0; }
.fiche-tel-action button, .fiche-tel-action .bouton { width: 100%; min-height: 54px; margin: 0; border-radius: 14px; font-size: 1.05rem; }
.fiche-tel-bientot { margin: 0; padding: 14px; border-radius: 14px; background: #F3F6F4; text-align: center; color: var(--texte-doux); }

/* --- Téléphone et tablette (moins de 1024 px) : barre du bas Accueil · Mes projets · Bibliothèque ------ */

@media (max-width: 1023.98px) {
  .entete { flex-wrap: nowrap; padding: 8px 16px; }
  .entete-gauche { flex-wrap: nowrap; gap: 10px; }
  .entete-droite { display: none; }
  .menu-compte { display: block; }

  .nav-principale {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 0;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    background: var(--fond); border-top: 1px solid var(--bord);
  }
  .nav-principale a {
    flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    min-height: 56px; padding: 0 4px; border-radius: 0; font-size: 13px; color: var(--texte-doux);
  }
  .nav-principale a:hover { background: none; }
  .nav-principale a[aria-current=page], .nav-principale a[aria-current=page]:hover { color: var(--rose-fonce); }
  .nav-principale a[aria-current=page] .plein { fill: var(--rose); }
  /* Le contenu ne passe jamais sous la barre (zone sûre du bas comprise). */
  body.avec-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .page-bibliotheque { padding: 20px 16px 24px; }
  .titre-ordi { display: none; }
  .bandeau-bibliotheque { background: var(--fond); padding: 18px 16px 0; }
  .bandeau-bibliotheque::before, .bandeau-bibliotheque::after { display: none; }
  .bandeau-bibliotheque .champ-recherche { box-shadow: none; border: 1px solid var(--bord-fort); }
  .page-categorie:has(.fiche-tel) { padding-bottom: 0; }

  /* Atelier : barre du haut (Mes projets, Enregistré, Terminer), l'outil plein écran, la feuille « Personnaliser ». */
  body.avec-atelier .entete, body.avec-atelier .nav-principale { display: none; }
  body.avec-nav.avec-atelier { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .avec-atelier .carnet-haut {
    position: sticky; top: 0; z-index: 10; flex-wrap: nowrap; margin: -1.5rem -1rem 12px; padding: 8px 12px 8px 16px;
    background: var(--fond); border-bottom: 1px solid var(--bord);
  }
  .avec-atelier .carnet-haut .lien-retour { flex: none; }
  .avec-atelier .carnet-etat { flex: 1; min-width: 0; font-size: 13px; color: var(--vert); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avec-atelier .carnet-etat.alerte-etat { white-space: normal; color: var(--erreur); }
  .atelier-boutons button { width: auto; min-height: 44px; margin: 0; padding: 0 18px; }
  .avec-atelier .carnet-onglets { top: 61px; }

  .atelier-options {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 82vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px; padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    background: #FAF6F7; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 24px rgba(36, 49, 44, .16);
    transform: translateY(calc(100% - 64px - env(safe-area-inset-bottom))); transition: transform .25s ease;
  }
  .atelier-options.ouverte { transform: none; }
  .atelier-options:not(.ouverte) > :not(.feuille-poignee) { visibility: hidden; }
  .atelier-options .laterale-ligne.retour, .atelier-options .atelier-titre { display: none; }
  .atelier-options .laterale-titre { margin: 8px 4px 0; }
  button.feuille-poignee {
    position: sticky; top: 0; z-index: 1; flex: none; flex-direction: column; gap: 8px; width: auto; min-height: 64px;
    margin: 0 -16px; padding: 8px 16px 10px; background: #FAF6F7; color: var(--texte); font-size: 1.05rem; border-radius: 22px 22px 0 0;
  }
  button.feuille-poignee:hover { background: #FAF6F7; color: var(--texte); }
  .atelier-options button.option.payante:disabled, .atelier-options .laterale-titre.trame-plus { opacity: .6; }
  .feuille-poignee span { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--bord-fort); }
}

@media (min-width: 1024px) {
  .titre-tel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-options, .carrousel-points span { transition: none; }
}
/* --- Couleurs des catégories : une teinte propre à chacune (pastel / encre foncée / clair) ------------- */

.teinte-voyage { --teinte: #F6DEE3; --encre: #9A3D54; --clair: #EFC0CA; }
.teinte-changement { --teinte: #FBE3C7; --encre: #8F4F14; --clair: #F5C48D; }
.teinte-healthy { --teinte: #D8EEE5; --encre: #2F6450; --clair: #9FD3BE; }
.teinte-challenge { --teinte: #F9D9CF; --encre: #A3442E; --clair: #F0A994; }
.teinte-education { --teinte: #DCE8F5; --encre: #2F5A86; --clair: #A9C6E6; }
.teinte-famille { --teinte: #FAF0C8; --encre: #7A5C0E; --clair: #EBD27A; }
.teinte-evenements { --teinte: #E7DFF3; --encre: #5E4690; --clair: #C3B2E3; }

/* Pastille rouge du nombre de messages non lus (admin). */
.pastille-alerte {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto;
  padding: 0 6px; border-radius: 999px; background: var(--rose-fonce); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1;
}
.menu-compte summary { position: relative; }
.menu-compte summary .pastille-alerte { position: absolute; top: -4px; right: -4px; margin: 0; }
.menu-compte-liste a .pastille-alerte { margin-left: 8px; }

/* Fenêtres de confirmation (<dialog>) */
dialog.dialogue {
  width: min(30rem, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 18px;
  box-shadow: 0 20px 50px rgba(36, 49, 44, .25); color: var(--texte);
}
dialog.dialogue::backdrop { background: rgba(36, 49, 44, .45); }
dialog.dialogue h2 { margin: 0 0 8px; font-size: 1.35rem; }
dialog.dialogue p { margin: 0 0 8px; color: var(--texte-carte); }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dialogue-boutons button, form > .dialogue-boutons button[type=submit] { width: auto; margin: 0; }
form > .dialogue-boutons button.bouton-supprimer[type=submit], .dialogue-boutons .bouton-supprimer { background: var(--rose-fonce); }
.dialogue-boutons .bouton-supprimer:hover { background: #7E2F43; }

/* Messagerie de l'admin */
.page-messagerie h1 { margin-bottom: .25rem; }
.liste-messages { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.message { padding: 16px; border: 1px solid var(--bord); border-radius: 16px; }
.message-nouveau { border-color: var(--bord-fort); box-shadow: 0 2px 10px rgba(36, 49, 44, .08); }
.message-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.etiquette-type { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.type-outil { background: #E7DFF3; color: #5E4690; }
.type-bug { background: #F9D9CF; color: #A3442E; }
.type-idee { background: #DCE8F5; color: #2F5A86; }
.point-nouveau { width: 9px; height: 9px; border-radius: 50%; background: var(--rose-fonce); }
.message-auteur { font-weight: 700; }
.message-date { margin-left: auto; font-size: 14px; color: var(--texte-discret); }
.message-texte { margin: 10px 0 4px; white-space: pre-line; }
.message-pour { margin: 0 0 4px; color: var(--texte-carte); white-space: pre-line; }
.message-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.message-statut label { margin: 0; font-size: 14px; }
.message-statut select { width: auto; min-height: 44px; }
.message-statut > button[type=submit] { width: auto; margin: 0; }
.message-traite { opacity: .7; }

@media (min-width: 1024px) {
  /* Rubriques repliables de la barre latérale */
  .rubrique-laterale { margin-top: 10px; }
  .rubrique-entete { display: flex; align-items: center; gap: 4px; padding: 0 2px 0 0; border-radius: 12px; background: #F1E8EB; }
  .rubrique-entete > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; color: var(--texte); font-weight: 700; text-decoration: none; }
  .rubrique-entete:hover { filter: brightness(.97); }
  .rubrique-laterale.active .rubrique-entete { background: var(--rose); }
  .rubrique-laterale.active .rubrique-entete > a { color: var(--rose-fonce); }
  .pastille-nombre { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--fond); font-size: 12px; font-weight: 700; text-align: center; color: var(--texte-doux); }
  button.rubrique-bascule { flex: none; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; border-radius: 10px; background: none; color: var(--texte-doux); }
  button.rubrique-bascule:hover { background: rgba(255, 255, 255, .7); color: var(--texte); }
  button.rubrique-bascule .picto { transition: transform .2s; }
  .rubrique-laterale.repliee .rubrique-bascule .picto { transform: rotate(-90deg); }
  .rubrique-liste { padding: 4px 0 2px 6px; }
  .laterale-compte summary .pastille-alerte { margin-left: auto; }
  .laterale-compte-menu a .pastille-alerte { margin-left: 8px; }

  /* Dans la fiche d'un outil : bloc rose « Revenir à la catégorie » */
  a.retour-categorie { margin-top: 4px; color: var(--texte); text-decoration: none; border: 1.5px solid transparent; }
  a.retour-categorie:hover { border-color: var(--encre); color: var(--texte); }
  .laterale-categorie-retour { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--encre); }
  .laterale-outil.choisi { border-color: var(--rose-fonce); }

  /* Page catégorie sans outil choisi : bandeau et cartes des outils */
  .page-categorie.page-categorie-liste { padding: 28px 40px; max-width: 1200px; }
  .avec-laterale .bandeau-categorie { padding: 24px 40px 30px; }

  /* Aperçu : Téléphone / Ordinateur, Agrandir */
  .format { display: inline-flex; align-self: center; padding: 3px; border-radius: 12px; background: #E3EBE7; }
  .format button { width: auto; min-height: 36px; margin: 0; padding: 0 12px; gap: 6px; border-radius: 9px; background: none; color: var(--texte-doux); font-size: 14px; }
  .format button:hover { background: rgba(255, 255, 255, .6); color: var(--texte); }
  .format button[aria-pressed=true] { background: var(--fond); color: var(--texte); box-shadow: 0 1px 3px rgba(36, 49, 44, .15); }
  .cadre-apercu { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--fond); }
  .cadre-apercu iframe { display: block; width: 100%; height: 100%; border: 0; }
  /* Version ordinateur dans le panneau étroit : la page à 1280 px, réduite pour tenir dans la largeur. */
  .fiche-apercu .cadre-ordinateur { flex: none; aspect-ratio: 1280 / 800; align-self: stretch; border: 6px solid var(--texte); border-radius: 10px; }
  .fiche-apercu .cadre-ordinateur iframe { width: 1280px; height: 800px; transform: scale(.2525); transform-origin: 0 0; }
  button.bouton-agrandir { gap: 8px; align-self: center; font-weight: 700; }

  .apercu-plein {
    position: fixed; top: 0; right: 0; bottom: 0; left: 272px; z-index: 25;
    display: flex; flex-direction: column; background: #F4F8F6;
  }
  .apercu-plein-barre { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--fond); border-bottom: 1px solid var(--bord); }
  .apercu-plein-barre strong { margin-right: auto; font-family: var(--police-titre); font-size: 1.2rem; }
  .apercu-plein-barre strong span { font-family: var(--police-texte); font-size: 14px; font-weight: 400; color: var(--texte-discret); }
  .apercu-plein-barre form { margin: 0; }
  .apercu-plein-barre button, .apercu-plein-barre .bouton { width: auto; margin: 0; }
  .apercu-plein-barre .bouton-commencer.petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .apercu-plein-scene { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 18px 22px 22px; }
  .apercu-plein .cadre-ordinateur { width: 100%; border: 1px solid var(--bord-fort); border-radius: 12px; box-shadow: 0 8px 30px rgba(36, 49, 44, .12); }
  .apercu-plein .cadre-telephone { flex: none; width: 390px; }
  body.apercu-ouvert { overflow: hidden; }

  /* Mes projets : boutons Ouvrir, Renommer, Supprimer */
  .carte-projet-actions { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 18px; }
  .carte-projet-actions .carte-projet-lien { border: 0; height: auto; }
  .projet-boutons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
  .projet-boutons .bouton, .projet-boutons button { width: auto; min-height: 40px; margin: 0; padding: 0 14px; font-size: 15px; }
  .projet-boutons .bouton-contour { font-weight: 700; gap: 6px; }
  .bouton-contour.bouton-rouge { color: var(--rose-fonce); border-color: #E3A9B6; }
  .bouton-contour.bouton-rouge:hover { background: #FBEDF0; color: var(--rose-fonce); }

  /* Bibliothèque : mosaïque des catégories */
  .vue-ordi.mosaique { display: grid; }
  .mosaique { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 158px; gap: 14px; }
  .tuile-voyage { grid-column: span 2; grid-row: span 2; }
  .tuile-changement { grid-column: span 2; }
  .tuile-categorie > a, .tuile-categorie > button {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    width: 100%; height: 100%; margin: 0; padding: 18px 20px; border-radius: 20px; text-align: left;
    background: var(--teinte); color: var(--texte); text-decoration: none;
  }
  .tuile-categorie > a:hover { color: var(--texte); box-shadow: 0 4px 16px rgba(36, 49, 44, .14); }
  .tuile-dessin { position: absolute; top: 14px; right: 16px; width: 64px; height: 64px; color: var(--encre); }
  .tuile-dessin .plein { fill: var(--clair); }
  .tuile-voyage .tuile-dessin { width: 150px; height: 150px; top: 22px; right: 26px; }
  .tuile-changement .tuile-dessin { width: 80px; height: 80px; }
  .tuile-compte { position: relative; font-size: 13px; font-weight: 700; color: var(--encre); }
  .tuile-nom { position: relative; font-family: var(--police-titre); font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
  .tuile-voyage .tuile-nom { font-size: 2rem; }
  .tuile-phrase { position: relative; max-width: 26rem; font-size: 15px; line-height: 1.4; color: var(--texte-carte); }
  .tuile-suggerer > button {
    align-items: center; justify-content: center; flex-direction: row; gap: 8px;
    background: var(--fond); border: 1.5px dashed var(--bord-fort); color: var(--vert); font-weight: 700; font-size: 1.05rem;
  }
  .tuile-suggerer > button span { font-size: 26px; font-weight: 400; }
  .tuile-suggerer > button:hover { background: #F3F8F6; color: var(--vert); }
}
/* --- Socle commun des outils : atelier en 4 étapes, mise en service, couverture, signalement ------------- */

.atelier-sous-titre { margin: -2px 4px 8px; font-size: 14px; color: var(--texte-discret); }
.etapes-atelier { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.etape-atelier { border-radius: 14px; background: var(--fond); border: 1px solid var(--bord); }
.etape-atelier.courante { border-color: var(--rose-fonce); box-shadow: 0 2px 10px rgba(154, 61, 84, .12); }
button.etape-tete {
  width: 100%; min-height: 56px; margin: 0; padding: 8px 12px; justify-content: flex-start; gap: 12px; text-align: left;
  background: none; color: var(--texte); font-weight: 400; border-radius: 14px;
}
button.etape-tete:hover { background: #F7F4F5; color: var(--texte); }
.etape-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--bord-fort); font-weight: 700; color: var(--texte-doux);
}
.etape-coche { display: none; }
.etape-atelier.courante .etape-num { border-color: var(--rose-fonce); background: var(--rose); color: var(--rose-fonce); }
.etape-atelier.faite .etape-num { border-color: var(--vert); background: var(--vert); color: #FFFFFF; }
.etape-atelier.faite .etape-chiffre { display: none; }
.etape-atelier.faite .etape-coche { display: inline; }
.etape-textes { display: flex; flex-direction: column; min-width: 0; }
.etape-textes small { font-size: 13px; color: var(--texte-discret); }
.etape-corps { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 14px; }
.etape-corps > button[type=button]:not(.option) { width: 100%; margin: 0; gap: 8px; }
.etape-corps > .bouton { margin: 0; }
.etape-note { margin: 0; font-size: 14px; color: var(--texte-carte); }
.trame-plus-boite { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 14px; background: #F3F0F1; opacity: .75; }
.trame-plus-boite .laterale-titre { margin: 0 2px 2px; }
.couverture-miniature { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: 10px; }
.form-couverture { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-couverture.avec-script .sans-script { display: none; }
.form-couverture > button[type=submit] { width: auto; margin: 0; }
.bouton-fichier { position: relative; margin: 0; cursor: pointer; font-weight: 700; }
.bouton-fichier input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bouton-fichier:focus-within { outline: 3px solid var(--vert); outline-offset: 2px; }
.option-carte form { margin: 0; }
.option-carte .discret { font-size: 13px; margin: 0; }
.couverture-projet { margin: 0 0 14px; }
.couverture-projet img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 18px; }

.pastille-statut { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pastille-statut.statut-service { background: var(--menthe); color: var(--vert); }
.point-statut { flex: none; display: inline-block; width: 9px; height: 9px; margin: 0 6px 0 auto; border-radius: 50%; }
.point-statut.statut-service { background: #3E9A74; }
.point-statut.statut-parametrage { background: #E0A040; }
.vignette-etat .point-statut, .groupe-projets h2 .point-statut { margin: 0 6px 0 0; }
.groupe-projets { margin-bottom: 20px; }
.groupe-projets h2 { display: flex; align-items: center; margin: 0 0 10px; font-size: 1.2rem; }
.page-projets .tel-h1 { margin-top: 0; }
.form-reactiver { margin: 0; flex: none; }
.form-reactiver > button[type=submit] { width: auto; margin: 0; min-height: 40px; font-weight: 700; }
.menu-projet-lien {
  display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 10px;
  background: none; color: var(--texte); font-weight: 400; text-decoration: none; text-align: left; justify-content: flex-start;
}
form > button.menu-projet-lien[type=submit] { width: 100%; margin: 0; }
.menu-projet-lien:hover { background: #F3F6F4; color: var(--texte); }
.menu-projet-liste form { margin: 0; }
.menu-outil { position: relative; }

.bouton-signaler { gap: 6px; }
.choix-signalement { border: 0; padding: 0; margin: 4px 0 0; }
.dialogue-pret .pret-contenu { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.dialogue-pret .qr { flex: none; width: 148px; height: 148px; padding: 6px; border-radius: 10px; border: 1px solid var(--bord); background: #FFFFFF; }
.pret-etapes { flex: 1; min-width: 12rem; margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.bandeau-installer {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--menthe);
}
.bandeau-installer p { flex: 1; margin: 0; font-size: 15px; }
.bandeau-installer button { width: auto; margin: 0; }
.bandeau-installer .bouton-lien { min-width: 44px; text-decoration: none; }

/* Cartes des trames : toute la carte ouvre la fiche (lien étiré) ; les boutons gardent leur action. */
.carte-trame { position: relative; transition: box-shadow .15s, border-color .15s; }
.carte-trame:hover { border-color: var(--bord-fort); box-shadow: 0 4px 16px rgba(36, 49, 44, .10); }
.carte-trame .lien-etire::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte-trame .lien-etire:focus-visible { outline: none; }
.carte-trame:has(.lien-etire:focus-visible) { outline: 3px solid var(--vert); outline-offset: 2px; }
.carte-trame .carte-actions, .carte-trame .etoile-form { position: relative; z-index: 1; }
.carte-accroche { font-family: var(--police-slogan); font-style: italic; font-size: 1.1rem; color: var(--texte-doux); }
.carte-trame .description { font-size: 15px; line-height: 1.5; }

/* Messagerie et notifications */
.message-outil { color: var(--texte-doux); }
.message-detail summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--vert); }
.message-contexte { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: #F3F6F4; font-size: 14px; }
.message-contexte dt { font-weight: 700; }
.message-contexte dd { margin: 0; overflow-wrap: anywhere; }
.message-reponse { margin-top: 10px; }
.message-reponse > button[type=submit] { width: auto; margin-top: .5rem; }
.message-archiver { margin-top: 4px; }
.message-en_cours { border-color: var(--bord-fort); }
.menu-compte-liste a .picto, .laterale-compte-menu a .picto { margin-right: 8px; }

@media (max-width: 1023.98px) {
  .avec-atelier .bouton-signaler .libelle-long, .outil-en-service .bouton-signaler .libelle-long { display: none; }
  .avec-atelier .atelier-boutons button[data-apres-enregistrement] { padding: 0 12px; }
  .atelier-options .atelier-sous-titre { display: none; }
  .carnet-haut .atelier-boutons { gap: 6px; }
  .outil-en-service .carnet-haut { position: sticky; top: 0; z-index: 10; background: var(--fond); }
}
@media (min-width: 1024px) {
  .vue-ordi.projet-boutons { display: flex; }
  .ligne-projet { flex-wrap: wrap; padding-bottom: 20px; }
  .ligne-projet .projet-boutons { flex-basis: 100%; padding: 8px 0 0 60px; }
  .outil-en-service .carnet-haut { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .outil-en-service .carnet-haut .lien-retour { margin-left: 0; }
  .atelier-boutons { gap: 10px; }
}
/* Fiche téléphone : captures lisibles (78 % de l'écran, proportions gardées, rien de rogné) et plein écran. */
.carrousel-photos li { width: min(78vw, 320px); }
.carrousel-photos img {
  width: 100%; height: auto; max-height: 70vh; aspect-ratio: auto; object-fit: contain; object-position: top;
  border-radius: 18px; border: 1px solid var(--bord); background: #FFFFFF; cursor: zoom-in;
}
.carrousel-photos img:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
dialog.visionneuse {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 26, 24, .94); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
}
dialog.visionneuse[open] { display: flex; }
dialog.visionneuse::backdrop { background: rgba(20, 26, 24, .94); }
.visionneuse img { max-width: 100vw; max-height: calc(100dvh - 48px); object-fit: contain; border-radius: 12px; }
.visionneuse-aide { color: #FFFFFF; font-size: 14px; opacity: .8; }

@media (min-width: 1024px) {
  /* Ordinateur : les captures (format téléphone) entières, sans rognage. */
  .fiche-photos img { height: 260px; object-fit: contain; background: #F7F4F5; border: 1px solid var(--bord); }
}
.badge-bientot { padding: 6px 14px; border-radius: 999px; background: #F3F6F4; font-weight: 700; color: var(--texte-doux); }

/* Pas de soulignement sur les onglets, cartes, tuiles et menus (survol ou sélection) ; le focus clavier reste visible. */
.nav-principale a, .onglets-pilules a, .laterale-ordi a, .carte-projet-lien, .ligne-projet-lien, .vignette-projet, .appli,
.ligne-idee, .carte-idee, .tuile-categorie > a, .bloc-categorie, .carte-trouver, .menu-projet-lien, .menu-compte-liste a,
.laterale-compte-menu a, .lien-retour, .fleche-retour, .bouton, .tel-titre a, .carte-outil .nom-lien { text-decoration: none; }
.nav-principale a:hover, .onglets-pilules a:hover, .laterale-ordi a:hover, .lien-retour:hover, .bouton:hover { text-decoration: none; }
/* Aperçu déployé (fiche, ordinateur) : il s'ouvre vers la gauche, la barre latérale reste visible. */
@keyframes deployer-apercu { from { clip-path: inset(0 0 0 68%); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 1024px) {
  .apercu-plein:not([hidden]) { animation: deployer-apercu .35s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .apercu-plein:not([hidden]) { animation: none; } }
/* Flèche « Retour » (ordinateur), à gauche du titre de chaque page sauf l'accueil. */
.fleche-retour { display: none; }
@media (min-width: 1024px) {
  .fleche-retour {
    position: absolute; top: 14px; left: 284px; z-index: 15; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--texte);
    box-shadow: 0 1px 4px rgba(36, 49, 44, .12);
  }
  .fleche-retour:hover { background: #FFFFFF; color: var(--vert); }
  body { position: relative; }
  body.avec-laterale .bandeau-interieur, body.avec-laterale main > h1:first-child, body.avec-laterale .tel-h1 { padding-left: 52px; }
  body.avec-laterale .bandeau-interieur.centre { padding-left: 0; }

  /* Page d'aperçu double : ordinateur (2/3) et téléphone (1/3) */
  .page-apercu-double { max-width: none; margin: 0; padding: 14px 24px 24px 76px; height: 100vh; display: flex; flex-direction: column; gap: 14px; }
  .apercu-double-barre { display: flex; align-items: center; gap: 12px; }
  .apercu-double-barre h1 { flex: 1; margin: 0; font-size: 1.5rem; }
  .apercu-double-barre h1 span { font-family: var(--police-texte); font-size: 15px; font-weight: 400; color: var(--texte-discret); }
  .apercu-double-barre form { margin: 0; }
  .apercu-double-barre button, .apercu-double-barre .bouton { width: auto; margin: 0; }
  .apercu-double { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
  .vue-ordi.apercu-double-ordi { display: flex; }
  .apercu-double-ordi .cadre-ordinateur { flex: 1; border: 1px solid var(--bord-fort); border-radius: 12px; box-shadow: 0 8px 30px rgba(36, 49, 44, .10); }
  .apercu-double-tel { display: flex; justify-content: center; min-height: 0; }
  .apercu-double-tel .cadre-telephone { flex: none; width: min(100%, 390px); }
}
@media (max-width: 1023.98px) {
  .page-apercu-double { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 140px); }
  .apercu-double-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .apercu-double-barre h1 { flex: 1 1 100%; margin: 0; font-size: 1.3rem; }
  .apercu-double-barre h1 span { font-size: 14px; font-weight: 400; color: var(--texte-discret); }
  .apercu-double-barre form { margin: 0; }
  .apercu-double-barre button, .apercu-double-barre .bouton { width: auto; margin: 0; }
  .apercu-double, .apercu-double-tel { flex: 1; min-height: 0; display: flex; }
  .apercu-double-tel .cadre-telephone { flex: 1; border-width: 6px; }
}
@media (max-width: 1023.98px) {
  .page-apercu-double .cadre-apercu { display: flex; overflow: hidden; border: 6px solid var(--texte); border-radius: 24px; background: var(--fond); }
  .page-apercu-double iframe { display: block; flex: 1; width: 100%; height: 100%; border: 0; }
}

@media (min-width: 1024px) {
  body.avec-laterale .fiche { padding-left: 76px; }
  body.avec-laterale .page-projets, body.avec-laterale .page-messagerie { padding-top: 24px; }
}