/* p-histoire.css : la page Histoire d'Odratta (/histoire/), 11/11/2026.
   Page créée sur la demande de Joseph du 11/11/2026 (menu « La société » : Histoire, Mentions légales, Politique de
   confidentialité). Elle ne dit que ce qui est déjà publié ailleurs sur le site : Grenoble depuis 2017, plus de 300 TPE
   et PME, les deux marques, la phrase de la maison, la citation du gérant. Aucune date, aucun jalon ni aucun portrait
   inventé : ils s'ajouteront quand Joseph les donnera.
   La page tient en cinq blocs : le héros bleu et la photo des bureaux à cheval sur le bleu et le blanc, le récit avec la
   fiche « Odratta en bref », la phrase de la maison et quatre engagements, les deux marques (noir et bleu, comme le
   héros de l'accueil), puis l'appel final.
   Pas d'Odra dans le héros : la seule vraie photo de la maison y prend sa place. Odra n'apparaît qu'une fois, pouce
   levé, dans l'appel final.
   Composants partagés (site.css, studio.css) : .heros-produit, .fil-ariane, .heros-texte, .titre-section, .mark, .fiche,
   .st-methode-tete, .st-citation, .btn, .lien-fort, .appel-odra, .st-canaux, .st-adresse. Seules les classes phi- sont
   définies ici.
   Mouvement : la flèche du bouton avance de 3 px au survol d'un panneau de marque (200 ms), coupée sous « moins de
   mouvement ». Rien d'autre ne bouge. */

/* ---------- 1. Héros et photo ----------
   Le titre à gauche (7 colonnes), la phrase à droite, posée sur la ligne de base du titre. La photo des bureaux suit le
   héros et remonte dessus de 40 % de sa hauteur : --phi-monte se calcule depuis la largeur du conteneur et le format de
   la photo (21:9 sur ordinateur, 780 × 536 sous 900 px). Le héros garde ce retrait, plus l'écart entre le texte et la
   photo, en marge basse.
   <section class="heros-produit phi-heros">…<div class="phi-heros-grille"><h1>…</h1><p class="heros-texte">…</p></div>
   </section><div class="conteneur"><figure class="phi-photo"><picture>…</picture><figcaption>…</figcaption></figure></div> */
.page-histoire { --phi-monte: calc(min(100vw - 2 * var(--marge), var(--largeur)) * 0.1714); }
.phi-heros { padding-bottom: calc(var(--phi-monte) + clamp(40px, 4.4vw, 64px)); }
.phi-heros-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: end; }
.phi-heros-grille h1 { grid-column: 1 / span 7; max-width: none; margin: 0; }
.phi-heros-grille .heros-texte { grid-column: 9 / -1; max-width: none; margin: 0; padding-bottom: 0.35em; }
@media (min-width: 900px) { .phi-heros-grille h1 { font-size: var(--t-0); } }

.phi-photo { position: relative; z-index: 1; margin: calc(-1 * var(--phi-monte)) 0 0; }
.phi-photo picture { display: block; overflow: hidden; border-radius: var(--r-bloc); background: #1b1d24; }
.phi-photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 40%; }
.phi-photo figcaption { margin-top: 12px; font-size: var(--t-6); color: var(--ardoise); }

@media (max-width: 1023px) {
  .phi-heros-grille { display: block; }
  .phi-heros-grille .heros-texte { max-width: 36em; margin-top: 20px; padding-bottom: 0; }
}
@media (max-width: 899px) {
  .page-histoire { --phi-monte: calc((100vw - 2 * var(--marge)) * 0.275); }
  .phi-photo img { aspect-ratio: 780 / 536; object-position: center; }
}

/* ---------- 2. Le récit et la fiche ----------
   Le titre et le texte à gauche (colonnes 1 à 6), la fiche « Odratta en bref » à droite (8 à 12), alignée sur le haut
   du titre. Sous 1 024 px, la fiche passe sous le texte. La section suit la légende de la photo : sa marge haute est
   plus courte que celle d'une section ordinaire. */
.phi-recit { padding-top: clamp(56px, 6vw, 88px); }
.phi-recit-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.phi-recit-texte { grid-column: 1 / span 6; min-width: 0; }
.phi-recit-texte p { max-width: 56ch; margin: 24px 0 0; font-size: var(--t-4); line-height: 1.55; color: var(--ardoise); }
.phi-recit-texte p + p { margin-top: 0.9em; }
.phi-recit-texte .lien-fort { display: inline-block; margin-top: 28px; }
.phi-bref { grid-column: 8 / -1; min-width: 0; }
.phi-bref h3 { margin: 0; }
.phi-bref-note { margin: 16px 0 0; font-size: var(--t-6); color: var(--ardoise-2); }
@media (max-width: 1023px) {
  .phi-recit-grille { display: block; }
  .phi-recit-texte p { font-size: var(--t-5); }
  .phi-recit-texte p:first-of-type { font-size: var(--t-4); }
  .phi-bref { margin-top: 48px; }
}

/* ---------- 3. Les quatre engagements ----------
   Sous la phrase de la maison et la citation (.st-methode-tete), quatre colonnes ouvertes par un filet : la règle en
   gras, sa précision dessous. Ni icône ni numéro. Deux colonnes sous 1 024 px, une seule sous 600 px.
   <ul class="phi-engagements" role="list"><li><b>…</b><span>…</span></li>…</ul> */
.phi-engagements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--e-3); margin: 0; padding: 0; list-style: none; }
.phi-engagements li { min-width: 0; padding-top: 22px; border-top: var(--trait); }
.phi-engagements b { display: block; max-width: 18ch; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--encre); text-wrap: balance; }
.phi-engagements span { display: block; max-width: 34ch; margin-top: 10px; font-size: var(--t-5); line-height: 1.55; color: var(--ardoise); }
@media (max-width: 1023px) { .phi-engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .phi-engagements { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: var(--trait-fin); }
  .phi-engagements li { padding: 20px 0 22px; }
  .phi-engagements li + li { border-top: var(--trait-fin); }
  .phi-engagements b, .phi-engagements span { max-width: none; }
}

/* ---------- 4. Les deux marques ----------
   Deux panneaux côte à côte, aux couleurs du héros de l'accueil : Odratta Studio sur le noir, Odratta Hosting sur le
   bleu. Chaque panneau est cliquable en entier (le ::after du bouton le recouvre) ; le bouton reste le seul lien, lu
   une fois. Les deux logos tiennent dans la même boîte (celle du plus haut), pour que les deux devises partent de la
   même ligne ; la devise tient en deux lignes, comme sur l'accueil. Sous 768 px, les panneaux s'empilent.
   <div class="phi-marques"><article class="phi-marque phi-marque-studio"><h3><img class="phi-marque-logo" …>
   <span class="phi-marque-devise">…</span></h3><p>…</p><a class="btn btn-blanc phi-marque-lien" href="…">…</a></article>…</div> */
.phi-marques-titre { margin: 0 0 clamp(32px, 4vw, 48px); }
.phi-marques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.phi-marque {
  --focus: #fff;
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  min-height: clamp(320px, 28vw, 392px); padding: clamp(28px, 3.2vw, 44px);
  border-radius: var(--r-bloc); color: #fff;
}
.phi-marque-studio { background: #0a0b0e; }
.phi-marque-hosting { background: #2f59ec; }
.phi-marque h3 { margin: 0; }
.phi-marque-logo { display: block; width: clamp(128px, 12vw, 176px); height: auto; aspect-ratio: 480 / 197; object-fit: contain; object-position: left top; }
.phi-marque-devise { display: block; margin-top: clamp(20px, 2.2vw, 30px); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); font-weight: 680; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.phi-marque p { max-width: 36ch; margin: 16px 0 28px; font-size: var(--t-5); line-height: 1.5; }
.phi-marque-studio p { color: #c4c5cd; }
.phi-marque-hosting p { color: #eaf0ff; }
.phi-marque-lien { margin-top: auto; }
.phi-marque-studio .phi-marque-lien { --texte: #0a0b0e; --fond-survol: #e8e8ee; --fond-appui: #d6d6de; }
.phi-marque-hosting .phi-marque-lien { --fond: #fff; --texte: #1835b3; --fond-survol: #eaf0ff; --fond-appui: #d6e0ff; }
.phi-marque-lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-bloc); }
/* Sans transformation à l'appui : elle ferait du bouton le repère de son ::after, qui ne couvrirait plus le panneau au
   moment du clic (le sélecteur doit l'emporter sur « .btn:active:not([aria-disabled]) » de site.css). */
.phi-marques .phi-marque-lien.btn:active { transform: none; }
.phi-marque-lien .ic { width: 18px; height: 18px; transition: transform 200ms var(--sortie); }
@media (hover: hover) and (pointer: fine) {
  .phi-marque:hover .phi-marque-lien .ic { transform: translateX(3px); }
}

/* Le conseil, troisième métier de la maison, en une ligne sous les deux marques. */
.phi-conseil { max-width: 62ch; margin: clamp(28px, 3vw, 40px) 0 0; font-size: var(--t-4); line-height: 1.55; color: var(--ardoise); }
.phi-conseil a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .phi-conseil a:hover { color: var(--bleu-texte); }
}

@media (max-width: 767px) {
  .phi-marques { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .phi-marque { min-height: 0; }
  .phi-conseil { font-size: var(--t-5); }
}
@media (max-width: 599px) {
  .phi-marque-lien { align-self: stretch; }
}

/* ---------- 5. Moins de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .phi-marque-lien .ic { transition: none; }
  .phi-marque:hover .phi-marque-lien .ic { transform: none; }
}