@charset "UTF-8";
/* ===========================================================================
   SITE VITRINE D'UNE HUILERIE  --  STRUCTURE + PALETTE NEUTRE
   ---------------------------------------------------------------------------
   Ce fichier porte TOUTE la mise en page et une palette neutre complete. Une
   huilerie sans fichier de theme s'affiche donc correctement ; elle ressemble
   simplement aux autres. Le visage propre a chaque huilerie vit dans
   themes/<slug>.css, qui ne redefinit QUE des jetons --so-* (section 1).

   REFONTE DU 11 OCTOBRE 2026 -- le modele du secteur, tenu au plus haut
   (choix de l'exploitant parmi trois directions) :
       .so-hero     grande photo du lieu, nom en tres grand, une phrase, deux
                    actions, et la plaque des prix du jour A COTE du nom
       .so-about    une phrase, des faits a filets, le ticket (modele)
       .so-services la liste des prix des prestations, prix du jour en bout de ligne
       .so-mill     fond sombre : la salle, la fiche technique, les coches
       .so-process  la frise des quatre etapes
       .so-contact  coordonnees a filets, plan d'acces, message
       .so-foot     la facade, puis le pied sombre
   et une seconde page, l'adresse du QR code (infos/index.php, section 17) :
       .so-ip       la bande photo, la plaque des prix datee, les actions
   Une seule famille (Readex Pro), elargie pour les titres ; des filets
   plutot que des cadres ; une seule couleur d'or, reservee aux prix en
   direct et a l'action principale.

   REGLES
   - Proprietes LOGIQUES partout (inline-start, padding-inline, text-align:
     start). Jamais left/right pour la mise en page : la meme feuille sert
     l'arabe (RTL) et les langues latines. Exceptions reglees par html[dir] :
     transform-origin et le sens des degrades, qui n'ont pas de mot-cle logique.
   - Jamais d'espacement de lettres ni de capitales forcees sur l'arabe :
     letter-spacing et text-transform sont limites a html[dir="ltr"].
   - Aucune couleur hors des jetons de la section 1 (les melanges color-mix
     ne partent que de jetons).
   - Les montants sont en chiffres latins tabulaires.
   - TOUT LE MOUVEMENT EST CONDITIONNEL (section 14) : sans JS, sous
     prefers-reduced-motion ou a l'impression, la page est complete et
     immobile. Rien n'est cache en attendant un script.
   =========================================================================== */


/* ===========================================================================
   0. POLICE  --  Readex Pro (SIL OFL 1.1), arabe + latin, variable
   ---------------------------------------------------------------------------
   Deux axes : graisse (wght 160-700) et EXPANSION (HEXP 0-100). L'expansion
   donne les titres larges sans changer de famille ; le texte courant reste a
   0. Embarquee : aucun appel a Google Fonts (CLAUDE.md §3.6). Les URL doivent
   rester identiques a celles du <link rel="preload"> d'index.php.
   =========================================================================== */

@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("../assets/fonts/readexpro-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                   U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                   U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("../assets/fonts/readexpro-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Readex Pro";
    font-style: normal;
    font-weight: 160 700;
    font-display: swap;
    src: url("../assets/fonts/readexpro-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================================================
   1. JETONS  --  le SEUL endroit que redefinit un theme
   ---------------------------------------------------------------------------
   Deux mondes de couleur :
     clair   --so-bg, --so-bg-2, --so-surface, --so-ink, --so-ink-2, --so-line
     sombre  --so-deep, --so-deep-2, --so-deep-ink, --so-deep-ink-2,
             --so-deep-line : tete de page, plaque des prix, huilerie,
             message, pied
   et deux couleurs actives :
     --so-accent / --so-accent-deep   les marques (coches, icones, liens)
     --so-gold / --so-gold-deep       l'or : prix en direct, action principale
   Contrastes a tenir par un theme : --so-ink-2 et --so-accent >= 4.5:1 sur
   --so-bg et --so-bg-2 ; --so-deep-ink-2 et --so-gold-deep >= 4.5:1 sur
   --so-deep ; --so-gold-ink >= 4.5:1 sur --so-gold.
   =========================================================================== */

:root {
    color-scheme: light dark;

    --so-bg:            #F4F4F1;
    --so-bg-2:          #E9E9E4;
    --so-surface:       #FBFBF9;
    --so-ink:           #1C1C1F;
    --so-ink-2:         #4B4B50;
    --so-line:          #D5D5CF;
    --so-line-2:        #B9B9B2;

    --so-deep:          #22262B;
    --so-deep-2:        #2C3137;
    --so-deep-ink:      #EFEFEB;
    --so-deep-ink-2:    #B5B8BC;
    --so-deep-line:     rgb(239 239 235 / 0.16);

    --so-accent:        #2D6A8A;
    --so-accent-deep:   #9CCBE3;

    --so-gold:          #D2A23C;
    --so-gold-ink:      #1B1404;
    --so-gold-deep:     #E2B95A;

    /* Fond clair derriere le logo (barre, pied) */
    --so-medal:         #F4F4F1;

    /* Couleurs des marques -- un logo se reconnait a sa couleur. */
    --so-wa:            #25D366;
    --so-wa-icon:       #138A40;
    --so-fb:            #1877F2;
    --so-ig:            #D62976;

    /* Ombre : le noir ne sert qu'a ombrer. */
    --so-shade:         rgb(8 12 10);
    --so-shadow-1:      0 1px 2px color-mix(in srgb, var(--so-shade) 6%, transparent),
                        0 6px 18px -8px color-mix(in srgb, var(--so-shade) 16%, transparent);
    --so-shadow-2:      0 2px 6px color-mix(in srgb, var(--so-shade) 8%, transparent),
                        0 28px 60px -28px color-mix(in srgb, var(--so-shade) 42%, transparent);

    /* Typographie et mesures */
    --so-font:          "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
    --so-max:           75rem;
    --so-max-wide:      86rem;
    --so-gutter:        clamp(1rem, 0.55rem + 2.2vw, 2.75rem);
    --so-sec-pad:       clamp(4.5rem, 2.8rem + 5.5vw, 8.5rem);
    --so-head-h:        4.5rem;
    --so-r:             0.875rem;
    --so-r-l:           1.375rem;
    --so-ease:          cubic-bezier(0.16, 1, 0.3, 1);

    --so-focus:         var(--so-accent);
    --so-hexp:          0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --so-bg:          #121416;
        --so-bg-2:        #171A1D;
        --so-surface:     #1B1F22;
        --so-ink:         #ECEDEA;
        --so-ink-2:       #A9ADB1;
        --so-line:        #2A2E33;
        --so-line-2:      #3B4046;
        --so-deep:        #1A1E22;
        --so-deep-2:      #22272C;
        --so-accent:      #8CC3E0;
        --so-medal:       #ECEDEA;
    }
}


/* ===========================================================================
   2. SOCLE
   =========================================================================== */

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

/* L'expansion se recalcule sur CHAQUE element a partir de --so-hexp, qui
   s'herite : un titre elargi elargit ses enfants, le reste garde 0. */
* { font-variation-settings: "HEXP" var(--so-hexp, 0); }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--so-head-h) + 1rem);
    scrollbar-color: var(--so-line-2) var(--so-bg);
}

body {
    margin: 0;
    background: var(--so-bg);
    color: var(--so-ink);
    font-family: var(--so-font);
    font-size: 1.0625rem;
    font-weight: 350;
    line-height: 1.65;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
html[dir="rtl"] body { font-size: 1.125rem; line-height: 1.85; font-weight: 330; }

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
picture { display: contents; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: var(--so-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

button, input, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in srgb, var(--so-gold) 42%, transparent); color: var(--so-ink); }

:focus-visible {
    outline: 2.5px solid var(--so-focus);
    outline-offset: 3px;
    border-radius: 0.375rem;
}

.so-ico { inline-size: 1.25em; block-size: 1.25em; flex: none; }
/* Une fleche vers la fin de la ligne pointe a gauche en arabe. */
html[dir="rtl"] .so-ico--dir { transform: scaleX(-1); }

/* Chiffres : alignes et toujours latins. */
data, .so-rate__num, .so-sheet__n, .so-step__n, .so-coord__value, .so-coord__mono {
    font-variant-numeric: tabular-nums lining-nums;
}

.so-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.so-skip {
    position: absolute;
    z-index: 100;
    inset-inline-start: 1rem;
    inset-block-start: -4rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--so-gold);
    color: var(--so-gold-ink);
    font-weight: 500;
    text-decoration: none;
}
.so-skip:focus { inset-block-start: 1rem; }


/* ===========================================================================
   3. ELEMENTS COMMUNS  --  conteneur, titres, texte, boutons, figures
   =========================================================================== */

.so-wrap {
    inline-size: 100%;
    max-inline-size: var(--so-max);
    margin-inline: auto;
    padding-inline: var(--so-gutter);
}

.so-sec { padding-block: var(--so-sec-pad); }

.so-sec__head { max-inline-size: 42rem; }
.so-sec__head .so-text { margin-block-start: 1.25rem; }

.so-h2 {
    font-size: clamp(2rem, 1.3rem + 2.3vw, 3.375rem);
    font-weight: 280;
    line-height: 1.08;
    text-wrap: balance;
    --so-hexp: 44;
}
.so-h2--lead {
    font-size: clamp(2.125rem, 1.3rem + 2.5vw, 3.5rem);
    max-inline-size: 17em;
}
html[dir="ltr"] .so-h2 { letter-spacing: -0.012em; }
html[dir="rtl"] .so-h2 { font-weight: 360; line-height: 1.35; --so-hexp: 18; }

.so-h3 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
    --so-hexp: 30;
}
html[dir="rtl"] .so-h3 { --so-hexp: 8; }

.so-text {
    max-inline-size: 36em;
    color: var(--so-ink-2);
    text-wrap: pretty;
}
.so-text--lead {
    margin-block-start: 1.75rem;
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
    line-height: 1.6;
}

/* ------------------------------------------------------------------ boutons */

.so-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: 3rem;
    padding: 0.5rem 1.4em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s var(--so-ease), border-color 0.25s var(--so-ease),
                color 0.25s var(--so-ease), transform 0.25s var(--so-ease), box-shadow 0.25s var(--so-ease);
}
.so-btn:hover { text-decoration: none; transform: translateY(-1px); }
.so-btn:active { transform: translateY(0); }
.so-btn .so-ico { inline-size: 1.15em; block-size: 1.15em; }
.so-btn--s { min-block-size: 2.625rem; font-size: 0.9375rem; padding-inline: 1.1em; }

/* L'or : l'action principale, et seulement elle. */
.so-btn--gold {
    background: var(--so-gold);
    color: var(--so-gold-ink);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--so-surface) 40%, transparent),
                0 8px 18px -10px color-mix(in srgb, var(--so-shade) 55%, transparent);
}
.so-btn--gold:hover { background: color-mix(in oklab, var(--so-gold) 88%, var(--so-surface)); }

/* Sur fond sombre ou sur photo. */
.so-btn--clear {
    border-color: color-mix(in srgb, var(--so-deep-ink) 38%, transparent);
    color: var(--so-deep-ink);
    background: color-mix(in srgb, var(--so-deep) 18%, transparent);
}
.so-btn--clear:hover {
    border-color: var(--so-deep-ink);
    background: color-mix(in srgb, var(--so-deep-ink) 10%, transparent);
}

/* Sur fond clair. */
.so-btn--line {
    border-color: var(--so-line-2);
    color: var(--so-ink);
    background: transparent;
}
.so-btn--line:hover { border-color: var(--so-ink); background: var(--so-surface); }
.so-btn--line .so-ico { color: var(--so-accent); }

/* ---------------------------------------------------- temoin d'etat (prix) */

.so-dot {
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--so-gold);
}
.so-dot--stale, .so-dot--fallback {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ------------------------------------------------------------------ figures */

.so-fig figcaption {
    margin-block-start: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--so-ink-2);
}
.so-fig__frame {
    overflow: hidden;
    border-radius: var(--so-r-l);
    background: var(--so-bg-2);
    box-shadow: var(--so-shadow-2);
}
.so-fig__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }


/* ===========================================================================
   4. BARRE DU HAUT
   ---------------------------------------------------------------------------
   En clair sur la photo, puis sur un fond une fois la page defilee. Fixee
   seulement avec le JS (html.js) : sans script elle part avec la photo, au
   lieu de rester en clair sur une section claire.
   =========================================================================== */

.so-head {
    position: absolute;
    z-index: 50;
    inset-block-start: 0;
    inset-inline: 0;
    color: var(--so-deep-ink);
    --so-focus: var(--so-gold-deep);
}
html.js .so-head {
    position: fixed;
    transition: background-color 0.35s var(--so-ease), color 0.35s var(--so-ease),
                box-shadow 0.35s var(--so-ease);
}
.so-head.is-scrolled,
.so-head.is-open {
    background: var(--so-bg);
    color: var(--so-ink);
    box-shadow: 0 1px 0 var(--so-line), 0 10px 30px -22px color-mix(in srgb, var(--so-shade) 40%, transparent);
    --so-focus: var(--so-accent);
}

.so-head__in {
    display: flex;
    align-items: center;
    gap: 1.25rem 2rem;
    max-inline-size: var(--so-max-wide);
    min-block-size: var(--so-head-h);
    margin-inline: auto;
    padding-inline: var(--so-gutter);
}

.so-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    color: inherit;
    text-decoration: none;
}
.so-brand__mark {
    display: grid;
    place-items: center;
    inline-size: 2.625rem;
    block-size: 2.625rem;
    flex: none;
    border-radius: 50%;
    background: var(--so-medal);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--so-shade) 8%, transparent);
}
.so-brand__mark img { inline-size: 74%; block-size: auto; }
.so-brand__mark--l { inline-size: 3.75rem; block-size: 3.75rem; }
.so-brand__name {
    font-size: 1.0625rem;
    font-weight: 450;
    line-height: 1.2;
    --so-hexp: 70;
    white-space: nowrap;
}
html[dir="ltr"] .so-brand__name { letter-spacing: 0.01em; }
html[dir="rtl"] .so-brand__name { --so-hexp: 22; font-size: 1.125rem; }

.so-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-inline-start: auto;
}
.so-nav ul { display: flex; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.so-nav a {
    position: relative;
    display: inline-block;
    padding-block: 0.5rem;
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    text-decoration: none;
    opacity: 0.94;
}
.so-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.15rem;
    block-size: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.35s var(--so-ease);
}
html[dir="ltr"] .so-nav a::after { transform-origin: left; }
html[dir="rtl"] .so-nav a::after { transform-origin: right; }
.so-nav a:hover, .so-nav a.is-active { opacity: 1; }
.so-nav a:hover::after, .so-nav a.is-active::after { transform: scaleX(1); }

.so-langs {
    display: flex;
    gap: 0.125rem;
    margin: 0;
    padding: 0.2rem;
    list-style: none;
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    border-radius: 999px;
}
.so-langs a {
    display: block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-decoration: none;
    opacity: 0.82;
}
.so-langs a:hover { opacity: 1; }
.so-langs a[aria-current] {
    opacity: 1;
    font-weight: 550;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.so-head__call {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.625rem;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: var(--so-gold);
    color: var(--so-gold-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.25s var(--so-ease);
}
.so-head__call:hover { background: color-mix(in oklab, var(--so-gold) 88%, var(--so-surface)); }
.so-head__call .so-ico { inline-size: 1.05rem; block-size: 1.05rem; }

.so-menu-btn { display: none; }


/* ===========================================================================
   5. TETE DE PAGE  --  photo, nom, phrase, actions, plaque des prix
   =========================================================================== */

.so-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: 100vh;
    min-block-size: 100svh;
    background: var(--so-deep);
    color: var(--so-deep-ink);
    overflow: clip;
    --so-focus: var(--so-gold-deep);
    --so-scrim-dir: to right;
}
html[dir="rtl"] .so-hero { --so-scrim-dir: to left; }

.so-hero__media {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
}
.so-hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--so-img-focus, 50% 50%);
}
/* Voile : il monte du bas vers le vert de la plaque, et s'appuie du cote ou
   commence la lecture. La photo reste lisible en haut ; le texte, toujours
   au-dessus de 4.5:1. */
.so-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            var(--so-deep) 0%,
            color-mix(in srgb, var(--so-deep) 90%, transparent) 30%,
            color-mix(in srgb, var(--so-deep) 64%, transparent) 52%,
            color-mix(in srgb, var(--so-deep) 18%, transparent) 70%,
            transparent 82%),
        linear-gradient(var(--so-scrim-dir),
            color-mix(in srgb, var(--so-deep) 72%, transparent) 0%,
            color-mix(in srgb, var(--so-deep) 34%, transparent) 38%,
            transparent 62%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--so-deep) 78%, transparent) 0,
            color-mix(in srgb, var(--so-deep) 42%, transparent) 5rem,
            transparent 11rem);
}
/* Cadrage : --so-img-focus, pose en ligne par sections/hero.php ('hero.focus'). */

.so-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: end;
    inline-size: 100%;
    max-inline-size: var(--so-max-wide);
    margin-inline: auto;
    padding: calc(var(--so-head-h) + 5rem) var(--so-gutter) clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
}
.so-hero.has-plate .so-hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
}

.so-hero__name {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    font-weight: 260;
    line-height: 0.95;
}
/* Les premiers mots du nom : la meme graisse elargie, un cran plus petit --
   pas de capitales espacees, qui en feraient un surtitre. */
.so-hero__lead {
    font-size: clamp(1.375rem, 0.95rem + 1.6vw, 2.375rem);
    line-height: 1.1;
    --so-hexp: 100;
}
.so-hero__main {
    font-size: clamp(3.25rem, 1.4rem + 6.6vw, 6rem);
    --so-hexp: 100;
    text-wrap: balance;
}
html[dir="ltr"] .so-hero__main { letter-spacing: -0.015em; }
html[dir="rtl"] .so-hero__name { font-weight: 380; line-height: 1.2; gap: 0.15em; }
html[dir="rtl"] .so-hero__lead { --so-hexp: 22; font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem); }
html[dir="rtl"] .so-hero__main { --so-hexp: 46; font-size: clamp(3.25rem, 1.6rem + 6vw, 6rem); }

.so-hero__alt {
    margin-block-start: 1.125rem;
    font-size: 1.0625rem;
    color: var(--so-deep-ink);
    opacity: 0.88;
}
html[dir="rtl"] .so-hero__alt { --so-hexp: 60; font-size: 0.9375rem; }
/* Le nom dans l'autre ecriture porte son propre dir : « start » le collerait
   au mauvais bord. Il suit le debut de la PAGE. */
html[dir="ltr"] .so-hero__alt { text-align: left; }
html[dir="rtl"] .so-hero__alt { text-align: right; }

.so-hero__place {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1.25rem;
    font-size: 0.9375rem;
    color: var(--so-deep-ink);
}
.so-hero__place .so-ico { inline-size: 1.05rem; block-size: 1.05rem; color: var(--so-accent-deep); }
html[dir="ltr"] .so-hero__place { letter-spacing: 0.02em; }

.so-hero__tagline {
    max-inline-size: 30em;
    margin-block-start: 1rem;
    font-size: clamp(1.0625rem, 0.96rem + 0.42vw, 1.3125rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--so-deep-ink);
    text-wrap: pretty;
}

.so-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2.25rem;
}

/* ------------------------------------------------------------- les prix */

.so-plate {
    position: relative;
    padding: clamp(1.25rem, 1rem + 1vw, 1.875rem);
    border: 1px solid var(--so-deep-line);
    border-radius: var(--so-r-l);
    background: color-mix(in srgb, var(--so-deep) 90%, transparent);
    /* Sa propre couleur : posee sur un fond clair (page des prix), elle
       n'herite plus de celle de la tete de page. */
    color: var(--so-deep-ink);
    box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--so-shade) 80%, transparent);
    --so-focus: var(--so-gold-deep);
}

.so-plate__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--so-deep-line);
}
.so-plate__title {
    font-size: 1.1875rem;
    font-weight: 450;
    line-height: 1.3;
    --so-hexp: 55;
}
html[dir="rtl"] .so-plate__title { --so-hexp: 14; font-size: 1.25rem; }
.so-plate__status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--so-deep-ink-2);
}

.so-plate__list { margin: 0; padding: 0; list-style: none; }

.so-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding-block: 1.05rem;
    border-block-end: 1px solid var(--so-deep-line);
}
.so-rate:last-child { border-block-end: 0; padding-block-end: 0.25rem; }
.so-rate__title { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.so-rate__sub {
    margin-block-start: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--so-deep-ink-2);
}
.so-rate__how { text-align: end; }
.so-rate__value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35rem;
    line-height: 1;
}
.so-rate__num {
    font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.375rem);
    font-weight: 280;
    letter-spacing: -0.01em;
    color: var(--so-deep-ink);
    --so-hexp: 24;
}
.so-rate.is-live .so-rate__num { color: var(--so-gold-deep); }
.so-rate__cur { font-size: 0.875rem; color: var(--so-deep-ink-2); }
.so-rate__unit {
    margin-block-start: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--so-deep-ink-2);
}
.so-rate__none {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--so-deep-ink) 32%, transparent);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--so-deep-ink-2);
}

/* Une offre a la place du montant (« مجانية الرحي ») : en texte, a la taille
   d'un prix, sans or -- l'or reste au prix lu dans l'ERP, qui suit en petit
   sur toute la largeur, sous l'offre, pour qui emporte son huile. */
.so-rate--offer { row-gap: 0.6rem; }
.so-rate__offer {
    font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
    font-weight: 380;
    line-height: 1.15;
    color: var(--so-deep-ink);
    text-wrap: balance;
    --so-hexp: 24;
}
html[dir="rtl"] .so-rate__offer { font-weight: 460; line-height: 1.35; --so-hexp: 8; }
.so-rate__terms {
    grid-column: 1 / -1;
    text-align: end;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--so-deep-ink-2);
    text-wrap: pretty;
}
.so-terms__amt { white-space: nowrap; color: var(--so-deep-ink); }
.so-terms__unit { white-space: nowrap; }
.so-terms__amt data { font-size: 1.125em; font-weight: 500; }
.so-rate.is-live .so-terms__amt data { color: var(--so-gold-deep); }
.so-terms__none { white-space: nowrap; color: var(--so-deep-ink); }

.so-plate__source,
.so-plate__note {
    margin-block-start: 1rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--so-deep-line);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--so-deep-ink-2);
}
.so-plate__note { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.so-plate__note a { color: var(--so-gold-deep); font-weight: 500; }


/* ===========================================================================
   6. ACCUEIL
   =========================================================================== */

.so-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(2.5rem, 1rem + 5vw, 7rem);
    align-items: center;
}
.so-about__grid.is-solo { grid-template-columns: minmax(0, 1fr); }

.so-points {
    margin-block-start: 2.75rem;
    border-block-start: 1px solid var(--so-line);
}
/* Trois faits, en lignes a filets : le titre au debut, la phrase a cote.
   Pas de pictogramme -- la meme feuille repetee trois fois n'etait qu'un
   decor (revue de finition du 11/10/2026). */
.so-point {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 0.35rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
    align-items: baseline;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--so-line);
}
.so-point__t { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.so-point__x { color: var(--so-ink-2); max-inline-size: 36em; }

.so-about__fig { max-inline-size: 26rem; justify-self: end; inline-size: 100%; }
.so-about__fig .so-fig__frame { aspect-ratio: 4 / 5.6; }
.so-about__fig .so-fig__frame img { object-position: 50% 30%; }


/* ===========================================================================
   7. SERVICES  --  une liste de prix, comme le tableau du comptoir
   =========================================================================== */

.so-services { background: var(--so-bg-2); }
.so-services .so-sec__head { margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.so-pricelist { margin: 0; padding: 0; border-block-start: 1px solid var(--so-ink); }
/* Trois colonnes fixes pour toutes les lignes (nom, phrase, prix) : la
   phrase commence au meme endroit, qu'une ligne ait un prix ou non. */
.so-pricelist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 13.5rem;
    align-items: baseline;
    gap: 0.5rem clamp(1.5rem, 1rem + 3vw, 4rem);
    padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    border-block-end: 1px solid var(--so-line-2);
}
.so-pricelist__what { display: contents; }
.so-pricelist__price { grid-column: 3; }
.so-pricelist__name {
    font-size: clamp(1.3125rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
    --so-hexp: 32;
}
html[dir="rtl"] .so-pricelist__name { --so-hexp: 12; font-weight: 400; }
.so-pricelist__desc { color: var(--so-ink-2); max-inline-size: 32em; }

.so-pricelist__price { text-align: end; min-inline-size: 9rem; }
.so-pricelist__amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35rem;
    line-height: 1;
}
.so-pricelist__amount data {
    font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
    font-weight: 350;
    color: var(--so-ink);
    font-variant-numeric: tabular-nums lining-nums;
    --so-hexp: 20;
}
.so-pricelist__amount span { font-size: 0.875rem; color: var(--so-ink-2); }
.so-pricelist__unit {
    margin-block-start: 0.45rem;
    font-size: 0.8125rem;
    color: var(--so-ink-2);
}
.so-pricelist__unit .so-dot { margin-inline-end: 0.45rem; vertical-align: 0.1em; }
.so-pricelist__offer {
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
    font-weight: 350;
    line-height: 1.15;
    color: var(--so-ink);
    text-wrap: balance;
    --so-hexp: 20;
}
html[dir="rtl"] .so-pricelist__offer { font-weight: 450; line-height: 1.35; --so-hexp: 6; }
.so-pricelist__terms { line-height: 1.5; text-wrap: pretty; }
.so-pricelist__terms .so-terms__amt,
.so-pricelist__terms .so-terms__none { color: var(--so-ink); }
.so-pricelist__none {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border: 1px dashed var(--so-line-2);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--so-ink-2);
}


/* ===========================================================================
   8. L'HUILERIE  --  fond sombre, fiche technique
   =========================================================================== */

.so-mill {
    background: var(--so-deep);
    color: var(--so-deep-ink);
    --so-focus: var(--so-gold-deep);
}
.so-mill .so-text, .so-mill .so-fig figcaption { color: var(--so-deep-ink-2); }

.so-mill__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 5vw, 7rem);
    align-items: center;
}
.so-mill__grid.is-solo { grid-template-columns: minmax(0, 1fr); }

.so-mill__fig .so-fig__frame {
    aspect-ratio: 3 / 3.9;
    background: var(--so-deep-2);
    box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--so-shade) 90%, transparent);
}
.so-mill__fig { max-inline-size: 30rem; justify-self: center; inline-size: 100%; }
.so-mill__fig .so-fig__frame img { object-position: 50% 0; }

.so-mill__body .so-text { margin-block-start: 1.25rem; }

/* La fiche : une liste a filets, comme le panneau du projet -- d'abord les
   capacites (libelle a gauche, valeur a droite), puis les installations. */
.so-sheet__title { margin-block: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) 0.85rem; color: var(--so-deep-ink-2); font-weight: 450; }
.so-sheet { border-block-start: 1px solid var(--so-deep-ink); }
.so-sheet__facts, .so-sheet__checks { margin: 0; padding: 0; list-style: none; }
.so-sheet__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.85rem;
    border-block-end: 1px solid var(--so-deep-line);
}
.so-sheet__row dt { color: var(--so-deep-ink-2); }
.so-sheet__row dd { margin: 0; text-align: end; }
.so-sheet__n {
    font-size: 1.25rem;
    font-weight: 450;
    color: var(--so-deep-ink);
    font-variant-numeric: tabular-nums lining-nums;
}
.so-sheet__checks .so-sheet__row { justify-content: flex-start; gap: 0.85rem; }
.so-sheet__checks .so-ico {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    flex: none;
    align-self: center;
    color: var(--so-accent-deep);
}


/* ===========================================================================
   9. TRITURATION  --  la frise
   =========================================================================== */

.so-process__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 1rem + 5vw, 7rem);
    align-items: center;
    margin-block-end: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.so-process__head.is-solo { grid-template-columns: minmax(0, 1fr); }
.so-process__fig { max-inline-size: 26rem; justify-self: end; inline-size: 100%; }
.so-process__fig .so-fig__frame { aspect-ratio: 4 / 3; }

.so-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Le trait qui relie les etapes. */
.so-steps::before {
    content: "";
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline: 1.5rem calc(100% / var(--n, 4) - 1.5rem);
    block-size: 1px;
    background: var(--so-line-2);
    transition: transform 1.6s var(--so-ease);
}
html[dir="ltr"] .so-steps::before { transform-origin: left; }
html[dir="rtl"] .so-steps::before { transform-origin: right; }

.so-step { position: relative; }
.so-step__n {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--so-line-2);
    border-radius: 50%;
    background: var(--so-bg);
    color: var(--so-accent);
    font-size: 1rem;
    font-weight: 500;
    transition: transform 0.6s var(--so-ease), background-color 0.6s var(--so-ease),
                color 0.6s var(--so-ease), border-color 0.6s var(--so-ease);
}
.so-step__title {
    margin-block-start: 1.375rem;
    font-size: 1.1875rem;
    font-weight: 450;
    line-height: 1.3;
    --so-hexp: 30;
}
html[dir="rtl"] .so-step__title { --so-hexp: 6; font-weight: 500; }
.so-step__text { margin-block-start: 0.6rem; color: var(--so-ink-2); text-wrap: pretty; }


/* ===========================================================================
   10. PHOTOS ET VIDEOS  (section facultative)
   =========================================================================== */

.so-gallery .so-sec__head { margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.so-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 15rem;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.so-mosaic > li:first-child { grid-row: span 2; grid-column: span 2; }
.so-mosaic .so-fig { block-size: 100%; display: flex; flex-direction: column; }
.so-mosaic .so-fig > img, .so-mosaic .so-fig > picture img {
    flex: 1;
    min-block-size: 0;
    inline-size: 100%;
    object-fit: cover;
    border-radius: var(--so-r);
}
.so-films {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.so-films video { inline-size: 100%; border-radius: var(--so-r); background: var(--so-deep); }


/* ===========================================================================
   11. VENIR A L'HUILERIE
   =========================================================================== */

.so-contact { background: var(--so-bg-2); }

.so-contact__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.so-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.so-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: stretch;
}
.so-contact__grid.is-solo { grid-template-columns: minmax(0, 1fr); }

.so-coords { margin: 0; border-block-start: 1px solid var(--so-line-2); }
.so-coord {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--so-line);
}
.so-coord dt {
    grid-column: 1;
    grid-row: 1 / span 4;
    display: flex;
    align-items: center;
    align-self: start;
    gap: 0.6rem;
    min-block-size: 1.75rem;
    font-size: 0.875rem;
    color: var(--so-ink-2);
}
.so-coord dt .so-ico { inline-size: 1.15rem; block-size: 1.15rem; color: var(--so-accent); }
.so-coord dd { grid-column: 2; }
.so-coord__main { font-size: 1.0625rem; line-height: 1.55; }
.so-coord__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; min-block-size: 1.75rem; }
.so-coord__label { font-size: 0.875rem; color: var(--so-ink-2); }
.so-coord__value {
    color: var(--so-ink);
    font-size: 1.125rem;
    font-weight: 450;
    text-decoration: none;
}
.so-coord__value:hover { text-decoration: underline; color: var(--so-accent); }
.so-coord__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-block-start: 0.35rem;
    font-size: 0.875rem;
    color: var(--so-ink-2);
}
.so-coord__hours { font-size: 1rem; }

.so-copy {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--so-line);
    border-radius: 50%;
    background: transparent;
    color: var(--so-ink-2);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.so-copy:hover { border-color: var(--so-ink-2); color: var(--so-ink); background: var(--so-surface); }
.so-copy .so-ico { inline-size: 1rem; block-size: 1rem; }
.so-copy[hidden] { display: none; }
.so-copy__ok {
    position: absolute;
    inset-block-end: calc(100% + 0.4rem);
    padding: 0.2rem 0.55rem;
    border-radius: 0.375rem;
    background: var(--so-ink);
    color: var(--so-bg);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.so-copy.is-copied { border-color: var(--so-accent); color: var(--so-accent); }
.so-copy.is-copied .so-copy__ok { opacity: 1; transform: none; }

.so-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.so-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--so-line-2);
    border-radius: 999px;
    color: var(--so-ink);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.so-social:hover { border-color: var(--so-ink); background: var(--so-surface); }
.so-social .so-ico { inline-size: 1.1rem; block-size: 1.1rem; }
.so-social--facebook .so-ico { color: var(--so-fb); }
.so-social--instagram .so-ico { color: var(--so-ig); }
.so-social--whatsapp .so-ico { color: var(--so-wa-icon); }

/* ------------------------------------------------------------ plan d'acces */

.so-map {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-block-size: 27rem;
    overflow: hidden;
    border-radius: var(--so-r-l);
    background: var(--so-deep);
    color: var(--so-deep-ink);
    --so-focus: var(--so-gold-deep);
}
/* Le dessin ne montre que ce qui est connu : un quadrillage de carte,
   l'epingle et les coordonnees de l'entree. Aucune route inventee. */
.so-map__art {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.85rem;
    min-block-size: 12rem;
    background-image:
        linear-gradient(var(--so-deep-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--so-deep-line) 1px, transparent 1px);
    background-size: 3rem 3rem;
    background-position: center;
}
.so-map__pin {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border: 1px solid var(--so-deep-ink-2);
    border-radius: 50%;
    background: var(--so-deep);
    color: var(--so-deep-ink);
}
.so-map__pin .so-ico { inline-size: 1.4rem; block-size: 1.4rem; }
.so-map__coords {
    padding: 0.2rem 0.6rem;
    background: var(--so-deep);
    font-size: 0.8125rem;
    color: var(--so-deep-ink-2);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.02em;
}

.so-map__body {
    padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.5rem;
    border-block-start: 1px solid var(--so-deep-line);
}
.so-map__title { font-size: 1.125rem; font-weight: 500; --so-hexp: 40; }
html[dir="rtl"] .so-map__title { --so-hexp: 10; }
.so-map__addr { margin-block-start: 0.35rem; font-size: 0.9375rem; color: var(--so-deep-ink-2); }
.so-map__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1rem; }
.so-map__actions:not(:has(:not([hidden]))) { display: none; }
.so-map [hidden] { display: none; }
.so-map__note { margin-block-start: 0.85rem; font-size: 0.75rem; line-height: 1.5; color: var(--so-deep-ink-2); }
.so-map iframe {
    position: absolute;
    z-index: 2;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

/* ----------------------------------------------------------------- message */

.so-msg {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 1rem + 3vw, 4rem);
    margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
    padding: clamp(1.75rem, 1rem + 3vw, 3.75rem);
    border-radius: var(--so-r-l);
    background: var(--so-deep);
    color: var(--so-deep-ink);
    --so-focus: var(--so-gold-deep);
}
.so-msg__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    font-weight: 280;
    line-height: 1.15;
    --so-hexp: 55;
}
html[dir="rtl"] .so-msg__title { --so-hexp: 14; font-weight: 380; line-height: 1.4; }
.so-msg__intro p { margin-block-start: 1rem; color: var(--so-deep-ink-2); max-inline-size: 26em; }

.so-msg__field + .so-msg__field { margin-block-start: 1rem; }
.so-msg__field label {
    display: block;
    margin-block-end: 0.4rem;
    font-size: 0.875rem;
    color: var(--so-deep-ink-2);
}
.so-msg__field input,
.so-msg__field textarea {
    display: block;
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--so-deep-ink) 22%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--so-deep-ink) 6%, transparent);
    color: var(--so-deep-ink);
    caret-color: var(--so-gold-deep);
    transition: border-color 0.2s, background-color 0.2s;
}
.so-msg__field textarea { resize: vertical; min-block-size: 7.5rem; }
.so-msg__field input:hover, .so-msg__field textarea:hover { border-color: color-mix(in srgb, var(--so-deep-ink) 40%, transparent); }
.so-msg__field input:focus, .so-msg__field textarea:focus {
    border-color: var(--so-gold-deep);
    background: color-mix(in srgb, var(--so-deep-ink) 9%, transparent);
    outline: none;
}
.so-msg__field input:focus-visible, .so-msg__field textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--so-gold-deep) 60%, transparent);
    outline-offset: 1px;
}
.so-msg__send { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.25rem; }
.so-msg__send [hidden] { display: none; }


/* ===========================================================================
   12. PIED DE PAGE
   =========================================================================== */

.so-foot__photo {
    position: relative;
    block-size: clamp(15rem, 8rem + 22vw, 32rem);
    overflow: hidden;
    background: var(--so-deep);
}
.so-foot__photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 64%;
}
.so-foot__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--so-deep) 0%, transparent 42%);
}

.so-foot {
    background: var(--so-deep);
    color: var(--so-deep-ink);
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem;
    --so-focus: var(--so-gold-deep);
}
.so-foot__in {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem clamp(1.5rem, 1rem + 2vw, 3.5rem);
    max-inline-size: var(--so-max);
    margin-inline: auto;
    padding-inline: var(--so-gutter);
}
.so-foot__name {
    margin-block-start: 1.25rem;
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
    font-weight: 280;
    line-height: 1.2;
    --so-hexp: 85;
}
html[dir="rtl"] .so-foot__name { --so-hexp: 30; font-weight: 400; }
.so-foot__place { margin-block-start: 0.6rem; font-size: 0.875rem; color: var(--so-deep-ink-2); max-inline-size: 26em; }

.so-foot__h { margin-block-end: 0.85rem; font-size: 0.875rem; font-weight: 500; color: var(--so-deep-ink-2); }
.so-foot__col ul { margin: 0; padding: 0; list-style: none; }
.so-foot__col li + li { margin-block-start: 0.35rem; }
.so-foot__col a {
    display: inline-block;
    padding-block: 0.2rem;
    color: var(--so-deep-ink);
    font-size: 0.9375rem;
    text-decoration: none;
}
.so-foot__col a:hover { text-decoration: underline; color: var(--so-gold-deep); }
.so-foot__col a[aria-current] {
    font-weight: 550;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
}

.so-foot__base {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--so-deep-line);
    font-size: 0.8125rem;
    color: var(--so-deep-ink-2);
}


/* ===========================================================================
   13. BARRE D'ACTIONS DU TELEPHONE, RETOUR EN HAUT
   =========================================================================== */

.so-callbar { display: none; }

.so-totop {
    position: fixed;
    z-index: 40;
    inset-inline-end: 1.25rem;
    inset-block-end: 1.25rem;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: var(--so-deep);
    color: var(--so-deep-ink);
    box-shadow: var(--so-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.3s var(--so-ease), transform 0.3s var(--so-ease), visibility 0.3s;
}
.so-totop.is-visible { opacity: 1; visibility: visible; transform: none; }


/* ===========================================================================
   14. MOUVEMENT  --  un seul moment, a l'ouverture ; la frise au passage
   ---------------------------------------------------------------------------
   html.so-motion est pose par assets/js/site.js, et seulement si le visiteur
   accepte le mouvement. html.so-bascule (changement de langue) l'annule : la
   page ne « s'ouvre » qu'une fois. Les animations partent de l'etat final
   (fill: backwards) : interrompues, elles laissent la page complete.
   =========================================================================== */

@keyframes so-settle {
    from { transform: scale(1.07); }
}
@keyframes so-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
}

html.so-motion:not(.so-bascule) .so-hero__media img {
    animation: so-settle 2.6s var(--so-ease) backwards;
}
html.so-motion:not(.so-bascule) .so-hero__name,
html.so-motion:not(.so-bascule) .so-hero__alt,
html.so-motion:not(.so-bascule) .so-hero__tagline,
html.so-motion:not(.so-bascule) .so-hero__actions,
html.so-motion:not(.so-bascule) .so-plate {
    animation: so-rise 1.1s var(--so-ease) backwards;
}
html.so-motion:not(.so-bascule) .so-hero__alt      { animation-delay: 0.12s; }
html.so-motion:not(.so-bascule) .so-hero__tagline  { animation-delay: 0.2s; }
html.so-motion:not(.so-bascule) .so-hero__actions  { animation-delay: 0.3s; }
html.so-motion:not(.so-bascule) .so-plate          { animation-delay: 0.42s; }

/* La frise se trace quand elle arrive a l'ecran ; chaque etape s'allume
   quand le trait l'atteint. */
html.so-motion .so-steps:not(.is-drawn)::before { transform: scaleX(0); }
html.so-motion .so-steps:not(.is-drawn) .so-step__n { transform: scale(0.82); }
html.so-motion .so-steps.is-drawn .so-step__n {
    transition-delay: calc(var(--i, 0) * 0.32s + 0.1s);
    background: var(--so-accent);
    border-color: var(--so-accent);
    color: var(--so-bg);
}
/* Sans mouvement, les etapes sont deja allumees. */
html:not(.so-motion) .so-step__n {
    background: var(--so-accent);
    border-color: var(--so-accent);
    color: var(--so-bg);
}

/* Changement de langue : fondu enchaine (View Transitions), court. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
html.so-chargement { cursor: progress; }

@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;
    }
}


/* ===========================================================================
   15. TAILLES D'ECRAN
   =========================================================================== */

/* --- barre du haut : le menu passe derriere un bouton (avec le JS) ------- */
@media (max-width: 72rem) {
    html.js .so-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-block-size: 2.75rem;
        margin-inline-start: auto;
        padding: 0.4rem 0.95rem;
        border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font-size: 0.9375rem;
        cursor: pointer;
    }
    .so-menu-btn__ico { display: grid; }
    .so-menu-btn__ico .so-ico { inline-size: 1.15rem; block-size: 1.15rem; }
    .so-menu-btn__ico--close { display: none; }
    .so-head.is-open .so-menu-btn__ico--open { display: none; }
    .so-head.is-open .so-menu-btn__ico--close { display: grid; }

    html.js .so-menu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        margin: 0;
        padding: 0.5rem var(--so-gutter) 1.5rem;
        background: var(--so-bg);
        color: var(--so-ink);
        border-block-start: 1px solid var(--so-line);
        box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--so-shade) 45%, transparent);
    }
    html.js .so-head.is-open .so-menu { display: flex; }
    html.js .so-nav ul { flex-direction: column; gap: 0; }
    html.js .so-nav li + li { border-block-start: 1px solid var(--so-line); }
    html.js .so-nav a { display: block; padding-block: 0.85rem; font-size: 1.0625rem; opacity: 1; }
    html.js .so-nav a::after { display: none; }
    html.js .so-langs { align-self: flex-start; }

    /* Sans JS : les liens restent visibles, sur une ligne qui defile. */
    html:not(.js) .so-head__in { flex-wrap: wrap; padding-block: 0.5rem; }
    html:not(.js) .so-menu {
        order: 3;
        inline-size: 100%;
        margin: 0;
        overflow-x: auto;
        gap: 1rem;
    }
    html:not(.js) .so-nav ul { flex-wrap: nowrap; }
    html:not(.js) .so-nav a { white-space: nowrap; }
}

/* --- tablette : une colonne -------------------------------------------- */
@media (max-width: 64rem) {
    .so-hero { display: block; min-block-size: 0; }
    .so-hero__media { inset: 0 0 auto; block-size: min(78svh, 46rem); }
    .so-hero__media::after {
        background:
            linear-gradient(to top,
                var(--so-deep) 0%,
                color-mix(in srgb, var(--so-deep) 92%, transparent) 34%,
                color-mix(in srgb, var(--so-deep) 72%, transparent) 56%,
                color-mix(in srgb, var(--so-deep) 22%, transparent) 76%,
                transparent 86%),
            linear-gradient(to bottom,
                color-mix(in srgb, var(--so-deep) 80%, transparent) 0,
                color-mix(in srgb, var(--so-deep) 45%, transparent) 4.5rem,
                transparent 10rem);
    }
    .so-hero.has-plate .so-hero__in { grid-template-columns: minmax(0, 1fr); }
    .so-hero__in { padding-block-start: max(calc(var(--so-head-h) + 8rem), 34svh); }
    .so-plate { max-inline-size: 34rem; }

    .so-about__grid,
    .so-mill__grid,
    .so-process__head,
    .so-contact__grid,
    .so-msg { grid-template-columns: minmax(0, 1fr); }
    .so-about__fig { justify-self: start; max-inline-size: 24rem; }
    .so-mill__fig, .so-process__fig { justify-self: start; }
    .so-pricelist__row { grid-template-columns: minmax(0, 1fr) 9rem; }
    .so-pricelist__what { display: block; }
    .so-pricelist__price { grid-column: 2; }
    .so-pricelist__desc { margin-block-start: 0.5rem; }
    .so-map { min-block-size: 22rem; }

    .so-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-foot__brand { grid-column: 1 / -1; }
}

/* --- telephone ---------------------------------------------------------- */
@media (max-width: 48rem) {
    :root { --so-head-h: 4rem; }

    .so-head__call { display: none; }
    .so-brand__mark { inline-size: 2.375rem; block-size: 2.375rem; }

    .so-hero__media { block-size: min(72svh, 38rem); }
    .so-hero__in { padding-block-start: max(calc(var(--so-head-h) + 7rem), 30svh); gap: 1.75rem; }
    .so-hero__tagline { margin-block-start: 1.125rem; }
    /* La barre d'actions du bas porte deja Appeler, WhatsApp, Itineraire. */
    body:has(.so-callbar) .so-hero__actions { display: none; }
    .so-plate { padding: 1.125rem 1.125rem 1rem; }

    .so-pricelist__row { grid-template-columns: minmax(0, 1fr); }
    .so-pricelist__price { grid-column: 1; text-align: start; min-inline-size: 0; }
    .so-pricelist__amount { justify-content: flex-start; }
    html[dir="rtl"] .so-pricelist__amount { justify-content: flex-end; }

    .so-point { grid-template-columns: minmax(0, 1fr); }

    /* La frise devient verticale : le trait court le long des numeros. */
    .so-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .so-steps::before {
        inset-block: 1.5rem 1.5rem;
        inset-inline: 1.5rem auto;
        inline-size: 1px;
        block-size: auto;
        transform-origin: top;
    }
    html.so-motion .so-steps:not(.is-drawn)::before { transform: scaleY(0); }
    .so-step {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: 1.25rem;
        padding-block-end: 1.75rem;
    }
    .so-step__n { grid-row: span 2; }
    .so-step__title { margin-block-start: 0.6rem; }
    .so-step__text { margin-block-start: 0.35rem; }

    .so-contact__head { flex-direction: column; align-items: flex-start; }
    .so-coord { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
    .so-coord dt { grid-row: auto; }
    .so-coord dd { grid-column: 1; }
    .so-map { min-block-size: 24rem; }

    .so-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }

    .so-foot { padding-block-end: 1.5rem; }
    .so-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 2rem 1.5rem; }
    .so-foot__col:has(a[href^="tel:"], a[href^="mailto:"]) { grid-column: 1 / -1; }

    /* La barre d'actions, a portee de pouce. */
    .so-callbar {
        position: fixed;
        z-index: 45;
        inset-inline: 0;
        inset-block-end: 0;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
        background: var(--so-deep);
        box-shadow: 0 -12px 30px -18px color-mix(in srgb, var(--so-shade) 70%, transparent);
        --so-focus: var(--so-gold-deep);
    }
    .so-callbar__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-block-size: 3.25rem;
        border-radius: 0.875rem;
        color: var(--so-deep-ink);
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        background: color-mix(in srgb, var(--so-deep-ink) 8%, transparent);
    }
    .so-callbar__btn .so-ico { inline-size: 1.25rem; block-size: 1.25rem; }
    .so-callbar__btn--call { background: var(--so-gold); color: var(--so-gold-ink); }
    body:has(.so-callbar) { padding-block-end: calc(4.25rem + env(safe-area-inset-bottom)); }
    body:has(.so-callbar) .so-totop { inset-block-end: calc(5.25rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 30rem) {
    .so-hero__main { font-size: clamp(2.75rem, 1.2rem + 9vw, 3.5rem); }
    html[dir="rtl"] .so-hero__main { font-size: clamp(2.75rem, 1.2rem + 9vw, 3.5rem); }
    .so-rate { gap: 0.75rem; }
    .so-btn { padding-inline: 1.15em; }
}


/* ===========================================================================
   16. IMPRESSION
   =========================================================================== */

@media print {
    .so-head, .so-skip, .so-totop, .so-callbar, .so-map, .so-msg,
    .so-hero__actions, .so-foot__photo, .so-copy { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .so-hero, .so-mill, .so-foot, .so-plate { background: #FFFFFF; color: #000000; }
    .so-hero__media { display: none; }
    .so-hero__in { padding-block: 1rem; }
    .so-rate__num, .so-rate.is-live .so-rate__num, .so-sheet__n { color: #000000; }
    .so-rate__sub, .so-rate__unit, .so-rate__cur, .so-plate__status, .so-plate__source,
    .so-mill .so-text, .so-sheet__row dt, .so-foot__place, .so-foot__base { color: #333333; }
    .so-sec { padding-block: 1.5rem; }
}


/* ===========================================================================
   17. PAGE DES PRIX DU QR CODE  --  infos/index.php (<domaine>/infos)
   ---------------------------------------------------------------------------
   La tete de l'accueil, ramenee a ce qu'on vient chercher en scannant :
   la haie d'oliviers en bande sous un voile, le nom, puis la plaque des prix
   -- datee en toutes lettres -- qui chevauche la bande, et les actions.
   Une colonne de telephone, centree sur ordinateur.

   FOND CLAIR SOUS LA PLAQUE, choisi pour la scene : on lit cette page dehors,
   au soleil, a la porte de l'huilerie ou dans la voiture. La plaque reste
   sombre -- c'est le tableau des prix de l'accueil, le meme objet.
   Sans JS la page est complete et immobile.
   =========================================================================== */

.so-ip { --so-ip-max: 34rem; }

.so-ip__band {
    position: relative;
    isolation: isolate;
    padding-block-end: 6.5rem;           /* la plaque remonte de 4rem dessus */
    background: var(--so-deep);
    color: var(--so-deep-ink);
    --so-focus: var(--so-gold-deep);
}
.so-ip__photo img {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
/* Voile : le nom reste lisible sur les feuilles, et le bas de la bande se
   fond dans la couleur de la plaque. */
.so-ip__band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--so-deep) 82%, transparent) 0,
        color-mix(in srgb, var(--so-deep) 58%, transparent) 46%,
        color-mix(in srgb, var(--so-deep) 88%, transparent) 78%,
        var(--so-deep) 100%);
}

.so-ip__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-inline-size: var(--so-ip-max);
    margin-inline: auto;
    padding-block-start: max(1rem, env(safe-area-inset-top));
    padding-inline: var(--so-gutter);
}

.so-ip__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    color: inherit;
    text-decoration: none;
}
.so-ip__name {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.25;
    --so-hexp: 52;
}
html[dir="rtl"] .so-ip__name { font-size: 1.1875rem; --so-hexp: 16; }

.so-ip__langs {
    display: flex;
    flex: none;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.so-ip__langs a {
    display: grid;
    place-items: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding-inline: 0.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--so-deep-ink-2);
    text-decoration: none;
    transition: color 0.2s var(--so-ease), background-color 0.2s var(--so-ease);
}
.so-ip__langs a:hover {
    color: var(--so-deep-ink);
    background: color-mix(in srgb, var(--so-deep-ink) 10%, transparent);
}
.so-ip__langs a[aria-current] {
    color: var(--so-deep-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--so-deep-ink) 50%, transparent);
}

.so-ip__main {
    position: relative;
    max-inline-size: var(--so-ip-max);
    margin: -4rem auto 0;
    padding-inline: var(--so-gutter);
}

/* --------------------------------------------- la plaque, en page entiere */

.so-plate--page {
    padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
    background: var(--so-deep);
    box-shadow: var(--so-shadow-2);
}
.so-plate--page .so-plate__head {
    display: grid;
    gap: 0.25rem;
    padding-block-end: 1.1rem;
}
.so-plate--page .so-plate__title {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    font-weight: 380;
    line-height: 1.1;
    --so-hexp: 62;
}
html[dir="rtl"] .so-plate--page .so-plate__title {
    font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.375rem);
    font-weight: 480;
    line-height: 1.3;
    --so-hexp: 16;
}
.so-plate__day {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--so-deep-ink);
}
.so-plate--page .so-plate__status { margin-block-start: 0.45rem; }
.so-plate--page .so-rate { padding-block: 1.2rem; }
.so-plate--page .so-rate:last-child { padding-block-end: 0.35rem; }
.so-plate--page .so-rate__title { font-size: 1.0625rem; }
.so-plate--page .so-rate__num { font-size: clamp(2.125rem, 1.8rem + 1.4vw, 2.75rem); }

/* ------------------------------------------------------------- actions */

.so-ip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-block-start: 1.25rem;
}
.so-ip__actions .so-btn { flex: 1 1 8rem; min-block-size: 3.25rem; }
.so-ip__actions .so-ip__call { flex-basis: 100%; min-block-size: 3.5rem; font-size: 1.0625rem; }
.so-ip__num { font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.so-ip__wa .so-ico { color: var(--so-wa-icon); }

.so-ip__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1.25rem;
    margin-block-start: 1.5rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--so-line);
}
.so-ip__link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-block-size: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--so-accent);
    text-decoration: none;
    cursor: pointer;
}
.so-ip__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.so-ip__link .so-ico { inline-size: 1.15em; block-size: 1.15em; }

.so-ip__foot {
    max-inline-size: var(--so-ip-max);
    margin: 1.75rem auto 0;
    padding: 0 var(--so-gutter) max(2rem, env(safe-area-inset-bottom));
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--so-ink-2);
}

/* Ordinateur : une bande plus haute, la colonne au centre. */
@media (min-width: 48rem) {
    .so-ip__band { padding-block-end: 9rem; }
    .so-ip__bar { padding-block-start: 1.75rem; }
    .so-ip__main { margin-block-start: -5rem; }
}

@media print {
    .so-ip__photo, .so-ip__langs, .so-ip__actions, .so-ip__more { display: none !important; }
    .so-ip__band { padding-block-end: 1rem; background: #FFFFFF; color: #000000; }
    .so-ip__band::after { display: none; }
    .so-ip__main { margin-block-start: 0; }
    .so-plate--page { box-shadow: none; border-color: #999999; }
    .so-plate__day, .so-rate__offer, .so-terms__amt, .so-terms__none { color: #000000; }
}