/* portail.css — les couleurs du portail (charte Argile & Lin, thème clair) et les portes des services. */
:root {
    --ink: #1C0F0A; --ink-2: #241811; --on-ink: #F8F2EF; --on-ink-mid: #DCCFC8; --on-ink-dim: rgba(248, 242, 239, .42);
    --accent: #A14836; --accent-lift: #E8A48F; --accent-deep: #8A3B2C; --accent-soft: #F6E4DE; --accent-line: #EACCC3;
    --alt: #A14836; --alt-deep: #8A3B2C; --alt-lift: #E8A48F; --on-alt: #FFFCFA; --on-alt-mid: #F8ECE7; --alt-line: rgba(255, 252, 250, .22);
    --ground: #F8F2EF; --paper: #FFFCFA; --parchment: #EEE4DF; --sunken: #EEE4DF;
    --text: #1C0F0A; --text-mid: #5A4A43; --text-muted: #71605A; --line: #E3D8D2; --line-strong: #8F817B;
    --chrome: rgba(255, 252, 250, .82); --chrome-line: rgba(28, 15, 10, .06); --chrome-blur: blur(14px) saturate(1.4);
    --radius: 20px; --radius-sm: 12px; --radius-lg: 28px;
    --elev-1: 0 1px 2px rgba(28, 15, 10, .04), 0 4px 12px rgba(28, 15, 10, .06);
    --elev-2: 0 2px 4px rgba(28, 15, 10, .05), 0 12px 28px rgba(28, 15, 10, .10);
    --elev-3: 0 2px 4px rgba(28, 15, 10, .06), 0 14px 32px rgba(28, 15, 10, .14), 0 40px 80px -24px rgba(28, 15, 10, .35);
    --font-sans: 'Figtree', 'Segoe UI', system-ui, sans-serif; --font-serif: 'RL Limo', Georgia, serif;
    --hero-texture: url('../img/liquid.webp');
    --deco: #D4853A; --deco-soft: #F7E7D5; --on-accent: #FFFCFA; --on-ink-strong: #FFFCFA; --on-ink-muted: #B9A89F;
    --line-soft: #EDE3DE; --pale: #D8C9C1; --ink-rgb: 28, 15, 10; --on-ink-rgb: 248, 242, 239; --accent-rgb: 161, 72, 54; --accent-lift-rgb: 232, 164, 143;
    --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%23D4853A' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.6'/%3E%3C/svg%3E");
}

/* Un seul écran, clair : pas d'en-tête, deux accès en haut à droite, le texte au centre. */
.portail {
    min-height: 100svh; display: flex; flex-direction: column;
    padding: clamp(.9rem, 2vh, 1.5rem) clamp(1rem, 3vw, 2.5rem) clamp(.9rem, 2vh, 1.25rem);
    background: radial-gradient(58rem 26rem at 50% -9rem, rgba(212, 133, 58, .16), transparent 70%) no-repeat, var(--ground);
}
.portail-acces { display: flex; justify-content: flex-end; gap: .6rem; }
.portail-acces .btn { height: 2.625rem; padding-inline: 1.15rem; font-size: .9375rem; }
.portail-acces .btn-ghost strong { font-weight: 700; }
/* Bouton d'encre : l'accès « Nous contacter » du haut et le retour de la page 404. */
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-2); }
.portail-acces .btn-ink { background: var(--ink); color: var(--on-ink-strong); }
.portail-acces .btn-ink:hover { background: var(--ink-2); }

.portail-corps {
    flex: 1; width: 100%; max-width: 72rem; margin-inline: auto;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(1.1rem, 3vh, 2rem);
    padding-block: clamp(.75rem, 2.5vh, 2rem);
}
.portail-tete { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, 1.6vh, 1.1rem); text-align: center; }
.portail-volute { width: auto; height: clamp(2.75rem, 7vh, 4rem); }
.portail-tete .h1 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem); }
.portail-tete .lead { max-width: 46rem; text-wrap: balance; }

/* Les portes : une carte par service, à sa couleur, signée de son logo. */
/* Une carte garde la largeur qu'elle a dans une rangée complète (--cols colonnes, trois au moins) :
   seule ou à deux, elle ne s'étire pas, sa rangée se centre. --n est le nombre de cartes de la rangée. */
.portail-corps { --cols: 3; --col: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.portes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); }
.portail-corps > .portes { align-self: center; width: calc(var(--n, 3) * var(--col) + (var(--n, 3) - 1) * var(--gap)); }
.portes li { display: flex; min-width: 0; }
.porte {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; min-height: clamp(10.5rem, 23vh, 14rem);
    padding: clamp(1.15rem, .9rem + .7vw, 1.6rem); border-radius: var(--radius-lg);
    background: var(--p-fond); border: 1px solid var(--p-trait); color: var(--text); text-decoration: none;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.porte:hover, .porte:focus-visible { transform: translateY(-4px); border-color: var(--p-vif); box-shadow: 0 2px 4px rgba(var(--ink-rgb), .05), 0 18px 36px -16px var(--p-ombre); }
.porte-logo { width: auto; max-width: 100%; height: clamp(1.45rem, 1.05rem + .7vw, 1.85rem); align-self: flex-start; object-fit: contain; object-position: left center; }
.porte-phrase { margin-top: auto; font-family: var(--font-serif); font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
.porte-action { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 600; font-size: .9375rem; color: var(--p-vif); }
.porte-go { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--p-vif); color: #fff; }
.porte-fleche { transition: transform .3s var(--ease); }
.porte:hover .porte-fleche { transform: translateX(3px); }

.porte-entreprise { --p-fond: #F6E4DE; --p-trait: #EACCC3; --p-vif: #A14836; --p-ombre: rgba(161, 72, 54, .45); }
.porte-academie   { --p-fond: #FAF0D6; --p-trait: #EDDAAC; --p-vif: #8A6318; --p-ombre: rgba(138, 99, 24, .45); }
.porte-pro        { --p-fond: #D9F2ED; --p-trait: #B8E2DA; --p-vif: #11756B; --p-ombre: rgba(17, 117, 107, .45); }
.porte-monpsy     { --p-fond: #E5EFE6; --p-trait: #C9DDCD; --p-vif: #1F6F63; --p-ombre: rgba(31, 111, 99, .45); }
.porte-salarie    { --p-fond: #F9EBDA; --p-trait: #EDD3B4; --p-vif: #96561A; --p-ombre: rgba(150, 86, 26, .45); }
.porte-consulter  { --p-fond: #E3ECF7; --p-trait: #C6D7EC; --p-vif: #1E4E86; --p-ombre: rgba(30, 78, 134, .45); }

/* Patients et salariés : à part, dans leur propre cadre, alignés sur la grille du dessus. */
.patients {
    --pad: clamp(.6rem, 1vw, .85rem);
    --bord: var(--pad);   /* le cadre déborde de sa marge intérieure : ses cartes s'alignent sur celles du dessus */
    display: flex; flex-direction: column; gap: var(--pad);
    align-self: center; box-sizing: border-box; padding: var(--pad);
    width: calc(var(--n, 3) * var(--col) + (var(--n, 3) - 1) * var(--gap) + 2 * var(--bord) + 2px);
    background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius-lg) + var(--pad)); box-shadow: var(--elev-1);
}
.patients-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; padding: .3rem clamp(.5rem, 1vw, .9rem) 0; }
.patients-titre { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); line-height: 1.2; letter-spacing: -.01em; }
.patients .portes { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.patients .porte { min-height: clamp(9rem, 19vh, 11.5rem); }

.portail-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; width: 100%; max-width: 72rem; margin-inline: auto; font-size: var(--fs-cap); color: var(--text-muted); }
.portail-pied a { color: inherit; text-decoration: none; }
.portail-pied a:hover { color: var(--text); }
.portail-liens { display: inline-flex; gap: 1.25rem; }

/* ── Film d'entrée ──────────────────────────────────────────────────────
   Jamais recadré : l'image garde son 16/9, centrée dans la fenêtre. Le fond part de la
   couleur de la première image, puis intro.js lui donne celle du bord du film, image après
   image ; un fondu sur le pourtour de la vidéo efface la couture qui pourrait rester. */
.intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: #FFF9FA; transition: opacity .9s var(--ease), visibility .9s, background-color .2s linear; }
.intro video {
    display: block; width: min(100vw, 100vh * 16 / 9); width: min(100vw, 100svh * 16 / 9); height: auto; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}
.intro-skip {
    position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vh, 2rem); display: inline-flex; align-items: center; gap: .5rem;
    height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), .22);
    background: rgba(255, 252, 250, .6); color: var(--text); font: 600 .9375rem var(--font-sans); cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.intro-skip:hover { background: rgba(255, 252, 250, .9); }
.intro-skip:focus-visible { outline: 2px solid rgba(var(--ink-rgb), .35); outline-offset: 3px; }
.intro.done { opacity: 0; visibility: hidden; }
.intro[hidden] { display: none; }
.intro-on .intro[hidden] { display: grid; }
.intro-on body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .intro { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .portail-tete, .portail-corps > .portes, .patients { animation: portail-arrive .9s var(--ease) both; }
    .portail-corps > .portes { animation-delay: .1s; }
    .patients { animation-delay: .2s; }
    @keyframes portail-arrive { from { opacity: 0; transform: translateY(14px); } }
    /* Pendant le film, l'arrivée du portail attend : elle se joue quand il s'efface. */
    .intro-on .portail-tete, .intro-on .portail-corps > .portes, .intro-on .patients { animation-play-state: paused; }
}

/* Écran large : les deux accès flottent en haut à droite, hors du flux, pour laisser toute la hauteur au contenu. */
@media (min-width: 761px) {
    .portail-acces { position: absolute; top: clamp(.9rem, 2vh, 1.5rem); right: clamp(1rem, 3vw, 2.5rem); z-index: 2; }
    .portail { position: relative; }
}
/* Écran bas (portable 13 pouces) : tout tient encore sans défiler. */
@media (min-width: 761px) and (max-height: 800px) {
    .portail-corps { gap: 1rem; padding-block: .25rem .75rem; }
    .portail-tete { gap: .5rem; }
    .portail-volute { height: 2.6rem; }
    .portail-tete .h1 { font-size: clamp(2rem, 1.2rem + 2vw, 2.75rem); }
    .portail-tete .lead { max-width: 54rem; font-size: 1.0625rem; }
    .porte { min-height: 0; gap: .8rem; padding: 1.1rem 1.25rem; }
    .patients .porte { min-height: 0; }
    .patients-tete { padding-top: .1rem; }
    .porte-go { width: 2rem; height: 2rem; }
}
@media (max-width: 1180px) {
    .patients { --bord: 0px; }
}
@media (max-width: 760px) {
    .portail-corps { justify-content: flex-start; }
    .portail-corps > .portes, .patients { width: 100%; }
    .portes, .patients .portes { grid-template-columns: minmax(0, 1fr); }
    .patients-tete { padding: .6rem .6rem .1rem; }
    .porte, .patients .porte { min-height: 0; gap: .8rem; }
    .porte-phrase { margin-top: 0; }
    .portail-pied { justify-content: flex-start; }
}