@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
/* =====================================================================
   Ladies Squad : feuille COMPLÈTE du thème (version « éditeur », 12/11/2026).
   À coller SEULE dans la feuille du thème, en remplaçant tout son contenu.
   L'@import doit rester tout en haut du fichier.

   POURQUOI CETTE VERSION
   La cliente modifie ses pages avec l'éditeur du CMS. Celui-ci ne produit que
   ses propres grilles (one-column, two-columns, third-left, three-columns…),
   des cellules <div class="editable"> et des balises simples (titres,
   paragraphes, listes, images, liens). Toute classe posée À L'INTÉRIEUR du
   contenu se perd ou bloque l'édition.
   La mise en forme repose donc UNIQUEMENT sur :
     1. les classes du BLOC (réglages du bloc, hors éditeur) : ls ls-hero…
     2. les grilles de l'éditeur ;
     3. l'ordre des balises (ex. : dans un héros, la 1re image = le fond).
   Les grilles sont aussi mises en forme pour TOUT bloc, avec ou sans classe :
   ce que la cliente crée elle-même prend l'allure du site.
   ===================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
    --ls-bleu: #034eaf;
    --ls-bleu-fonce: #023b85;
    --ls-bleu-pale: #eaf1fb;
    --ls-bleu-doux: #cfddf2;
    --ls-rouge: #b00000;
    --ls-rouge-survol: #8f0000;
    --ls-blanc: #fff;
    --ls-police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ls-condensee: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --ls-largeur: 1320px;
    --ls-rayon: 28px;
    --ls-rayon-photo: 24px;
    --ls-ombre: 0 18px 40px -22px rgba(3, 78, 175, .45);
    /* Échelle unique (revue ui-ux-pro-max du 09/11/2026) */
    --ls-h1: clamp(40px, 5.5vw, 80px);
    --ls-h2: clamp(32px, 3.4vw, 48px);
    --ls-h3: clamp(18px, 1.4vw, 20px);
    --ls-chapeau: clamp(18px, 1.4vw, 20px);
    --ls-corps: clamp(16px, 1.2vw, 17px);
    --ls-petit: 15px;
    --ls-section: clamp(56px, 7vw, 96px);
    --ls-gouttiere: clamp(24px, 3vw, 48px);
    --ls-ecart: 24px;
}

/* ---------- 2. Base ---------- */
*, *:before, *:after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; background: var(--ls-blanc); color: var(--ls-bleu);
    font-family: var(--ls-police); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html { touch-action: manipulation; scroll-behavior: smooth; }
p { font-family: var(--ls-police); }
a, a:visited { color: var(--ls-bleu); }
a:hover, a:focus { color: var(--ls-bleu-fonce); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--ls-police); color: var(--ls-bleu); }
footer .wrapper { max-width: var(--ls-largeur); width: auto; margin: 0 auto; padding: 0 24px; }

/* Accessibilité : focus clavier visible, lien d'évitement */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--ls-bleu); outline-offset: 3px; border-radius: 4px; }
header nav a:focus-visible, footer a:focus-visible, .ls-hero a:focus-visible { outline-color: var(--ls-blanc); }
header nav:has(.button + input:focus-visible) .button { outline: 3px solid var(--ls-blanc); outline-offset: -6px; border-radius: 8px; }
.ls-evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ls-bleu); color: var(--ls-blanc) !important;
    padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none; }
.ls-evitement:focus { top: 0; }

/* ---------- 3. En-tête : logo centré, menu en barre bleue ---------- */
header { display: block; width: auto; margin: 0; background: var(--ls-blanc); }
header .ls-logo { text-align: center; padding: 10px 16px; width: auto; }
header .ls-logo a { display: inline-block; line-height: 0; }
header .ls-logo img { height: 64px; width: auto; }
header nav { position: relative; width: auto; background: var(--ls-bleu); z-index: 20; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { list-style: none; position: relative; }
header nav li:before { content: none; }
header nav li a, header nav li a:visited, header nav li .label {
    display: block; color: var(--ls-blanc); text-decoration: none; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
header nav li a:hover, header nav li a:focus { color: var(--ls-blanc); text-decoration: none; }
header nav .arrow { display: none; }
@media screen and (min-width: 800px) {
    header nav .button, header nav .button + input { display: none; }
    header nav > ul { display: flex; justify-content: center; gap: clamp(20px, 3vw, 44px); padding: 0 16px; }
    header nav > ul > li > a, header nav > ul > li > a:visited, header nav > ul > li > .label {
        font-size: 17px; padding: 18px 0 15px; border-bottom: 3px solid transparent; transition: border-color .2s; }
    header nav > ul > li > a:hover, header nav > ul > li > a:focus, header nav > ul > li.active > a { border-bottom-color: var(--ls-blanc); }
    header nav ul li ul { display: none; position: absolute; left: -16px; top: 100%; min-width: 230px;
        background: var(--ls-bleu); border-radius: 0 0 14px 14px; padding: 8px 0; }
    header nav ul li:hover > ul, header nav ul li:focus-within > ul { display: block; }
    header nav ul li ul a { font-size: 16px; padding: 8px 16px; }
}
@media screen and (max-width: 799px) {
    header .ls-logo img { height: 52px; }
    header nav .button { display: block; padding: 14px 16px; color: var(--ls-blanc); text-align: center; font-weight: 700; font-size: 18px; cursor: pointer; }
    header nav .button:before { content: "Menu  \2630"; white-space: pre; }
    header nav .button + input { position: absolute; left: 0; top: 0; width: 100%; height: 52px; margin: 0; opacity: 0; cursor: pointer; }
    header nav input + ul { display: none; padding: 0 0 10px; }
    header nav input:checked + ul { display: block; }
    header nav li a, header nav li a:visited, header nav li .label { font-size: 17px; padding: 12px 24px; text-align: center; }
    header nav li.active > a { text-decoration: underline; text-underline-offset: 6px; }
    header nav ul li ul { display: block; }
}

/* ---------- 4. Pied de page ---------- */
footer { background: var(--ls-bleu); color: var(--ls-blanc); text-align: center; padding: 30px 0 22px; margin: 0; }
footer .ls-stores { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: center; align-items: center; }
footer .ls-stores a { display: inline-block; line-height: 0; transition: transform .2s; }
footer .ls-stores a:hover { transform: translateY(-3px); }
footer .ls-stores img { height: 52px; width: auto; }
footer .legal { font-size: 14px; margin-top: 10px; color: #dbe6f6; }
footer .legal a { display: inline-block; padding: 12px 4px; }
footer a, footer a:visited, footer a:hover { color: var(--ls-blanc); }

/* =====================================================================
   5. LES BLOCS DU CMS ET LES GRILLES DE L'ÉDITEUR
   Rendu relevé sur ladiessquad.fr : <div class="item-data … wrapper …"><div><div>CONTENU</div></div></div>.
   Le CONTENU est fait des grilles de l'éditeur :
     one-column (centered) · two-columns (third-left, third-right, quarter-left, quarter-right)
     three-columns · four-columns · six-columns · eight-columns, chacune faite de div.editable.
   ===================================================================== */
.item-data, .item-data.wrapper { width: auto !important; max-width: none !important; margin: 0 !important; float: none; }
.item-data > div { max-width: none; width: auto; margin: 0; padding: 0; }
/* La colonne de lecture et la respiration verticale, pour TOUS les blocs (priorité minimale) */
:where(.item-data) > div > div {
    max-width: var(--ls-largeur); margin-left: auto; margin-right: auto;
    padding: calc(var(--ls-section) * .6) 24px; }
:where(.item-data.ls) > div > div { padding-top: var(--ls-section); padding-bottom: var(--ls-section); }
:where(.item-data.ls-plein) > div > div { max-width: none; padding: 0; }

/* Les grilles */
.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns {
    display: grid; gap: var(--ls-gouttiere); align-items: start; }
.one-column { grid-template-columns: minmax(0, 1fr); }
.one-column.centered { text-align: center; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two-columns.third-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.two-columns.third-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.two-columns.quarter-left { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.two-columns.quarter-right { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ls-ecart); }
.six-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ls-ecart); }
.eight-columns { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
/* Deux grilles qui se suivent dans un même bloc */
:is(.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns)
  + :is(.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns) { margin-top: var(--ls-gouttiere); }
/* ── Neutraliser la mise en page des grilles par ui.css (feuille du CMS, chargée AVANT celle-ci) ──
   ui.css (relevé le 12/11/2026) fait des grilles des « flex » à marges négatives, et donne à chaque
   cellule display:inline-block, padding .5em et une LARGEUR en % (50 %, 33,33 %, 25 %… et 50 % pour
   one-column centered). Dans nos grilles, ces % s'appliquaient à la colonne elle-même : chaque cellule
   ne prenait que la moitié ou le tiers de sa place. Les largeurs sont donc remises à « auto », avec
   !important car ui.css emploie des sélecteurs plus précis (.two-columns.third-left > :first-child). */
.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns { margin: 0; flex-wrap: nowrap; }
:is(.one-column, .two-columns, .three-columns, .four-columns, .six-columns, .eight-columns) > * {
    width: auto !important; max-width: 100%; padding: 0; display: block; vertical-align: baseline; }
/* padding SANS !important : il annule le .5em de ui.css (même priorité, cette feuille passe après),
   mais laisse passer les marges intérieures voulues plus bas (cartes, héros, colonne des valeurs). */
/* « centered » : ui.css en fait une colonne de 50 % ; ici, toute la largeur, texte centré
   (sinon les titres de section passent sur deux ou trois lignes) */
.one-column.centered > * { max-width: none; margin-left: 0; margin-right: 0; }
.editable { min-width: 0; }
.editable > :first-child { margin-top: 0; }
.editable > :last-child { margin-bottom: 0; }

/* ---------- 6. Typographie du contenu (tous les blocs) ---------- */
main h1 { font-family: var(--ls-police); font-weight: 800; font-size: var(--ls-h1); letter-spacing: -.04em; line-height: 1.02; margin: 0 0 .3em; }
main h2 { font-family: var(--ls-condensee); font-weight: 400; font-synthesis: none; font-size: var(--ls-h2);
    text-transform: uppercase; letter-spacing: .005em; line-height: 1.05; margin: 0 0 .6em; color: var(--ls-bleu); }
main h3 { font-family: var(--ls-police); font-weight: 700; font-size: var(--ls-h3); letter-spacing: -.01em; line-height: 1.3; margin: 1.2em 0 .5em; }
main h4 { font-family: var(--ls-police); font-weight: 700; font-size: 17px; margin: 1em 0 .4em; }
main p, main li { font-size: var(--ls-corps); line-height: 1.6; }
main p { margin: 0 0 1em; }
main ul, main ol { padding-left: 1.3em; margin: 0 0 1.2em; }
main li { margin: .25em 0; }
main li:before { content: none; }
main strong { font-weight: 700; }
main blockquote { margin: 0 0 1em; padding: .2em 0 .2em 1em; border-left: 4px solid var(--ls-bleu); font-style: italic; font-size: var(--ls-chapeau); }
main .editable a:not(:has(img)) { text-decoration: underline; text-underline-offset: 3px; }
main mark { background: #fff3a6; color: #6b4b00; padding: 0 .3em; border-radius: 4px; outline: 2px dashed #e0b400; }
/* Images : photo arrondie par défaut */
main .editable img { display: inline-block; vertical-align: middle; }
main .editable p:has(> img:only-child) { margin-bottom: 1em; }
main .editable p > img:only-child { display: block; width: 100%; border-radius: var(--ls-rayon-photo); }
/* Badges et logos cliquables : rangée de liens-images */
main .editable p:has(> a > img) { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
main .editable .centered p:has(> a > img), main .one-column.centered p:has(> a > img) { justify-content: center; }
main .editable a:has(> img) { display: inline-block; line-height: 0; transition: transform .2s; }
main .editable a:has(> img):hover { transform: translateY(-3px); }
main .editable a > img { height: 52px; width: auto; border-radius: 0; }

/* Bouton rouge : dans le héros, dans « Comment collaborer », et dans tout bloc de classe « ls-boutons »,
   un LIEN SEUL DANS SON PARAGRAPHE devient un bouton. */
:is(.ls-hero, .ls-collaborer, .ls-boutons) .editable p > a:only-child:not(:has(img)) {
    display: inline-block; background: var(--ls-rouge); color: var(--ls-blanc); text-decoration: none;
    font-weight: 700; font-size: 18px; line-height: 1.2; padding: .75em 1.4em; border-radius: 14px; min-height: 48px;
    transition: background .2s, transform .2s; }
:is(.ls-hero, .ls-collaborer, .ls-boutons) .editable p > a:only-child:not(:has(img)):hover,
:is(.ls-hero, .ls-collaborer, .ls-boutons) .editable p > a:only-child:not(:has(img)):focus {
    background: var(--ls-rouge-survol); color: var(--ls-blanc); transform: translateY(-2px); }

/* =====================================================================
   7. HÉROS  —  bloc « ls ls-plein ls-hero » (+ « ls-hero-court » pour une page secondaire)
   Dans l'éditeur, une seule colonne, dans cet ordre :
     image (le fond) · petite ligne (surtitre) · Titre 1 · ligne d'accroche · texte · lien(s)
   ===================================================================== */
.ls-hero > div > div { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center;
    min-height: clamp(420px, 40vw, 620px); background: #0b2a63; }
.ls-hero.ls-hero-court > div > div { min-height: clamp(260px, 26vw, 380px); }
.ls-hero > div > div:after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(3, 40, 110, .92) 0%, rgba(3, 45, 120, .72) 38%, rgba(3, 45, 120, .15) 70%, rgba(3, 45, 120, 0) 100%); }
.ls-hero .one-column, .ls-hero .editable { position: static; }
.ls-hero .editable { max-width: 860px; padding: 48px clamp(24px, 3vw, 48px); color: var(--ls-blanc); }
/* 1re image = photo de fond */
.ls-hero .editable > p:first-child:has(> img) { position: absolute; inset: 0; margin: 0; z-index: -2; max-width: none !important; }
.ls-hero .editable > p:first-child:has(> img) > img { width: 100%; height: 100%; max-width: none; object-fit: cover;
    object-position: 50% 72%; border-radius: 0; }
.ls-hero .editable > p:has(+ h1) { font-size: var(--ls-petit); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .3em; color: var(--ls-blanc); }
.ls-hero h1 { color: var(--ls-blanc); margin: .05em 0 .25em; }
.ls-hero h1 + p { font-size: var(--ls-chapeau); font-weight: 600; line-height: 1.5; margin: 0 0 .4em; }
.ls-hero .editable p { color: var(--ls-blanc); max-width: 620px; }
.ls-hero .editable p:last-child { margin-bottom: 0; }
.ls-hero .editable p:last-child:has(a) { margin-top: 1.2em; }

/* ---------- 8. Accueil ---------- */
/* Présentation : visuel des téléphones | texte */
.ls-intro .two-columns { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); }
.ls-intro .editable p > img:only-child { border-radius: 0; max-width: 640px; }
.ls-intro .editable p:has(> a > img) { justify-content: space-around; }

/* Phrase d'accroche */
:where(.item-data.ls-citation) > div > div { padding-top: calc(var(--ls-section) * .6); padding-bottom: calc(var(--ls-section) * .6); }
.ls-citation p { font-style: italic; font-weight: 500; letter-spacing: -.035em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; margin: 0; }

/* Photo pleine largeur */
.ls-bandeau p { margin: 0 !important; }
.ls-bandeau .editable p > img:only-child { height: clamp(240px, 34vw, 540px); object-fit: cover; object-position: 50% 40%; border-radius: 0; }

/* Cartes (bloc « ls-cartes », ou « ls-raisons », ancien nom accepté) : chaque cellule d'une grille devient une carte ; son 1er paragraphe est le grand chiffre */
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) > .editable {
    background: var(--ls-bleu-pale); border-radius: var(--ls-rayon); padding: 26px 26px 30px; text-align: center;
    transition: transform .25s, box-shadow .25s; }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) + :is(.two-columns, .three-columns, .four-columns) > .editable { background: var(--ls-bleu-doux); }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) > .editable:hover { transform: translateY(-4px); box-shadow: var(--ls-ombre); }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) > .editable > p:first-child {
    font-weight: 800; font-size: clamp(44px, 4vw, 60px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .25em; }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) > .editable h3 { margin-top: 0; }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) { gap: var(--ls-ecart); }
:is(.ls-cartes, .ls-raisons) :is(.two-columns, .three-columns, .four-columns) + :is(.two-columns, .three-columns, .four-columns) { margin-top: var(--ls-ecart); }

/* Prochaines séances : fond bleu, captures de l'appli avec leur ombre dégradée */
.item-data.ls-seances { background: var(--ls-bleu-doux); }
.ls-seances .three-columns { max-width: 1180px; margin-left: auto; margin-right: auto; gap: clamp(20px, 5vw, 90px); }
.ls-seances .three-columns > .editable { position: relative; margin: 0 18px 18px 0; }
.ls-seances .three-columns > .editable:before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 22px; z-index: 0;
    background: linear-gradient(180deg, rgba(3, 78, 175, 0) 0%, #4a3c8f 55%, #c3384d 100%); }
.ls-seances .three-columns p { margin: 0; position: relative; z-index: 1; }
.ls-seances .three-columns p > img:only-child { border-radius: 20px; aspect-ratio: 369 / 560; object-fit: cover; object-position: 50% 17%;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }

/* Galerie : photos de même hauteur, recadrées */
.ls-galerie .one-column.centered h2 { margin-bottom: .1em; }
.ls-galerie .one-column.centered h2 + p { font-style: italic; font-size: var(--ls-chapeau); }
.ls-galerie :is(.two-columns, .three-columns, .four-columns) { gap: 20px; }
.ls-galerie :is(.two-columns, .three-columns, .four-columns) + :is(.two-columns, .three-columns, .four-columns) { margin-top: 20px; }
.ls-galerie :is(.two-columns, .three-columns, .four-columns) > .editable { overflow: hidden; }
.ls-galerie :is(.two-columns, .three-columns, .four-columns) p { margin: 0; }
.ls-galerie :is(.two-columns, .three-columns, .four-columns) p > img:only-child { height: clamp(200px, 22vw, 330px); object-fit: cover;
    border-radius: 0; transition: transform .3s ease-out; }
.ls-galerie .editable:hover p > img:only-child { transform: scale(1.04); }

/* ---------- 9. Qui sommes-nous ---------- */
.ls-duo .two-columns { gap: clamp(28px, 4.5vw, 72px); }
.ls-duo .editable p > img:only-child { border-radius: clamp(24px, 3vw, 46px); }
.ls-duo strong { font-size: var(--ls-chapeau); line-height: 1.5; }

/* Portraits : 3 colonnes séparées par un filet */
:is(.ls-portraits, .ls-passion) .three-columns { gap: 0; margin-top: 40px; }
:is(.ls-portraits, .ls-passion) .three-columns > .editable { padding: 0 clamp(16px, 3vw, 48px); }
:is(.ls-portraits, .ls-passion) .three-columns > .editable + .editable { border-left: 4px solid var(--ls-bleu);
    border-image: linear-gradient(transparent 4%, var(--ls-bleu) 4%, var(--ls-bleu) 40%, transparent 40%) 1; }
:is(.ls-portraits, .ls-passion) .three-columns p > img:only-child { max-width: 346px; aspect-ratio: 346 / 426; object-fit: cover; border-radius: 28px; margin: 0 auto; }
:is(.ls-portraits, .ls-passion) .three-columns h3 { text-align: center; margin-top: 1em; }

/* Une vision commune */
.ls-vision .two-columns { gap: clamp(28px, 6vw, 96px); }

/* Clic & Bouge : texte | téléphones inclinés | valeurs en tuiles */
.ls-clic .three-columns { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); }
.ls-clic .three-columns > .editable:nth-child(2) { position: relative; min-height: 400px; }
.ls-clic .three-columns > .editable:nth-child(2) > p { position: absolute; width: 52%; margin: 0; }
.ls-clic .three-columns > .editable:nth-child(2) > p:first-child { left: 6%; top: 0; transform: rotate(-4deg); }
.ls-clic .three-columns > .editable:nth-child(2) > p:nth-child(2) { left: 42%; top: 22%; transform: rotate(4deg); }
.ls-clic .three-columns > .editable:nth-child(2) img { border-radius: 0; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25)); }
.ls-clic .three-columns > .editable:nth-child(3) { border-left: 1px solid var(--ls-bleu); padding-left: clamp(24px, 3vw, 44px); }
.ls-clic ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 26px;
    container-type: inline-size; }
.ls-clic li { display: grid; place-items: center; aspect-ratio: 1 / .85; padding: 8px; margin: 0; text-align: center;
    background: var(--ls-bleu-pale); border-radius: 30px; font-family: var(--ls-condensee); font-synthesis: none;
    text-transform: uppercase; line-height: 1.05;
    /* TAILLE CALÉE SUR LA TUILE (12/11/2026). Mesuré : en Anton, « ÉPANOUISSEMENT » fait 6,4 fois la
       taille de la police ; une tuile offre 164 px utiles au plus. Au-delà de 25 px le mot se cassait
       (« ÉPANOUISSEMEN / T »). La taille suit donc la largeur de la liste (unité cqi du conteneur) :
       24 px au plus, et moins quand les tuiles rétrécissent ; le mot tient alors sur une ligne. Le
       trait d'union conditionnel (&shy;) et la coupure forcée ne servent plus qu'en dernier recours. */
    font-size: clamp(14px, 5.2cqi, 24px);
    hyphens: manual; overflow-wrap: anywhere; min-width: 0;
    transition: transform .25s, background .25s; }
.ls-clic li:hover { transform: rotate(-2deg) scale(1.03); background: var(--ls-bleu-doux); }

/* ---------- 10. Devenir partenaire ---------- */
/* Pourquoi : photo | titre + intro, puis 4 cartes avec icône */
.ls-pourquoi .two-columns { align-items: center; }
.ls-pourquoi .four-columns > .editable { background: var(--ls-bleu-pale); border-radius: var(--ls-rayon); padding: 24px 22px 28px;
    text-align: center; transition: transform .25s, box-shadow .25s; }
.ls-pourquoi .four-columns > .editable:hover { transform: translateY(-4px); box-shadow: var(--ls-ombre); }
.ls-pourquoi .four-columns p > img:only-child { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto; }
.ls-pourquoi .four-columns h3 { margin-top: .8em; }

/* Qui peut : texte + liste d'icônes | photo, sur fond bleu pâle */
.item-data.ls-qui-peut { background: var(--ls-bleu-pale); }
.ls-qui-peut .two-columns { align-items: center; }
.ls-qui-peut ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; text-align: center; }
.ls-qui-peut li { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; font-weight: 700; font-size: var(--ls-petit); line-height: 1.45; }
.ls-qui-peut li img { width: clamp(72px, 6vw, 96px); height: auto; border-radius: 50%; transition: transform .25s; }
.ls-qui-peut li:hover img { transform: translateY(-4px); }

/* Comment collaborer : photo | texte + bouton */
.ls-collaborer .two-columns { align-items: center; }
.ls-collaborer li { margin: .7em 0; }

/* Don : logo HelloAsso cliquable */
.ls-don .editable a > img { height: auto; width: min(500px, 80vw); }

/* ---------- 11. Nous contacter (formulaire du CMS, Semantic UI) ---------- */
.ls-contact > div > div { max-width: 760px; }
.ls-contact .ui.form .name, .ls-contact label { color: var(--ls-bleu); font-weight: 700; font-size: 16px; border: 0 !important; }
.ls-contact .ui.form .row .column { width: 100% !important; text-align: left !important; }
.ls-contact .ui.form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not(.search),
.ls-contact .ui.form textarea,
.ls-contact .ui.selection.dropdown {
    border: 2px solid var(--ls-bleu-doux) !important; border-radius: 12px !important; box-shadow: none !important;
    padding: 12px 14px !important; min-height: 48px; font-family: var(--ls-police) !important; font-size: 16px !important;
    color: #13213f !important; background: var(--ls-blanc) !important; }
.ls-contact .ui.selection.dropdown > .dropdown.icon { top: 50% !important; right: 14px !important; margin: 0 !important; padding: 0 !important;
    height: auto !important; line-height: 1 !important; transform: translateY(-50%) !important; }
.ls-contact .ui.form input:focus, .ls-contact .ui.form textarea:focus,
.ls-contact .ui.selection.dropdown:focus, .ls-contact .ui.selection.active.dropdown {
    border-color: var(--ls-bleu) !important; box-shadow: 0 0 0 4px var(--ls-bleu-pale) !important; outline: none; }
.ls-contact .ui.selection.active.dropdown .menu { border-color: var(--ls-bleu) !important; }
/* Le champ de recherche invisible des listes (Titre, Objet) : sans cadre, sinon double bordure */
.ls-contact .ui.form .ui.search.selection.dropdown > input.search.search {
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 12px !important;
    padding: 12px 34px 12px 14px !important; min-height: 0; height: 100%; font-size: 16px !important; }
.ls-contact .ui.selection.dropdown > .text, .ls-contact .ui.selection.dropdown > .default.text { line-height: 20px; }
.ls-contact .ui.selection.dropdown .menu { border-radius: 0 0 12px 12px !important; }
.ls-contact .ui.selection.active.dropdown { border-radius: 12px 12px 0 0 !important; }
.ls-contact .ui.form ::placeholder { color: #6b7a99 !important; opacity: 1; }
.ls-contact .ui.form .required:after, .ls-contact .ui.form .name .required:after { color: var(--ls-rouge); }
.ls-contact .buttons { text-align: center; margin-top: 24px; }
.ls-contact .ui.primary.button, .ls-contact .ui.button, .ls-contact button[type=submit] {
    background: var(--ls-rouge) !important; background-image: none !important; color: var(--ls-blanc) !important;
    border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
    font-family: var(--ls-police) !important; font-weight: 700 !important; font-size: 18px !important;
    text-transform: none !important; padding: .75em 1.6em !important; min-height: 48px; cursor: pointer; transition: background .2s, transform .2s; }
.ls-contact .ui.primary.button:hover, .ls-contact .ui.primary.button:focus { background: var(--ls-rouge-survol) !important; transform: translateY(-2px); }
.ls-contact .ui.form .field.error input, .ls-contact .ui.form .error textarea { border-color: var(--ls-rouge) !important; background: #fff6f6 !important; }

/* ---------- 12. Mentions légales : colonne de lecture étroite ---------- */
.ls-legal > div > div { max-width: 820px; }
.ls-legal h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 1.8em 0 .5em; }
.ls-legal h2:first-of-type { margin-top: .6em; }
.ls-legal em { font-size: var(--ls-petit); color: #4a5f86; }

/* Ancres (boutons « Découvrir leur parcours », « Écrire un message ») */
[id] { scroll-margin-top: 24px; }

/* ---------- 13. Tablette et téléphone ---------- */
@media (max-width: 1000px) {
    .four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .six-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eight-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ls-clic .three-columns { grid-template-columns: 1fr 1fr; }
    .ls-clic .three-columns > .editable:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
    .ls-qui-peut ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 860px) {
    .two-columns, .two-columns.third-left, .two-columns.third-right, .two-columns.quarter-left, .two-columns.quarter-right,
    .three-columns, .ls-intro .two-columns { grid-template-columns: minmax(0, 1fr); }
    .ls-intro .two-columns > .editable:first-child { order: 2; }
    .ls-seances .three-columns { max-width: 360px; }
    :is(.ls-portraits, .ls-passion) .three-columns { gap: 48px; }
    :is(.ls-portraits, .ls-passion) .three-columns > .editable + .editable { border-left: 0; }
    .ls-galerie .three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .four-columns { grid-template-columns: minmax(0, 1fr); }
    .six-columns, .eight-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(.item-data:not(.ls-plein)) > div > div { padding-left: 16px; padding-right: 16px; }
    .ls-clic .three-columns { grid-template-columns: minmax(0, 1fr); }
    .ls-clic .three-columns > .editable:nth-child(2) { min-height: 340px; max-width: 340px; }
    .ls-qui-peut ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-galerie .three-columns { grid-template-columns: minmax(0, 1fr); }
    .ls-hero > div > div:after { background: linear-gradient(180deg, rgba(3, 40, 110, .88) 0%, rgba(3, 45, 120, .72) 100%); }
    .ls-hero .editable { padding: 40px 16px; }
    main .editable a > img { height: 44px; }
}

/* ---------- 14. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *:before, *:after { transition: none !important; }
    .editable:hover, .editable:hover img, main .editable a:hover, .ls-clic li:hover, .ls-qui-peut li:hover img, footer .ls-stores a:hover { transform: none !important; }
}