/*
Theme Name: Ouessant Presse
Theme URI: https://www.ouessant-presse.bzh
Description: Theme enfant de Twenty Twenty-Five pour la vitrine d'Ouessant Presse. Palette marine, sable et soleil, polices auto-hebergees, page d'accueil composee, sections empilables sans titre automatique, et un bandeau d'information pilote par n8n en tete de site.
Author: Ouessant Presse
Template: twentytwentyfive
Version: 4.1.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ouessant-presse
*/

/* ---------------------------------------------------------------------------
   Presque tout se regle dans theme.json. On n'ecrit ici que ce qu'aucun
   reglage de bloc ne permet d'obtenir.
   --------------------------------------------------------------------------- */

p {
	text-wrap: pretty;
}

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

/* 1. Bloc Details : pas de triangle navigateur, tout le resume cliquable. */
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* 2. Le focus clavier doit rester franchement visible sur fond creme. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-chaud, #a34d2f);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   3. Le bandeau d'information (shortcode [bandeau_ouessant], ecrit par n8n).
      Il est en TETE de site, avant le nom du magasin : c'est la premiere
      chose vue, et c'est le seul bloc que l'injecteur reecrit.
   --------------------------------------------------------------------------- */

.op-bandeau {
	border-bottom: 3px solid var(--wp--preset--color--nuit, #0f2033);
	padding: 0.8rem var(--wp--preset--spacing--50, 1.5rem);
}

.op-bandeau__contenu {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1160px);
	font-size: 1.05rem;
	line-height: 1.45;
}

.op-bandeau__etiquette {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Deux tons seulement, et chacun porte un MOT en plus de sa couleur : un
   bandeau qui ne se distinguerait que par sa teinte ne dirait rien a qui ne
   percoit pas cette difference. */
.op-bandeau--information {
	background: var(--wp--preset--color--soleil, #e6a740);
	color: var(--wp--preset--color--contrast, #1c2530);
}

.op-bandeau--alerte {
	background: var(--wp--preset--color--accent-chaud, #a34d2f);
	color: var(--wp--preset--color--base, #f7f3ea);
}

.op-bandeau a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.op-bandeau__contenu {
		display: block;
		font-size: 1rem;
	}

	.op-bandeau__etiquette {
		display: block;
		margin-bottom: 0.35rem;
	}
}

/* ---------------------------------------------------------------------------
   4. Le tableau des horaires : quatre colonnes d'heures, matin et apres-midi
      pour chaque saison. Les chiffres doivent tomber les uns sous les autres,
      d'une saison a l'autre comme d'un jour a l'autre.
   --------------------------------------------------------------------------- */

.op-horaires table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.op-horaires th,
.op-horaires td {
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0.7rem 0.9rem 0.7rem 0;
	text-align: left;
	vertical-align: baseline;
}

/* Les entetes de saison, en haut, portent sur deux colonnes. */
.op-horaires thead tr:first-child th {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.op-horaires thead tr:last-child th {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.op-horaires tbody th,
.op-horaires tbody td:first-child {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
}

.op-horaires tbody td:not(:first-child) {
	font-variant-numeric: tabular-nums;
}

/* La derniere ligne n'a pas besoin de filet. */
.op-horaires tbody tr:last-child th,
.op-horaires tbody tr:last-child td {
	border-bottom: 0;
}

/* Sur un telephone, le tableau defile lateralement plutot que de se tasser,
   et la colonne des jours reste visible. */
@media (max-width: 782px) {
	.op-horaires {
		overflow-x: auto;
	}

	.op-horaires table {
		min-width: 640px;
	}

	.op-horaires tbody td:first-child {
		position: sticky;
		left: 0;
		background: inherit;
	}
}

/* Le tableau pose sur un aplat marine herite de sa couleur de texte. */
.op-sur-marine .op-horaires th,
.op-sur-marine .op-horaires td {
	border-bottom-color: rgba(207, 220, 230, 0.28);
}

/* ---------------------------------------------------------------------------
   5. Les rayons : un numero, un titre, une phrase. Le numero est un repere
      typographique, pas une liste ordonnee : il reste dans le flux mais garde
      sa largeur, pour que les titres s'alignent.
   --------------------------------------------------------------------------- */

.op-numero {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	min-width: 2.2em;
}

/* ---------------------------------------------------------------------------
   6. La carte postale : cadre blanc, legende dessous, cachet rond.
      Motif reutilisable pour poser une aquarelle en ouverture de page.
   --------------------------------------------------------------------------- */

.op-carte-postale {
	position: relative;
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: 0 18px 40px rgba(15, 32, 51, 0.14);
}

.op-cachet {
	position: absolute;
	top: -14px;
	right: -14px;
	display: grid;
	place-content: center;
	width: 96px;
	height: 96px;
	border: 2px solid var(--wp--preset--color--accent-chaud, #a34d2f);
	border-radius: 50%;
	background: rgba(247, 243, 234, 0.92);
	color: var(--wp--preset--color--accent-chaud, #a34d2f);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	line-height: 1.9;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-8deg);
}

@media (max-width: 600px) {
	.op-cachet {
		width: 74px;
		height: 74px;
		font-size: 0.5rem;
	}
}

/* ---------------------------------------------------------------------------
   7. Le nom du magasin dans la barre de tete, et le menu.
   --------------------------------------------------------------------------- */

.op-nom .wp-block-site-title a,
.op-nom {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Le bouton du menu affiche le mot MENU a cote de l'icone : une icone seule
   se devine, un mot se lit. */
.op-entete .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	margin-left: 0.6em;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.op-entete .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	padding: 0.55rem 0.9rem;
	border: 1px solid currentColor;
}

.op-entete .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--wp--preset--spacing--50, 1.5rem);
}

.op-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(1.7rem, 6vw, 2.2rem);
	font-weight: 400;
	text-decoration: none;
}

/* 8. Une image d'ouverture ne doit jamais depasser sa moitie d'ecran en
      hauteur sur un telephone tenu a la verticale. */


/* ---------------------------------------------------------------------------
   9. LE BANDEAU D'OUVERTURE.

   L'aquarelle est posée en fond CSS et non par un bloc Couverture. Deux
   raisons, dans cet ordre :

   1. Un bloc Couverture doit connaître l'adresse du fichier, qui ne peut être
      calculée que par du PHP — donc seulement dans une composition. Le modèle
      d'accueil était alors obligé de RÉFÉRENCER la composition, et changer un
      mot demandait de la « détacher » d'abord. En fond CSS, le modèle contient
      le texte lui-même : chaque phrase se modifie directement dans l'éditeur.
   2. Le voile qui protège la lisibilité du texte se règle au dégradé près,
      alors que le bloc Couverture n'offre qu'un aplat uniforme.

   L'adresse est relative à cette feuille de style, donc elle suit le thème
   quel que soit le domaine.
   --------------------------------------------------------------------------- */

.op-ouverture {
	position: relative;
	background-color: var(--wp--preset--color--nuit, #0f2033);
	background-image:
		/* le voile, du plus sombre à gauche vers presque rien à droite */
		linear-gradient(90deg, rgba(9, 20, 34, 0.78) 0%, rgba(9, 20, 34, 0.68) 36%, rgba(9, 20, 34, 0.30) 64%, rgba(9, 20, 34, 0.20) 100%),
		/* un léger assombrissement général, haut et bas */
		linear-gradient(180deg, rgba(9, 20, 34, 0.30) 0%, rgba(9, 20, 34, 0.10) 45%, rgba(9, 20, 34, 0.45) 100%),
		url("assets/images/aquarelle-phare.jpg");
	background-position: center center, center center, 62% 45%;
	background-size: cover, cover, cover;
	background-repeat: no-repeat;
}

/* Ni « display: flex » ni « min-height » ici, volontairement.
   Le groupe est en disposition « contenu centré » : c'est WordPress qui pose
   la règle qui centre un enfant « pleine largeur » (.alignwide). Passer le
   parent en flex la neutralise — l'enfant cesse de s'étirer, se réduit à son
   contenu, et le titre part au milieu au lieu de commencer sur le bord de la
   colonne. La hauteur du bandeau vient donc de ses marges intérieures.
   Mesuré : avec flex, le titre commençait à 280 px au lieu de 140 px. */

/* Le titre sur une colonne courte, l'accroche sur une colonne de lecture.
   Une largeur unique mettrait « SOUVENIRS » seul sur la deuxième ligne du
   surtitre. */
.op-ouverture__texte > h1 {
	max-width: 20ch;
}

.op-ouverture__texte > p {
	max-width: 52ch;
}

/* Le surtitre est très espacé : 41 caractères y occupent bien plus que
   41 « ch ». Mesuré dans un vrai WordPress, il passait à la ligne. */
.op-ouverture__texte > p:first-child {
	max-width: none;
}

.op-ouverture__texte > .wp-block-buttons {
	max-width: none;
}

/* Sur un téléphone, tout change : la colonne de 20 caractères mettrait le
   titre sur six lignes, et le cadrage large amène les rais de lumière juste
   sous le texte. On libère la colonne, et on cadre sur le phare — la partie
   sombre du tableau. Mesuré : ce recadrage vaut mieux qu'un voile plus
   opaque, il rend le texte lisible tout en montrant PLUS de l'aquarelle. */
@media (max-width: 780px) {
	.op-ouverture__texte > h1,
	.op-ouverture__texte > p {
		max-width: none;
	}

	.op-ouverture {
		background-image:
			linear-gradient(180deg, rgba(9, 20, 34, 0.66) 0%, rgba(9, 20, 34, 0.62) 55%, rgba(9, 20, 34, 0.74) 100%),
			url("assets/images/aquarelle-phare.jpg");
		background-position: center center, 20% 48%;
		background-size: cover, cover;
	}
}

/* ---------------------------------------------------------------------------
   10. LA BARRE DE TÊTE.
   --------------------------------------------------------------------------- */

/* Le nom du magasin et le bouton Menu s'alignent sur la colonne large, comme
   tout le reste de la page. Sans cela, la barre se cale sur la largeur de
   lecture (780 px) et le menu tombe au milieu de nulle part. */
.op-entete .op-barre {
	max-width: min(var(--wp--style--global--wide-size, 1160px), 100%);
	margin-inline: auto;
}

/* Aucun filet clair entre l'en-tête et le bandeau : l'écart entre blocs de
   premier niveau n'a pas lieu d'être quand la section suivante est un aplat. */
.wp-site-blocks > header + main {
	margin-block-start: 0;
}

.op-entete .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base, #f7f3ea);
}

/* ---------------------------------------------------------------------------
   11. LES BLOCS TEXTE / IMAGE EN ALTERNANCE.

   Sur grand écran, une section sur deux présente l'image à gauche. Sur
   téléphone, on veut TOUJOURS le texte d'abord : c'est lui qui dit de quoi
   parle la section, et une image sans son texte ne dit rien.

   Le balisage garde donc partout le texte en premier — c'est l'ordre que
   suivent le téléphone et les lecteurs d'écran — et seul l'affichage sur
   grand écran inverse les deux colonnes.
   --------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.op-bloc--inverse > .wp-block-columns {
		flex-direction: row-reverse;
	}
}

/* Le cadre de carte postale ne doit pas coller au bord sur téléphone. */
@media (max-width: 600px) {
	.op-bloc .op-carte-postale {
		margin-inline: 0;
	}
}

/* Le cadre de carte postale : l'image doit occuper toute la largeur du cadre.
   Le « margin: 1em 40px » que les navigateurs appliquent d'office à <figure>
   la décalait de 40 px vers la droite et la faisait dépasser du cadre. On le
   remet à zéro ici plutôt que de compter sur le thème parent pour le faire. */
.op-carte-postale .wp-block-image {
	margin: 0;
	width: 100%;
}

.op-carte-postale .wp-block-image img {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   12. LES LIENS SUR LES FONDS MARINE.

   Un lien prend par défaut la couleur d'accent, un bleu profond. Posé sur un
   fond marine, il donne 1,40 pour un seuil de 4,5 : le téléphone, le courriel
   et les mentions légales du pied de page étaient présents mais illisibles.
   Aucun réglage de l'éditeur ne permet de corriger la couleur des liens d'une
   section entière — c'est donc ici que ça se règle, une fois pour toutes les
   sections marine. Mesuré après : 7,82.
   --------------------------------------------------------------------------- */

.has-nuit-background-color a:not(.wp-block-button__link):not(.wp-block-navigation-item__content),
.has-mer-background-color a:not(.wp-block-button__link):not(.wp-block-navigation-item__content),
.op-sur-marine a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--soleil, #e6a740);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.has-nuit-background-color a:not(.wp-block-button__link):hover,
.has-mer-background-color a:not(.wp-block-button__link):hover,
.op-sur-marine a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--base, #f7f3ea);
}