[html] aoto: squelette portfolio de photos sous fancybox3

8 months ago · 08c9c11851
85 changed files with 29368 additions and 0 deletions
--- a/404.html
+++ b/404.html
@ -0,0 +1,43 @@
+[(#REM)
+	page 404 - pg
+
+	param:
+	- (rien)
+
+
+]#HTTP_HEADER{HTTP/1.0  #ENV{code,'404 Not Found'}}
+#HTTP_HEADER{"Cache-Control: no-store, no-cache, must-revalidate"}
+#HTTP_HEADER{Pragma: no-cache}<!DOCTYPE html>
+<html lang="#LANG">
+<head>
+	<INCLURE{fond=inc/head,no-bot} />
+	<title><:pass_erreur:> [(#ENV{status, 404}|intval) - ][(#NOM_SITE_SPIP|textebrut)]</title>
+</head>
+
+<body class="page page-404">
+<INCLURE{fond=inc/header}>
+
+<!-- content -->
+<div class="content">
+	<div class="container container-aoto">
+
+		<!--- article > txt -->
+		<div class="article-fiche">
+			<h1 class="article-h1 center"><:pass_erreur:> [(#ENV{status, 404}|intval)]</h1>
+			<div class="article-texte"><:aoto:404_sorry:></div>
+		</div>
+
+		<!--- article > img -->
+		[<div class="article-figure-unique">
+			<figure class="article-figure wow wobble">
+				<img src="(#CHEMIN{img/404.jpg})" alt="<:pass_erreur:> 404" >
+			</figure>
+		</div>]
+
+	</div>
+</div>
+<!-- #content -->
+
+<INCLURE{fond=inc/footer}>
+</body>
+</html>
--- a/_patron_article.html
+++ b/_patron_article.html
@ -0,0 +1,36 @@
+[(#REM)
+	page demo pour tester la mise en page
+]<!doctype html>
+<html lang="#LANG">
+<head>
+	<INCLURE{fond=inc/head,no-bot=oui}>
+	<title>Page démo article - [(#NOM_SITE_SPIP|textebrut)]</title>
+	[<link rel="canonical" href="(#SELF|url_absolue)" />]
+</head>
+
+
+<body class="page page-article"
+<INCLURE{fond=inc/header}>
+
+<!-- content -->
+<div class="content">
+	<div class="container container-aoto">
+		<!--- article > txt -->
+		<div class="article-fiche">
+			<h1 class="article-h1">Oh les beaux jours !</h1>
+			<div class="article-texte">Ici ma fiche et un texte plus ou moins long</div>
+		</div>
+
+		<!--- article > imgs -->
+		<div class="article-figure-unique">
+			[<figure class="article-figure wow fadeIn">(#CHEMIN{img/test-1.jpg}|balise_img)</figure>]
+		</div>
+
+	</div>
+</div>
+<!-- #content -->
+
+<INCLURE{fond=inc/footer}>
+</body>
+</html>
+#FILTRE{trim}
--- a/aoto_administrations.php
+++ b/aoto_administrations.php
@ -0,0 +1,53 @@
+<?php
+/**
+ * Fichier gérant l'installation et désinstallation du plugin Aoto
+ *
+ * @plugin     Aoto
+ * @copyright  2021
+ * @author     erational
+ * @licence    GNU/GPL
+ * @package    SPIP\Aoto\Installation
+ */
+
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+include_spip('inc/meta');
+include_spip('inc/cextras');
+include_spip('base/aoto');
+
+
+/**
+ * Fonction d'installation et de mise à jour du plugin Aoto.
+ *
+ * @param string $nom_meta_base_version
+ *     Nom de la meta informant de la version du schéma de données du plugin installé dans SPIP
+ * @param string $version_cible
+ *     Version du schéma de données dans ce plugin (déclaré dans paquet.xml)
+ * @return void
+**/
+function aoto_upgrade($nom_meta_base_version, $version_cible) {
+	$maj = array();
+
+	cextras_api_upgrade(aoto_declarer_champs_extras(), $maj['create']);
+
+	include_spip('base/upgrade');
+	maj_plugin($nom_meta_base_version, $version_cible, $maj);
+}
+
+
+/**
+ * Fonction de désinstallation du plugin aoto
+ *
+ * @param string $nom_meta_base_version
+ *     Nom de la meta informant de la version du schéma de données du plugin installé dans SPIP
+ * @return void
+**/
+function aoto_vider_tables($nom_meta_base_version) {
+	cextras_api_vider_tables(aoto_declarer_champs_extras());
+	effacer_config('aoto');
+	effacer_meta($nom_meta_base_version);
+	ecrire_metas();
+}
+
--- a/aoto_options.php
+++ b/aoto_options.php
@ -0,0 +1,18 @@
+<?php
+/**
+ * Chargement du plugin aoto
+ *
+ * @plugin     aoto
+ * @copyright  2021
+ * @author     erational
+ * @licence    GNU/GPL
+ * @package    SPIP\Aoto\Options
+ */
+
+if (!defined('_ECRIRE_INC_VERSION')) {
+	return;
+}
+
+
+$GLOBALS['debut_intertitre'] = "\n<h2 class=\"spip\">\n";
+$GLOBALS['fin_intertitre'] = "\n</h2>\n";
--- a/article.html
+++ b/article.html
@ -0,0 +1,20 @@
+[(#REM)
+	page article - aoto
+
+	param:
+	- id_article
+]<BOUCLE_art(ARTICLES){id_article}><!DOCTYPE html>
+<html lang="#LANG">
+<head>
+	<INCLURE{fond=inc/head}>
+	<title>[(#TITRE|couper{50,'&nbsp;\[...\]'}|textebrut)] - [(#NOM_SITE_SPIP|textebrut)]</title>
+	[<meta name="description" content="(#INTRODUCTION{130}|attribut_html)" />]
+	[<link rel="canonical" href="(#URL_ARTICLE|url_absolue)" />]
+</head>
+
+<body class="page page-article">
+<INCLURE{fond=inc/header, id_rubrique, id_article}>
+<INCLURE{fond=inc/article, id_article}>
+<INCLURE{fond=inc/footer}>
+</body>
+</html></BOUCLE_art>
--- a/auteur.html
+++ b/auteur.html
@ -0,0 +1,5 @@
+[(#REM)
+	page auteur - aoto
+
+	on desactive pour ne rien devoiler
+]<INCLURE{fond=404} />
--- a/base/aoto.php
+++ b/base/aoto.php
@ -0,0 +1,62 @@
+<?php
+if (!defined("_ECRIRE_INC_VERSION")) {
+	return;
+}
+
+function aoto_declarer_champs_extras($champs = array()) {
+
+	// Table spip_rubriques
+	$champs['spip_rubriques']['aoto_type_rubrique'] = array(
+		'saisie' => 'radio',
+		'options' => array(
+			'nom' => 'aoto_type_rubrique',
+			'label' => _T('aoto:aoto_type_rubrique'),
+			'sql' => "varchar(30) NOT NULL DEFAULT ''",
+			'defaut' => '',
+			'datas' => array(
+				'' => _T('aoto:aoto_type_rubrique_classique'),
+				'portfolio' => _T('aoto:aoto_type_rubrique_portfolio'),
+				'news' => _T('aoto:aoto_type_rubrique_news'),
+				'cc' => _T('aoto:aoto_type_rubrique_cc'),
+			),
+			'restrictions'=>array('voir' => array('auteur' => ''),	//Tout le monde peut voir
+							'modifier' => array('auteur' => 'webmestre')),	//Seuls les webmestres peuvent modifier
+		),
+	);
+
+	$champs['spip_rubriques']['aoto_menu_cache'] = array(
+		'saisie' => 'case',
+		'options' => array(
+			'nom' => 'aoto_menu_cache',
+			'label' => _T('aoto:aoto_menu_cache'),
+			'sql' => "varchar(3) NOT NULL DEFAULT ''",
+			'defaut' => '',
+			'label_case' =>  _T('aoto:aoto_menu_cache1'),
+			'datas' => array(
+				'on' => _T('aoto:aoto_menu_cache1'),
+			),
+			'restrictions'=>array('voir' => array('auteur' => ''),	//Tout le monde peut voir
+								'modifier' => array('auteur' => 'webmestre')),	//Seuls les webmestres peuvent modifier
+		),
+	);
+
+	$champs['spip_rubriques']['aoto_menu_ssmenu'] = array(
+		'saisie' => 'case',
+		'options' => array(
+			'nom' => 'aoto_menu_ssmenu',
+			'label' => _T('aoto:aoto_menu_ssmenu'),
+			'sql' => "varchar(3) NOT NULL DEFAULT ''",
+			'defaut' => '',
+			'label_case' =>  _T('aoto:aoto_menu_ssmenu1'),
+			'datas' => array(
+				'on' => _T('aoto:aoto_menu_ssmenu1'),
+			),
+			'restrictions'=>array('voir' => array('auteur' => ''),	//Tout le monde peut voir
+							'modifier' => array('auteur' => 'webmestre')),	//Seuls les webmestres peuvent modifier
+		),
+	);
+
+	return $champs;
+}
+
+
--- a/contact.html
+++ b/contact.html
@ -0,0 +1,5 @@
+[(#REM)
+	page contact - aoto
+
+	on desactive pour ne rien devoiler
+]<INCLURE{fond=404} />
--- a/css/animate.css
+++ b/css/animate.css
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/font/cinzel-v10-latin-500.woff
+++ b/css/font/cinzel-v10-latin-500.woff
--- a/css/font/cinzel-v10-latin-500.woff2
+++ b/css/font/cinzel-v10-latin-500.woff2
--- a/css/font/cinzel-v10-latin-600.woff
+++ b/css/font/cinzel-v10-latin-600.woff
--- a/css/font/cinzel-v10-latin-600.woff2
+++ b/css/font/cinzel-v10-latin-600.woff2
--- a/css/font/cinzel-v10-latin-700.woff
+++ b/css/font/cinzel-v10-latin-700.woff
--- a/css/font/cinzel-v10-latin-700.woff2
+++ b/css/font/cinzel-v10-latin-700.woff2
--- a/css/font/cinzel-v10-latin-800.woff
+++ b/css/font/cinzel-v10-latin-800.woff
--- a/css/font/cinzel-v10-latin-800.woff2
+++ b/css/font/cinzel-v10-latin-800.woff2
--- a/css/font/cinzel-v10-latin-900.woff
+++ b/css/font/cinzel-v10-latin-900.woff
--- a/css/font/cinzel-v10-latin-900.woff2
+++ b/css/font/cinzel-v10-latin-900.woff2
--- a/css/font/cinzel-v10-latin-regular.woff
+++ b/css/font/cinzel-v10-latin-regular.woff
--- a/css/font/cinzel-v10-latin-regular.woff2
+++ b/css/font/cinzel-v10-latin-regular.woff2
--- a/css/font/cormorant-garamond-v9-latin-300.woff
+++ b/css/font/cormorant-garamond-v9-latin-300.woff
--- a/css/font/cormorant-garamond-v9-latin-300.woff2
+++ b/css/font/cormorant-garamond-v9-latin-300.woff2
--- a/css/font/cormorant-garamond-v9-latin-300italic.woff
+++ b/css/font/cormorant-garamond-v9-latin-300italic.woff
--- a/css/font/cormorant-garamond-v9-latin-300italic.woff2
+++ b/css/font/cormorant-garamond-v9-latin-300italic.woff2
--- a/css/font/cormorant-garamond-v9-latin-500.woff
+++ b/css/font/cormorant-garamond-v9-latin-500.woff
--- a/css/font/cormorant-garamond-v9-latin-500.woff2
+++ b/css/font/cormorant-garamond-v9-latin-500.woff2
--- a/css/font/cormorant-garamond-v9-latin-500italic.woff
+++ b/css/font/cormorant-garamond-v9-latin-500italic.woff
--- a/css/font/cormorant-garamond-v9-latin-500italic.woff2
+++ b/css/font/cormorant-garamond-v9-latin-500italic.woff2
--- a/css/font/cormorant-garamond-v9-latin-600.woff
+++ b/css/font/cormorant-garamond-v9-latin-600.woff
--- a/css/font/cormorant-garamond-v9-latin-600.woff2
+++ b/css/font/cormorant-garamond-v9-latin-600.woff2
--- a/css/font/cormorant-garamond-v9-latin-600italic.woff
+++ b/css/font/cormorant-garamond-v9-latin-600italic.woff
--- a/css/font/cormorant-garamond-v9-latin-600italic.woff2
+++ b/css/font/cormorant-garamond-v9-latin-600italic.woff2
--- a/css/font/cormorant-garamond-v9-latin-700.woff
+++ b/css/font/cormorant-garamond-v9-latin-700.woff
--- a/css/font/cormorant-garamond-v9-latin-700.woff2
+++ b/css/font/cormorant-garamond-v9-latin-700.woff2
--- a/css/font/cormorant-garamond-v9-latin-700italic.woff
+++ b/css/font/cormorant-garamond-v9-latin-700italic.woff
--- a/css/font/cormorant-garamond-v9-latin-700italic.woff2
+++ b/css/font/cormorant-garamond-v9-latin-700italic.woff2
--- a/css/font/cormorant-garamond-v9-latin-italic.woff
+++ b/css/font/cormorant-garamond-v9-latin-italic.woff
--- a/css/font/cormorant-garamond-v9-latin-italic.woff2
+++ b/css/font/cormorant-garamond-v9-latin-italic.woff2
--- a/css/font/cormorant-garamond-v9-latin-regular.woff
+++ b/css/font/cormorant-garamond-v9-latin-regular.woff
--- a/css/font/cormorant-garamond-v9-latin-regular.woff2
+++ b/css/font/cormorant-garamond-v9-latin-regular.woff2
--- a/css/jquery.fancybox.css
+++ b/css/jquery.fancybox.css
@ -0,0 +1,895 @@
+body.compensate-for-scrollbar {
+    overflow: hidden;
+}
+
+.fancybox-active {
+    height: auto;
+}
+
+.fancybox-is-hidden {
+    left: -9999px;
+    margin: 0;
+    position: absolute !important;
+    top: -9999px;
+    visibility: hidden;
+}
+
+.fancybox-container {
+    -webkit-backface-visibility: hidden;
+    height: 100%;
+    left: 0;
+    outline: none;
+    position: fixed;
+    -webkit-tap-highlight-color: transparent;
+    top: 0;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    transform: translateZ(0);
+    width: 100%;
+    z-index: 99992;
+}
+
+.fancybox-container * {
+    box-sizing: border-box;
+}
+
+.fancybox-outer,
+.fancybox-inner,
+.fancybox-bg,
+.fancybox-stage {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.fancybox-outer {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+}
+
+.fancybox-bg {
+    background: rgb(30, 30, 30);
+    opacity: 0;
+    transition-duration: inherit;
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(.47, 0, .74, .71);
+}
+
+.fancybox-is-open .fancybox-bg {
+    opacity: .9;
+    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
+}
+
+.fancybox-infobar,
+.fancybox-toolbar,
+.fancybox-caption,
+.fancybox-navigation .fancybox-button {
+    direction: ltr;
+    opacity: 0;
+    position: absolute;
+    transition: opacity .25s ease, visibility 0s ease .25s;
+    visibility: hidden;
+    z-index: 99997;
+}
+
+.fancybox-show-infobar .fancybox-infobar,
+.fancybox-show-toolbar .fancybox-toolbar,
+.fancybox-show-caption .fancybox-caption,
+.fancybox-show-nav .fancybox-navigation .fancybox-button {
+    opacity: 1;
+    transition: opacity .25s ease 0s, visibility 0s ease 0s;
+    visibility: visible;
+}
+
+.fancybox-infobar {
+    color: #ccc;
+    font-size: 13px;
+    -webkit-font-smoothing: subpixel-antialiased;
+    height: 44px;
+    left: 0;
+    line-height: 44px;
+    min-width: 44px;
+    mix-blend-mode: difference;
+    padding: 0 10px;
+    pointer-events: none;
+    top: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.fancybox-toolbar {
+    right: 0;
+    top: 0;
+}
+
+.fancybox-stage {
+    direction: ltr;
+    overflow: visible;
+    transform: translateZ(0);
+    z-index: 99994;
+}
+
+.fancybox-is-open .fancybox-stage {
+    overflow: hidden;
+}
+
+.fancybox-slide {
+    -webkit-backface-visibility: hidden;
+    /* Using without prefix would break IE11 */
+    display: none;
+    height: 100%;
+    left: 0;
+    outline: none;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 44px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    transition-property: transform, opacity;
+    white-space: normal;
+    width: 100%;
+    z-index: 99994;
+}
+
+.fancybox-slide::before {
+    content: '';
+    display: inline-block;
+    font-size: 0;
+    height: 100%;
+    vertical-align: middle;
+    width: 0;
+}
+
+.fancybox-is-sliding .fancybox-slide,
+.fancybox-slide--previous,
+.fancybox-slide--current,
+.fancybox-slide--next {
+    display: block;
+}
+
+.fancybox-slide--image {
+    overflow: hidden;
+    padding: 44px 0;
+}
+
+.fancybox-slide--image::before {
+    display: none;
+}
+
+.fancybox-slide--html {
+    padding: 6px;
+}
+
+.fancybox-content {
+    background: #fff;
+    display: inline-block;
+    margin: 0;
+    max-width: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 44px;
+    position: relative;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.fancybox-slide--image .fancybox-content {
+    animation-timing-function: cubic-bezier(.5, 0, .14, 1);
+    -webkit-backface-visibility: hidden;
+    background: transparent;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    left: 0;
+    max-width: none;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    transition-property: transform, opacity;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    z-index: 99995;
+}
+
+.fancybox-can-zoomOut .fancybox-content {
+    cursor: zoom-out;
+}
+
+.fancybox-can-zoomIn .fancybox-content {
+    cursor: zoom-in;
+}
+
+.fancybox-can-swipe .fancybox-content,
+.fancybox-can-pan .fancybox-content {
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.fancybox-is-grabbing .fancybox-content {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.fancybox-container [data-selectable='true'] {
+    cursor: text;
+}
+
+.fancybox-image,
+.fancybox-spaceball {
+    background: transparent;
+    border: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: 100%;
+}
+
+.fancybox-spaceball {
+    z-index: 1;
+}
+
+.fancybox-slide--video .fancybox-content,
+.fancybox-slide--map .fancybox-content,
+.fancybox-slide--pdf .fancybox-content,
+.fancybox-slide--iframe .fancybox-content {
+    height: 100%;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+}
+
+.fancybox-slide--video .fancybox-content {
+    background: #000;
+}
+
+.fancybox-slide--map .fancybox-content {
+    background: #e5e3df;
+}
+
+.fancybox-slide--iframe .fancybox-content {
+    background: #fff;
+}
+
+.fancybox-video,
+.fancybox-iframe {
+    background: transparent;
+    border: 0;
+    display: block;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+}
+
+/* Fix iOS */
+.fancybox-iframe {
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.fancybox-error {
+    background: #fff;
+    cursor: default;
+    max-width: 400px;
+    padding: 40px;
+    width: 100%;
+}
+
+.fancybox-error p {
+    color: #444;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+}
+
+/* Buttons */
+
+.fancybox-button {
+    background: rgba(30, 30, 30, .6);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    cursor: pointer;
+    display: inline-block;
+    height: 44px;
+    margin: 0;
+    padding: 10px;
+    position: relative;
+    transition: color .2s;
+    vertical-align: top;
+    visibility: inherit;
+    width: 44px;
+}
+
+.fancybox-button,
+.fancybox-button:visited,
+.fancybox-button:link {
+    color: #ccc;
+}
+
+.fancybox-button:hover {
+    color: #fff;
+}
+
+.fancybox-button:focus {
+    outline: none;
+}
+
+.fancybox-button.fancybox-focus {
+    outline: 1px dotted;
+}
+
+.fancybox-button[disabled],
+.fancybox-button[disabled]:hover {
+    color: #888;
+    cursor: default;
+    outline: none;
+}
+
+/* Fix IE11 */
+.fancybox-button div {
+    height: 100%;
+}
+
+.fancybox-button svg {
+    display: block;
+    height: 100%;
+    overflow: visible;
+    position: relative;
+    width: 100%;
+}
+
+.fancybox-button svg path {
+    fill: currentColor;
+    stroke-width: 0;
+}
+
+.fancybox-button--play svg:nth-child(2),
+.fancybox-button--fsenter svg:nth-child(2) {
+    display: none;
+}
+
+.fancybox-button--pause svg:nth-child(1),
+.fancybox-button--fsexit svg:nth-child(1) {
+    display: none;
+}
+
+.fancybox-progress {
+    background: #ff5268;
+    height: 2px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -ms-transform: scaleX(0);
+    transform: scaleX(0);
+    -ms-transform-origin: 0;
+    transform-origin: 0;
+    transition-property: transform;
+    transition-timing-function: linear;
+    z-index: 99998;
+}
+
+/* Close button on the top right corner of html content */
+
+.fancybox-close-small {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    color: #ccc;
+    cursor: pointer;
+    opacity: .8;
+    padding: 8px;
+    position: absolute;
+    right: -12px;
+    top: -44px;
+    z-index: 401;
+}
+
+.fancybox-close-small:hover {
+    color: #fff;
+    opacity: 1;
+}
+
+.fancybox-slide--html .fancybox-close-small {
+    color: currentColor;
+    padding: 10px;
+    right: 0;
+    top: 0;
+}
+
+.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
+    overflow: hidden;
+}
+
+.fancybox-is-scaling .fancybox-close-small,
+.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
+    display: none;
+}
+
+/* Navigation arrows */
+
+.fancybox-navigation .fancybox-button {
+    background-clip: content-box;
+    height: 100px;
+    opacity: 0;
+    position: absolute;
+    top: calc(50% - 50px);
+    width: 70px;
+}
+
+.fancybox-navigation .fancybox-button div {
+    padding: 7px;
+}
+
+.fancybox-navigation .fancybox-button--arrow_left {
+    left: 0;
+    left: env(safe-area-inset-left);
+    padding: 31px 26px 31px 6px;
+}
+
+.fancybox-navigation .fancybox-button--arrow_right {
+    padding: 31px 6px 31px 26px;
+    right: 0;
+    right: env(safe-area-inset-right);
+}
+
+/* Caption */
+
+.fancybox-caption {
+    background: linear-gradient(to top,
+        rgba(0, 0, 0, .85) 0%,
+        rgba(0, 0, 0, .3) 50%,
+        rgba(0, 0, 0, .15) 65%,
+        rgba(0, 0, 0, .075) 75.5%,
+        rgba(0, 0, 0, .037) 82.85%,
+        rgba(0, 0, 0, .019) 88%,
+        rgba(0, 0, 0, 0) 100%);
+    bottom: 0;
+    color: #eee;
+    font-size: 14px;
+    font-weight: 400;
+    left: 0;
+    line-height: 1.5;
+    padding: 75px 44px 25px 44px;
+    pointer-events: none;
+    right: 0;
+    text-align: center;
+    z-index: 99996;
+}
+
+@supports (padding: max(0px)) {
+    .fancybox-caption {
+        padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
+    }
+}
+
+.fancybox-caption--separate {
+    margin-top: -50px;
+}
+
+.fancybox-caption__body {
+    max-height: 50vh;
+    overflow: auto;
+    pointer-events: all;
+}
+
+.fancybox-caption a,
+.fancybox-caption a:link,
+.fancybox-caption a:visited {
+    color: #ccc;
+    text-decoration: none;
+}
+
+.fancybox-caption a:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+/* Loading indicator */
+
+.fancybox-loading {
+    animation: fancybox-rotate 1s linear infinite;
+    background: transparent;
+    border: 4px solid #888;
+    border-bottom-color: #fff;
+    border-radius: 50%;
+    height: 50px;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    opacity: .7;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: 50px;
+    z-index: 99999;
+}
+
+@keyframes fancybox-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Transition effects */
+
+.fancybox-animated {
+    transition-timing-function: cubic-bezier(0, 0, .25, 1);
+}
+
+/* transitionEffect: slide */
+
+.fancybox-fx-slide.fancybox-slide--previous {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+}
+
+.fancybox-fx-slide.fancybox-slide--next {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+}
+
+.fancybox-fx-slide.fancybox-slide--current {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+/* transitionEffect: fade */
+
+.fancybox-fx-fade.fancybox-slide--previous,
+.fancybox-fx-fade.fancybox-slide--next {
+    opacity: 0;
+    transition-timing-function: cubic-bezier(.19, 1, .22, 1);
+}
+
+.fancybox-fx-fade.fancybox-slide--current {
+    opacity: 1;
+}
+
+/* transitionEffect: zoom-in-out */
+
+.fancybox-fx-zoom-in-out.fancybox-slide--previous {
+    opacity: 0;
+    transform: scale3d(1.5, 1.5, 1.5);
+}
+
+.fancybox-fx-zoom-in-out.fancybox-slide--next {
+    opacity: 0;
+    transform: scale3d(.5, .5, .5);
+}
+
+.fancybox-fx-zoom-in-out.fancybox-slide--current {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+}
+
+/* transitionEffect: rotate */
+
+.fancybox-fx-rotate.fancybox-slide--previous {
+    opacity: 0;
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+}
+
+.fancybox-fx-rotate.fancybox-slide--next {
+    opacity: 0;
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+}
+
+.fancybox-fx-rotate.fancybox-slide--current {
+    opacity: 1;
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+}
+
+/* transitionEffect: circular */
+
+.fancybox-fx-circular.fancybox-slide--previous {
+    opacity: 0;
+    transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+}
+
+.fancybox-fx-circular.fancybox-slide--next {
+    opacity: 0;
+    transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+}
+
+.fancybox-fx-circular.fancybox-slide--current {
+    opacity: 1;
+    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+}
+
+/* transitionEffect: tube */
+
+.fancybox-fx-tube.fancybox-slide--previous {
+    transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg);
+}
+
+.fancybox-fx-tube.fancybox-slide--next {
+    transform: translate3d(100%, 0, 0) scale(.1) skew(10deg);
+}
+
+.fancybox-fx-tube.fancybox-slide--current {
+    transform: translate3d(0, 0, 0) scale(1);
+}
+
+/* Styling for Small-Screen Devices */
+@media all and (max-height: 576px) {
+    .fancybox-slide {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+
+    .fancybox-slide--image {
+        padding: 6px 0;
+    }
+
+    .fancybox-close-small {
+        right: -6px;
+    }
+
+    .fancybox-slide--image .fancybox-close-small {
+        background: #4e4e4e;
+        color: #f2f4f6;
+        height: 36px;
+        opacity: 1;
+        padding: 6px;
+        right: 0;
+        top: 0;
+        width: 36px;
+    }
+
+    .fancybox-caption {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    @supports (padding: max(0px)) {
+        .fancybox-caption {
+            padding-left: max(12px, env(safe-area-inset-left));
+            padding-right: max(12px, env(safe-area-inset-right));
+        }
+    }
+}
+/* Share */
+
+.fancybox-share {
+    background: #f4f4f4;
+    border-radius: 3px;
+    max-width: 90%;
+    padding: 30px;
+    text-align: center;
+}
+
+.fancybox-share h1 {
+    color: #222;
+    font-size: 35px;
+    font-weight: 700;
+    margin: 0 0 20px 0;
+}
+
+.fancybox-share p {
+    margin: 0;
+    padding: 0;
+}
+
+.fancybox-share__button {
+    border: 0;
+    border-radius: 3px;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 40px;
+    margin: 0 5px 10px 5px;
+    min-width: 130px;
+    padding: 0 15px;
+    text-decoration: none;
+    transition: all .2s;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.fancybox-share__button:visited,
+.fancybox-share__button:link {
+    color: #fff;
+}
+
+.fancybox-share__button:hover {
+    text-decoration: none;
+}
+
+.fancybox-share__button--fb {
+    background: #3b5998;
+}
+
+.fancybox-share__button--fb:hover {
+    background: #344e86;
+}
+
+.fancybox-share__button--pt {
+    background: #bd081d;
+}
+
+.fancybox-share__button--pt:hover {
+    background: #aa0719;
+}
+
+.fancybox-share__button--tw {
+    background: #1da1f2;
+}
+
+.fancybox-share__button--tw:hover {
+    background: #0d95e8;
+}
+
+.fancybox-share__button svg {
+    height: 25px;
+    margin-right: 7px;
+    position: relative;
+    top: -1px;
+    vertical-align: middle;
+    width: 25px;
+}
+
+.fancybox-share__button svg path {
+    fill: #fff;
+}
+
+.fancybox-share__input {
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #d7d7d7;
+    border-radius: 0;
+    color: #5d5b5b;
+    font-size: 14px;
+    margin: 10px 0 0 0;
+    outline: none;
+    padding: 10px 15px;
+    width: 100%;
+}
+/* Thumbs */
+
+.fancybox-thumbs {
+    background: #ddd;
+    bottom: 0;
+    display: none;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    padding: 2px 2px 4px 2px;
+    position: absolute;
+    right: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    top: 0;
+    width: 212px;
+    z-index: 99995;
+}
+
+.fancybox-thumbs-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.fancybox-show-thumbs .fancybox-thumbs {
+    display: block;
+}
+
+.fancybox-show-thumbs .fancybox-inner {
+    right: 212px;
+}
+
+.fancybox-thumbs__list {
+    font-size: 0;
+    height: 100%;
+    list-style: none;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.fancybox-thumbs-x .fancybox-thumbs__list {
+    overflow: hidden;
+}
+
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
+    width: 7px;
+}
+
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+}
+
+.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
+    background: #2a2a2a;
+    border-radius: 10px;
+}
+
+.fancybox-thumbs__list a {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    background-color: rgba(0, 0, 0, .1);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    cursor: pointer;
+    float: left;
+    height: 75px;
+    margin: 2px;
+    max-height: calc(100% - 8px);
+    max-width: calc(50% - 4px);
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+    width: 100px;
+}
+
+.fancybox-thumbs__list a::before {
+    border: 6px solid #ff5268;
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: all .2s cubic-bezier(.25, .46, .45, .94);
+    z-index: 99991;
+}
+
+.fancybox-thumbs__list a:focus::before {
+    opacity: .5;
+}
+
+.fancybox-thumbs__list a.fancybox-thumbs-active::before {
+    opacity: 1;
+}
+
+/* Styling for Small-Screen Devices */
+@media all and (max-width: 576px) {
+    .fancybox-thumbs {
+        width: 110px;
+    }
+
+    .fancybox-show-thumbs .fancybox-inner {
+        right: 110px;
+    }
+
+    .fancybox-thumbs__list a {
+        max-width: calc(100% - 10px);
+    }
+}
--- a/css/style.css
+++ b/css/style.css
--- a/formulaires/configurer_aoto.html
+++ b/formulaires/configurer_aoto.html
@ -0,0 +1,43 @@
+<div class="formulaire_spip formulaire_configurer formulaire_#FORM">
+
+	<h3 class="titrem"><:aoto:cfg_titre_parametrages:></h3>
+
+	[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
+	[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
+
+	<form method="post" action="#ENV{action}">
+	<div>
+		#ACTION_FORMULAIRE
+
+		<fieldset>
+
+			<legend><:aoto:cfg_sommaire:></legend>
+			<p class="spip"><:aoto:cfg_sommaire_explication:></p>
+			<p class="spip"><small><:aoto:cfg_sommaire_explication_astuce:></small></p>
+
+			[(#SAISIE{selecteur_article, sommaire_photos_desktop,
+					multiple=non,
+					label=<:aoto:cfg_sommaire_photos_desktop:>,
+					explication=<:aoto:cfg_sommaire_photos_desktop_explication:>})]
+
+			[(#SAISIE{selecteur_article, sommaire_photos_rwd,
+					multiple=non,
+					label=<:aoto:cfg_sommaire_photos_rwd:>,
+					explication=<:aoto:cfg_sommaire_photos_rwd_explication:>})]
+
+			<legend><:aoto:cfg_menu:></legend>
+			<p class="spip"><:aoto:cfg_rezo_explication:></p>
+			[(#SAISIE{input, rezo_instagram,
+					label=<:aoto:cfg_rezo_instagram:>})]
+
+			[(#SAISIE{input, rezo_facebook,
+					label=<:aoto:cfg_rezo_facebook:>})]
+
+		</fieldset>
+		<input type="hidden" name="_meta_casier" value="aoto" />
+		<p class="boutons"><span class="image_loading">&nbsp;</span><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
+	</div>
+	</form>
+</div>
+
+<div style="padding:1rem;background-color:#eee;text-align:center"><:aoto:ours:></div>
--- a/img/404.jpg
+++ b/img/404.jpg
--- a/img/aoto.svg
+++ b/img/aoto.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 22">
+  <defs/>
+  <path d="M6.4 4.3L8.1.9c.2-.4.5-.6.9-.6h8c.4 0 .7.2.9.6l1.7 3.4H23c1.7 0 3 1.3 3 3v11c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3v-11c0-1.7 1.3-3 3-3h3.4zm6.6 13c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0-2c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm8-5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"/>
+</svg>
--- a/img/but-top.png
+++ b/img/but-top.png
--- a/img/image-transparente.png
+++ b/img/image-transparente.png
--- a/img/logo-facebook.svg
+++ b/img/logo-facebook.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
--- a/img/logo-instagram.svg
+++ b/img/logo-instagram.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
--- a/img/test-1.jpg
+++ b/img/test-1.jpg
--- a/inc/article.html
+++ b/inc/article.html
@ -0,0 +1,17 @@
+[(#REM)
+	article:
+	on determine la mise en page
+	- portfolio ou image unique
+
+
+	param:
+	- id_article
+
+
+]<BOUCLE_img(DOCUMENTS){id_article}{extension IN jpg,png,gif}{0,2}> </BOUCLE_img>
+[(#TOTAL_BOUCLE|=={1}|oui) <INCLURE{fond=inc/article_image_unique, id_article} />]
+[(#TOTAL_BOUCLE|=={1}|non) <INCLURE{fond=inc/article_portfolio, id_article} />]
+</B_img>
+<INCLURE{fond=inc/article_image_unique, id_article} />
+<//B_img>
+#FILTRE{trim}
--- a/inc/article_image_unique.html
+++ b/inc/article_image_unique.html
@ -0,0 +1,32 @@
+[(#REM)
+	article pour 1 image ou 0
+
+	param:
+	- id_article
+
+
+]<BOUCLE_art(ARTICLES){id_article}>
+<!-- content -->
+<div class="content">
+	<div class="container container-aoto">
+
+		<!--- article > txt -->
+		<div class="article-fiche">
+			[<h1 class="article-h1 #EDIT{titre}">(#TITRE)</h1>]
+			[<div class="article-texte #EDIT{texte}">(#TEXTE)</div>]
+		</div>
+
+		<!--- article > img -->
+		<BOUCLE_img_unique(DOCUMENTS){id_article}
+									{extension IN jpg,png,gif}
+									{par rang_lien, id_document}
+									>
+		<div class="article-figure-unique">
+			[<figure class="article-figure wow fadeIn">(#URL_DOCUMENT|balise_img{#TITRE})</figure>]
+		</div>
+		</BOUCLE_img_unique>
+	</div>
+</div>
+<!-- #content -->
+</BOUCLE_art>
+#FILTRE{trim}
--- a/inc/article_portfolio.html
+++ b/inc/article_portfolio.html
@ -0,0 +1,118 @@
+[(#REM)
+	article avec portfolio
+
+	ATTENTION:  si modification
+	modifier aussi inc/rubrique_portfolio
+
+
+	param:
+	- id_article
+
+
+]<BOUCLE_art(ARTICLES){id_article}>
+<!-- content -->
+<div class="content">
+	<div class="container container-aoto">
+
+		<!--- gondole -->
+		[(#REM)		texte de gondole: logo sinon on prend 1er image ]
+		<div class="gondole gondole-play-wrapper-js">
+			[(#SET{l,#ENV{l}|sinon{2000}})]
+			[(#SET{h,#ENV{h}|sinon{600}})]
+			[(#SET{fond,#ENV{f}|sinon{'#727272'}})]
+			[<div class="gondole-item wow fadeIn">(#LOGO_ARTICLE|image_proportions{#GET{l},#GET{h},focus}
+																		|image_reduire{#GET{l},#GET{h},center center}
+																		|image_recadre{#GET{l},#GET{h},center,#GET{fond}}
+																		|inserer_attribut{alt,#ENV{titre}|textebrut})</div>]
+
+
+			<BOUCLE_img_gondole(DOCUMENTS){id_article}
+									{extension IN jpg,png,gif}
+									{par rang_lien, id_document}
+									{0,1}
+									{si #LOGO_ARTICLE|non}>
+			[<div class="gondole-item wow fadeIn">(#FICHIER|image_proportions{#GET{l},#GET{h},focus}
+																		|image_reduire{#GET{l},#GET{h},center center}
+																		|image_recadre{#GET{l},#GET{h},center,#GET{fond}}
+																		|inserer_attribut{alt,#ENV{titre}|textebrut})</div>]
+			</BOUCLE_img_gondole>
+
+			<div class="gondole-fiche">
+				<div class="gondole-fiche-inner">
+					[<h1 class="gondole-titre #EDIT{titre}">(#TITRE)</h1>]
+					[<div class="gondole-texte  #EDIT{texte}">(#TEXTE)</div>]
+				</div>
+			</div>
+
+			<div class="gondole-play">
+				<svg fill="currentColor" viewBox="0 0 30 30" id="sm-icon-def-large-Play"><path d="M21 15L9 23V7l12 8" fill-rule="evenodd"></path></svg>
+			</div>
+		</div>
+		<!--- #gondole -->
+
+		<!---  planche -->
+		[(#REM)		planche contact en 3 colonnes responsives ]
+		<div class="planche">
+			[(#REM) compteur photo]
+			#SET{c,1}
+			<B_img1>
+			<div class="planche-col planche-col-1">
+			<BOUCLE_img1(DOCUMENTS){id_article}
+									{extension IN jpg,png,gif}
+									{par rang_lien, id_document}
+									{1/3}>
+				[<figure class="planche-item wow fadeIn">
+					<a href="#URL_DOCUMENT" data-fancybox="images" class="planche-item-lien planche-item-lien-#GET{c}">(#FICHIER|image_reduire{1000,0})</a>
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)<figcaption>]
+						[<h6 class="planche-item-titre">(#TITRE)</h6>]
+ 						[<div class="planche-item-desc">(#DESCRIPTIF)</div>]
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)</figcaption>]
+				</figure>]
+				[(#SET{c,#GET{c}|plus{1}})]
+			</BOUCLE_img1>
+			</div>
+			</B_img1>
+
+			<B_img2>
+			<div class="planche-col planche-col-2">
+			<BOUCLE_img2(DOCUMENTS){id_article}
+									{extension IN jpg,png,gif}
+									{par rang_lien, id_document}
+									{2/3}>
+				[<figure class="planche-item wow fadeIn">
+					<a href="#URL_DOCUMENT" data-fancybox="images" class="planche-item-lien planche-item-lien-#GET{c}">(#FICHIER|image_reduire{1000,0})</a>
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)<figcaption>]
+						[<h6 class="planche-item-titre">(#TITRE)</h6>]
+ 						[<div class="planche-item-desc">(#DESCRIPTIF)</div>]
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)</figcaption>]
+				</figure>]
+				[(#SET{c,#GET{c}|plus{1}})]
+			</BOUCLE_img2>
+			</div>
+			</B_img2>
+
+			<B_img3>
+			<div class="planche-col planche-col-3">
+			<BOUCLE_img3(DOCUMENTS){id_article}
+									{extension IN jpg,png,gif}
+									{par rang_lien, num titre, titre}
+									{3/3}>
+				[<figure class="planche-item wow fadeIn">
+					<a href="#URL_DOCUMENT" data-fancybox="images" class="planche-item-lien planche-item-lien-#GET{c}">(#FICHIER|image_reduire{1000,0})</a>
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)<figcaption>]
+						[<h6 class="planche-item-titre">(#TITRE)</h6>]
+ 						[<div class="planche-item-desc">(#DESCRIPTIF)</div>]
+					[(#TITRE|sinon{#DESCRIPTIF}|oui)</figcaption>]
+				</figure>]
+				[(#SET{c,#GET{c}|plus{1}})]
+			</BOUCLE_img3>
+			</div>
+			</B_img3>
+		</div>
+		<!---  planche -->
+
+	</div>
+</div>
+<!-- #content -->
+</BOUCLE_art>
+#FILTRE{trim}
--- a/inc/footer.html
+++ b/inc/footer.html
@ -0,0 +1,14 @@
+[(#REM)
+	pied de page
+
+	param:
+	(aucun)
+
+
+]<footer class="footer">
+	<div class="container container-aoto">
+		[<div class="go-top">
+			<a href="#top"><img src="(#CHEMIN{img/but-top.png})" alt="haut de page" width="50" height="50" /></a>
+		</div>]
+	</div>
+</footer>
--- a/inc/head.html
+++ b/inc/head.html
@ -0,0 +1,26 @@
+[(#REM)
+	section head
+
+	param:
+	- no-bot (facultatif):	pas indexation
+]	<meta charset="#CHARSET" />
+	<meta http-equiv="imagetoolbar" content="no"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	[(#ENV{no-bot}|oui)<meta name="robots" content="none" >]
+	[(#ENV{no-bot}|non)<meta name="robots" content="index, follow, all">]
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="apple-mobile-web-app-capable" content="no">
+	<meta name="apple-touch-fullscreen" content="yes">
+	<meta name="msapplication-tap-highlight" content="no">
+	#INSERT_HEAD_CSS
+	<link rel="stylesheet" type="text/css" href="#CHEMIN{css/bootstrap.css}" />
+	<link rel="stylesheet" type="text/css" href="#CHEMIN{css/jquery.fancybox.css}" />
+	<link rel="stylesheet" href="#CHEMIN{css/animate.css}" />[(#REM) wow.js]
+	<link rel="stylesheet" type="text/css" href="#CHEMIN{css/style.css}" />
+	#INSERT_HEAD
+	<script src="#CHEMIN{js/bootstrap.bundle.js}" type='text/javascript'></script>
+	<script src="#CHEMIN{js/jquery.fancybox.js}" type='text/javascript'></script>
+	<script src="#CHEMIN{js/wow.js}" type='text/javascript'></script>
+	<script src="#CHEMIN{js/gui.js}" type='text/javascript'></script>
+	[<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="(#URL_PAGE{backend})" />]
+#FILTRE{trim}
--- a/inc/header.html
+++ b/inc/header.html
@ -0,0 +1,82 @@
+[(#REM)
+	header : banniere et barre de navigation
+
+	param:
+	- id_rubrique (facultatif) 		expose la rubrique + lien de traduction
+	- id_article (facultatif) 		expose la rubrique
+	- class							ajoute une classe en plus
+]
+
+<!-- header -->
+<header class="header rwd-hidden[ (#ENV{class})]" role="banner" id="top">
+	<div class="container container-aoto">
+		<div class="header-inner">
+			<div class="header-logo">
+				<a href="#URL_SITE_SPIP" class="header-logo-link">
+					[<div class="header-logo-titre">(#NOM_SITE_SPIP)</div>]
+					[<div class="header-logo-ss-titre">(#SLOGAN_SITE_SPIP)</div>]
+				</a>
+			</div>
+
+			<ul class="header-nav">
+			[(#REM)
+				menu:
+				on liste toutes les rubriques à la racine non cachées
+			]
+			<BOUCLE_nav(RUBRIQUES){titre !=='^999.'}{aoto_menu_cache != 'on'}{par num titre}{racine}>
+				<li>
+					<a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>#TITRE</a>
+					[(#REM) sous menu
+							- si option PG_MENU_SSMENU activée sur la rubrique
+					]<B_ss_nav>
+					<ul class="header-nav-nav">
+					<BOUCLE_ss_nav(ARTICLES){id_rubrique}{par num titre}{!par date}{0,15}{si #AOTO_MENU_SSMENU|oui}>
+						<li><a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>#TITRE</a></li>
+					</BOUCLE_ss_nav>
+					</ul>
+					</B_ss_nav>
+				</li>
+			</BOUCLE_nav>
+				[<li class="nav-rezo rezo-instagram"><a href="(#CONFIG{aoto/rezo_instagram}|trim)" target="_blank">[(#CHEMIN{img/logo-instagram.svg}|balise_img)]</a></li>]
+				[<li class="nav-rezo rezo-facebook"><a href="(#CONFIG{aoto/rezo_facebook}|trim)" target="_blank">[(#CHEMIN{img/logo-facebook.svg}|balise_img)]</a></li>]
+			</ul>
+		</div>
+</header>
+<!-- #header -->
+
+<!-- header responsive (fixed navbar) -->
+<nav class="navbar navbar-expand-lg navbar-dark rwd-show[ (#ENV{class})]">
+	<a class="navbar-brand" href="#URL_SITE_SPIP">
+		[<div class="navbar-brand-titre">(#NOM_SITE_SPIP)</div>]
+		[<div class="navbar-brand-ss-titre">(#SLOGAN_SITE_SPIP)</div>]
+	</a>
+	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+ 	</button>
+	<div class="collapse navbar-collapse" id="navbarCollapse">
+		<ul class="navbar-nav mr-auto">
+			<BOUCLE_rub_rwd(RUBRIQUES){titre !=='^999.'}{aoto_menu_cache != 'on'}{par num titre}{racine}>
+			<li class="nav-item">
+				<a href="#URL_RUBRIQUE" class="nav-link[ (#EXPOSE)]">#TITRE</a>
+				[(#REM) sous menu
+						- si option AOTO_MENU_SSMENU activée sur la rubrique
+				]<B_ss_nav_rwd>
+				<ul class="navbar-nav-nav">
+				<BOUCLE_ss_nav_rwd(ARTICLES){id_rubrique}{par num titre}{!par date}{0,15}{si #AOTO_MENU_SSMENU|oui}>
+					<li><a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>#TITRE</a></li>
+				</BOUCLE_ss_nav_rwd>
+				</ul>
+				</B_ss_nav_rwd>
+			</li>
+			</BOUCLE_rub_rwd>
+			[(#CONFIG{aoto/rezo_facebook}|sinon{#CONFIG{aoto/rezo_instagram}}|oui)<li class="nav-item nav-rezo">
+				<ul>
+					[<li class="nav-rezo rezo-facebook"><a href="(#CONFIG{aoto/rezo_facebook}|trim)" target="_blank">[(#CHEMIN{img/logo-facebook.svg}|balise_img)]</a></li>]
+					[<li class="nav-rezo rezo-instagram"><a href="(#CONFIG{aoto/rezo_instagram}|trim)" target="_blank">[(#CHEMIN{img/logo-instagram.svg}|balise_img)]</a></li>]
+				</ul>
+			</li>]
+		</ul>
+	</div>
+</nav>
+<!-- header responsive -->
+#FILTRE{trim}
--- a/inc/rubrique.html
+++ b/inc/rubrique.html
@ -0,0 +1,106 @@
+[(#REM)
+	rubrique classique:
+	- on liste les articles avec leur pseudo-logo
+	- on fait le lien vers les articles