/* =========================================================
   DIRE OUI, LE SYSTÈME
   Jetons et primitives. Tout le reste s'appuie dessus.

   Trois règles, valables pour toute modification future :

   1. Aucune couleur, aucune taille, aucun rayon, aucune ombre
      n'est écrit en dur ailleurs que dans ce fichier. On pose
      un jeton, on l'emploie.
   2. Les échelles sont courtes exprès. Six tailles de texte,
      cinq rayons, trois ombres. Une valeur qui manque est
      presque toujours une valeur de trop.
   3. Le site est un cadre autour de photographies. Le décor
      reste neutre, la couleur vient des images.
========================================================= */

:root {

    /* ---- Les fonds et l'encre ----
       Une lumière chaude, jamais un blanc clinique. L'encre
       n'est pas noire : elle a la même température que le
       papier, sinon le contraste paraît électrique. */
    --fond:            #F7F6F4;
    --fond-creux:      #F1EEEA;
    --fond-tendre:     #F6EFEA;   /* le rosé pâle des sections calmes */
    --surface:         #FFFFFF;
    --surface-voile:   rgba(255, 255, 255, 0.72);
    /* Un voile plus couvrant, pour les barres derrière lesquelles du texte
       défile : à 0.72 les mots du dessous restent lisibles et se mêlent. */
    --surface-barre:   rgba(255, 255, 255, 0.94);

    --encre:           #171512;
    --encre-2:         #5C554E;   /* texte secondaire */
    --encre-3:         #8C857C;   /* légendes, unités */
    --encre-4:         #B4ADA4;   /* texte désactivé */

    --trait:           #E7E2DB;
    --trait-fort:      #D6CFC5;

    /* ---- L'accent ----
       L'action est en encre, pas en couleur : c'est ce qui
       laisse les photographies parler. L'or ne sert qu'aux
       filets, aux monogrammes et aux moments de fête. */
    --or:              #A98A5F;
    --or-clair:        #C9AD86;
    --or-voile:        rgba(169, 138, 95, 0.12);

    /* ---- Les états ----
       Quatre familles, jamais improvisées ailleurs. */
    --vert:            #2F6B4F;
    --vert-fond:       #EAF2ED;
    --rouge:           #9E3524;
    --rouge-fond:      #F9EDEA;
    --ambre:           #8A6320;
    --ambre-fond:      #F8F1E3;
    --bleu:            #2F5573;
    --bleu-fond:       #EAF0F5;

    /* ---- La typographie ----
       Deux familles pour le site. Le serif porte l'émotion,
       la grotesque porte l'information. Les autres familles
       chargées servent uniquement aux produits imprimés. */
    --serif:  "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
    --sans:   "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --t-xs:    0.75rem;    /* 12 */
    --t-sm:    0.8125rem;  /* 13 */
    --t-base:  0.9375rem;  /* 15 */
    --t-md:    1.0625rem;  /* 17 */
    --t-lg:    1.375rem;   /* 22 */
    --t-xl:    1.75rem;    /* 28 */
    --t-2xl:   2.25rem;    /* 36 */
    --t-3xl:   3rem;       /* 48 */

    --interligne-serre:  1.12;
    --interligne:        1.55;
    --interligne-aere:   1.72;

    /* Les capitales espacées : une seule valeur, partout. */
    --chasse-etiquette: 0.14em;

    /* ---- L'espace ----
       Base 4. Les pages respirent par cette échelle et par
       rien d'autre. */
    --e1:  4px;   --e2:  8px;   --e3: 12px;  --e4: 16px;
    --e5: 20px;   --e6: 24px;   --e7: 32px;  --e8: 40px;
    --e9: 56px;   --e10: 72px;  --e11: 96px; --e12: 128px;

    /* ---- Les formes ---- */
    --r-xs:   6px;
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-rond: 999px;

    /* ---- La lumière ----
       Trois profondeurs. Une ombre sert à dire qu'un élément
       flotte au-dessus d'un autre, jamais à décorer. */
    --ombre-1: 0 1px 2px rgba(23, 21, 18, 0.04), 0 2px 8px rgba(23, 21, 18, 0.04);
    --ombre-2: 0 2px 6px rgba(23, 21, 18, 0.05), 0 12px 28px rgba(23, 21, 18, 0.08);
    --ombre-3: 0 8px 24px rgba(23, 21, 18, 0.10), 0 40px 80px rgba(23, 21, 18, 0.18);

    /* ---- Le mouvement ----
       On sent que ça répond, on ne voit pas l'animation. */
    --duree-courte: 140ms;
    --duree:        220ms;
    --duree-longue: 420ms;
    --courbe:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --courbe-douce: cubic-bezier(0.33, 0, 0.15, 1);

    /* ---- Les repères de mise en page ---- */
    --colonne:        1180px;
    --colonne-large:  1560px;
    --colonne-texte:  62ch;
    --barre-haute:    64px;
}

/* =========================================================
   REMISE À PLAT
========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: var(--interligne);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; }

p { margin: 0; }

table { border-collapse: collapse; width: 100%; }

[hidden] { display: none !important; }

::selection { background: var(--or-voile); }

/* Le clavier doit toujours savoir où il est. */
:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   TYPOGRAPHIE
   Le serif ne sert qu'aux titres et aux noms. Partout
   ailleurs, la grotesque.
========================================================= */

h1, h2, h3 { font-family: var(--serif); letter-spacing: -0.01em; }

h1 { font-size: var(--t-3xl); font-weight: 300; line-height: var(--interligne-serre); }
h2 { font-size: var(--t-2xl); font-weight: 300; line-height: 1.18; }
h3 { font-size: var(--t-lg); font-weight: 400; line-height: 1.3; }
h4 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }

h1, h2, h3 { text-wrap: balance; }

/* Le surtitre en capitales : l'unique respiration avant un
   titre. Il annonce, il ne raconte pas. */
.eyebrow {
    display: block;
    margin-bottom: var(--e3);
    color: var(--encre-3);
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
}

.section-heading {
    max-width: 42rem;
    margin: 0 auto var(--e8);
    text-align: center;
}

.section-heading h2 { color: var(--encre); }

.section-heading p {
    margin-top: var(--e4);
    color: var(--encre-2);
    font-size: var(--t-md);
    line-height: var(--interligne-aere);
}

/* =========================================================
   TRAME
========================================================= */

.container {
    width: 100%;
    max-width: var(--colonne);
    margin: 0 auto;
    padding: 0 var(--e7);
}

/* padding-block seul : la classe se pose sur .container, et un
   raccourci padding effacerait la gouttière horizontale. */
.section-pad { padding-block: var(--e11); }

.view-wrap { padding-bottom: var(--e12); }

.tabpanel-like,
#s-film, #s-reportage, #s-vosphotos, #s-livredor, #s-photomaton {
    scroll-margin-top: calc(var(--barre-haute) + var(--e6));
}

.section-alt { background: var(--fond-tendre); }

/* =========================================================
   BOUTONS
   Un bouton plein pour l'action principale, un bouton
   contour pour tout le reste, un lien nu pour l'accessoire.
   Trois formes, pas davantage.
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: 0 var(--e6);
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--r-rond);
    background: transparent;
    color: var(--encre);
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duree-courte) var(--courbe),
                color var(--duree-courte) var(--courbe),
                border-color var(--duree-courte) var(--courbe),
                box-shadow var(--duree) var(--courbe),
                transform var(--duree-courte) var(--courbe);
}

.btn-primary {
    background: var(--encre);
    border-color: var(--encre);
    color: var(--surface);
    box-shadow: var(--ombre-1);
}
.btn-primary:hover { background: #262220; box-shadow: var(--ombre-2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--ombre-1); }

.btn-outline {
    background: var(--surface);
    border-color: var(--trait);
    color: var(--encre);
}
.btn-outline:hover { border-color: var(--encre); }

.btn-ghost-light {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.24); }

.btn-lien {
    padding: 0;
    min-height: 0;
    color: var(--encre-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--trait-fort);
}
.btn-lien:hover { color: var(--encre); text-decoration-color: var(--encre); }

.btn-sm { min-height: 36px; padding: 0 var(--e4); font-size: var(--t-xs); }
.btn-block, .btn.pleine { width: 100%; }

.btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Le petit lien de service, sous une liste ou un tableau. */
.see-all-inline {
    padding: 0;
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    transition: color var(--duree-courte) var(--courbe);
}
.see-all-inline:hover { color: var(--encre); }

/* =========================================================
   CHAMPS
   Hauteur unique, contour discret, et un anneau net dès que
   le champ prend la main.
========================================================= */

.form-row { margin-bottom: var(--e5); }

.form-row > label,
.form-row > div > label {
    display: block;
    margin-bottom: var(--e2);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px var(--e4);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--encre);
    font-size: var(--t-base);
    transition: border-color var(--duree-courte) var(--courbe),
                box-shadow var(--duree-courte) var(--courbe);
}

textarea { min-height: 110px; padding-top: var(--e3); resize: vertical; line-height: var(--interligne); }

input::placeholder, textarea::placeholder { color: var(--encre-4); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--encre);
    box-shadow: 0 0 0 3px rgba(23, 21, 18, 0.08);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--fond-creux);
    color: var(--encre-4);
    cursor: not-allowed;
}

select {
    appearance: none;
    padding-right: var(--e8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238C857C' stroke-width='1.4' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--e4) center;
    background-size: 11px;
}

.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }

.field-hint, .field-erreur {
    margin-top: var(--e2);
    font-size: var(--t-xs);
    line-height: 1.5;
}
.field-hint { color: var(--encre-3); }
.field-erreur { color: var(--rouge); }

.has-error input, .has-error select, .has-error textarea,
input.field-error, select.field-error, textarea.field-error {
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(158, 53, 36, 0.10);
}

/* Le piège à robots : invisible, et jamais lu à voix haute. */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Les choix ----
   Des pastilles que l'on désigne, plutôt que des cases que
   l'on coche : c'est plus rapide au doigt comme à la souris. */

.choice-group, .check-chip-group, .radio-pair {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

.choice-btn, .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 10px var(--e4);
    min-height: 42px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-2);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: border-color var(--duree-courte) var(--courbe),
                background var(--duree-courte) var(--courbe),
                color var(--duree-courte) var(--courbe);
}

.choice-btn:hover, .chip:hover { border-color: var(--trait-fort); }

.choice-btn.active,
.choice-btn.actif,
.chip.is-checked {
    border-color: var(--encre);
    background: var(--encre);
    color: var(--surface);
}

.chip input[type="checkbox"], .chip input[type="radio"] {
    width: auto;
    min-height: 0;
    margin: 0;
    accent-color: var(--encre);
}

/* ---- Le sélecteur à deux états ---- */

.switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--fond-creux);
}

.switch-option {
    padding: 8px var(--e4);
    border: 0;
    border-radius: var(--r-rond);
    background: transparent;
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--duree) var(--courbe),
                color var(--duree) var(--courbe),
                box-shadow var(--duree) var(--courbe);
}

.switch-option.active {
    background: var(--surface);
    color: var(--encre);
    box-shadow: var(--ombre-1);
}

.switch.small .switch-option { padding: 7px var(--e3); font-size: var(--t-xs); }

/* =========================================================
   SURFACES
========================================================= */

.admin-panel, .info-card {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--r-md);
}

.admin-panel { margin-bottom: var(--e6); }

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e5) var(--e6);
    border-bottom: 1px solid var(--trait);
}

.admin-panel-header h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }

/* ---- Les pastilles d'état ---- */

.status-pill, .mini-tag, .retro-tag, .hotel-tag, .video-badge, .soon-note-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 3px 9px;
    border-radius: var(--r-rond);
    background: var(--fond-creux);
    color: var(--encre-2);
    font-size: var(--t-xs);
    font-weight: 500;
    white-space: nowrap;
}

.status-pill.status-confirme { background: var(--vert-fond); color: var(--vert); }
.status-pill.status-attente  { background: var(--ambre-fond); color: var(--ambre); }
.status-pill.status-excuse   { background: var(--rouge-fond); color: var(--rouge); }

.mini-tag.allergy { background: var(--rouge-fond); color: var(--rouge); }
.mini-tags { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* ---- Les bandeaux de message ---- */

.warning-box, .rsvp-success, .login-erreur, .soon-note {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e4) var(--e5);
    border: 1px solid var(--trait);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--t-sm);
    line-height: var(--interligne);
    color: var(--encre-2);
}

.warning-box { background: var(--ambre-fond); border-color: rgba(138, 99, 32, 0.18); color: var(--ambre); }
.rsvp-success { background: var(--vert-fond); border-color: rgba(47, 107, 79, 0.18); color: var(--vert); }
.login-erreur { background: var(--rouge-fond); border-color: rgba(158, 53, 36, 0.18); color: var(--rouge); }

.bandeau-quota {
    padding: var(--e3) var(--e7);
    background: var(--rouge);
    color: #fff;
    text-align: center;
    font-size: var(--t-sm);
}

/* =========================================================
   TABLEAUX
   Pas de quadrillage : un filet sous chaque ligne suffit à
   guider l'œil, et la page reste calme.
========================================================= */

.table-scroll { overflow-x: auto; }

.admin-panel table { font-size: var(--t-sm); }

.admin-panel th {
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--trait);
    color: var(--encre-3);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: var(--chasse-etiquette);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.admin-panel td {
    padding: var(--e3) var(--e4);
    border-bottom: 1px solid var(--trait);
    color: var(--encre-2);
    vertical-align: middle;
}

.admin-panel tr:last-child td { border-bottom: 0; }

th.sortable { cursor: pointer; user-select: none; transition: color var(--duree-courte) var(--courbe); }
th.sortable:hover { color: var(--encre); }
th.sort-active { color: var(--encre); }
.sort-arrow { margin-left: var(--e1); opacity: 0.5; }

/* =========================================================
   FENÊTRES ET FEUILLES
   Sur ordinateur, une fenêtre centrée. Sur téléphone, une
   feuille qui monte du bas : le pouce est en bas de l'écran.
========================================================= */

.modal-overlay, .voile, .voile-inscription, .fp3d-voile, .pap-modale {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    /* Les fenêtres pilotées par une classe se cachent par défaut ;
       celles pilotées par l'attribut hidden sont déjà couvertes. */
    align-items: center;
    justify-content: center;
    padding: var(--e6);
    background: rgba(23, 21, 18, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: voile-entree var(--duree) var(--courbe);
}

@keyframes voile-entree { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay { display: none; }
.modal-overlay.open { display: flex; }

.modal-box, .fenetre-inscription, .pap-modale-boite {
    position: relative;
    width: min(560px, 100%);
    max-height: min(86vh, 900px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-3);
    animation: fenetre-entree var(--duree-longue) var(--courbe);
}

@keyframes fenetre-entree {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e4);
    padding: var(--e6) var(--e7) var(--e4);
}

.modal-header h3 { font-family: var(--serif); font-size: var(--t-xl); font-weight: 300; }

.modal-body { padding: 0 var(--e7) var(--e7); }

/* Le pied d'une fenêtre : les actions, séparées du contenu par un filet
   et collées au bas de la boîte quand celle-ci défile. */
.modal-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--e3);
    justify-content: flex-end;
    padding: var(--e4) var(--e7) var(--e6);
    border-top: 1px solid var(--trait);
    background: var(--surface);
}

.modal-close, .fenetre-fermer, .pap-modale-fermer, .lightbox-close, .fp3d-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--trait);
    border-radius: var(--r-rond);
    background: var(--surface);
    color: var(--encre-3);
    font-size: 18px;
    line-height: 1;
    transition: color var(--duree-courte) var(--courbe),
                border-color var(--duree-courte) var(--courbe);
}
.modal-close:hover, .fenetre-fermer:hover, .pap-modale-fermer:hover { color: var(--encre); border-color: var(--encre); }

/* =========================================================
   LE MOT QUI PASSE
========================================================= */

.toast {
    position: fixed;
    left: 50%;
    bottom: var(--e7);
    z-index: 1100;
    transform: translate(-50%, 16px);
    padding: var(--e3) var(--e5);
    border-radius: var(--r-rond);
    background: var(--encre);
    color: var(--surface);
    font-size: var(--t-sm);
    box-shadow: var(--ombre-3);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   APPARITIONS
   Une section se révèle en montant de quelques pixels, une
   seule fois. C'est tout le mouvement que s'autorise le site.
========================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duree-longue) var(--courbe-douce),
                transform var(--duree-longue) var(--courbe-douce);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   POINTS DE RUPTURE
   Trois, et pas un de plus : 1200 pour les grands écrans,
   900 pour la tablette, 640 pour le téléphone.
========================================================= */

@media (max-width: 1200px) {
    .container { padding: 0 var(--e6); }
    .section-pad { padding-block: var(--e10); }
}

@media (max-width: 900px) {
    :root { --t-3xl: 2.5rem; --t-2xl: 2rem; }
    .form-row-split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    :root {
        --t-3xl: 2.125rem;
        --t-2xl: 1.75rem;
        --t-xl: 1.5rem;
        --barre-haute: 56px;
    }
    .container { padding: 0 var(--e5); }
    .section-pad { padding-block: var(--e9); }
    .section-heading { margin-bottom: var(--e7); }

    /* La fenêtre devient une feuille qui monte du bas. */
    .modal-overlay, .voile-inscription, .pap-modale {
        align-items: flex-end;
        padding: 0;
    }
    .modal-box, .fenetre-inscription, .pap-modale-boite {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        animation: feuille-entree var(--duree-longue) var(--courbe);
    }
    @keyframes feuille-entree {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }
    .modal-header { padding: var(--e6) var(--e5) var(--e4); }
    .modal-body { padding: 0 var(--e5) var(--e7); }
    .modal-actions { flex-direction: column-reverse; padding: var(--e4) var(--e5) var(--e5); }
    .modal-actions .btn { width: 100%; }

    /* Au doigt, une cible fait au moins 44 points. */
    .btn { min-height: 48px; }
    .btn-sm { min-height: 40px; }
}

/* =========================================================
   LE BOUTON QUI APPELLE
   Un seul bouton par écran peut le porter : celui dont dépend
   tout le reste. Une lueur dorée le traverse toutes les cinq
   secondes, et un halo respire dessous. Rien ne clignote :
   l'oeil est attiré, pas agressé.
========================================================= */

.btn-attire {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: halo-respire 5s var(--courbe-douce) infinite;
}

/* La lueur : une bande claire, inclinée, qui balaie le bouton. */
.btn-attire::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -40%;
    width: 32%;
    z-index: -1;
    transform: skewX(-18deg) translateX(-140%);
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.34) 45%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.34) 55%,
        transparent);
    animation: lueur-balaie 5s var(--courbe-douce) infinite;
    pointer-events: none;
}

@keyframes lueur-balaie {
    0%   { transform: skewX(-18deg) translateX(-140%); }
    22%  { transform: skewX(-18deg) translateX(520%); }
    100% { transform: skewX(-18deg) translateX(520%); }
}

@keyframes halo-respire {
    0%, 100% { box-shadow: 0 0 0 0 var(--or-voile), var(--ombre-1); }
    50%      { box-shadow: 0 0 0 7px rgba(169, 138, 95, 0.09), var(--ombre-2); }
}

/* Au survol, l'appel n'a plus lieu d'être : la main est déjà dessus. */
.btn-attire:hover,
.btn-attire:focus-visible { animation-play-state: paused; }
.btn-attire:hover::after,
.btn-attire:focus-visible::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .btn-attire, .btn-attire::after { animation: none; }
    .btn-attire { box-shadow: 0 0 0 3px var(--or-voile), var(--ombre-1); }
}

/* =========================================================
   LES ICÔNES
   Des SVG en ligne, dessinés au trait, qui prennent la couleur
   et la taille du texte qui les porte. Voir app/icones.php.
========================================================= */

.icone {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}
.icone-grande { width: 22px; height: 22px; }